Skip to main content

Create app or library

This guide shows how to generate new apps and libraries to make it include the necessary configurations and work smoothly within the monorepo.

Create an application with pages​

  1. Generate new app with @dnb/gatsby:
# will generate the app with the e2e app
yarn nx g app <your-name-space>/<application-name>

# will generate the app without the e2e app
yarn nx g app <your-name-space>/<application-name> --e2eTestRunner=none
  1. Add your application to the root application gatsby-config.js plugins field:
{
  plugins: [...require('@<your-name-space>/<application-name>/theme')];
}
  1. Link to your other Gatsby pages:
import Link from '@dnb/link';

render(<Link to="/<application-name>">Go to app-a</Link>);

The additional E2E app​

NX also creates an end-to-end test application that runs Cypress. Run your e2e tests with:

yarn nx e2e <your-name-space>/<application-name>-e2e

Go to Cypress E2E tests for more information.

Creating pages​

You will have to create your pages inside your name space: src/pages/<your-name-space>/<application-name>/your-stuff or use Gatsby's createPages API.

To create file based pages, you can either create them manually or use the NX CLI:

yarn nx g page [page-name] --directory=pages/<your-name-space> --project=<your-name-space>/<application-name>

Equivalent to yarn nx g @dnb/gatsby:page ...

More resources about page creation:

Create a new library​

yarn nx g lib <your-name-space>/<your-lib>

NX uses kebab-case for naming components. If you prefer to have generated components in PascalCase, you have to append the CLI flag --pascalCaseFiles.

  • or yarn nx g @dnb/gatsby:lib <your-name-space>/<your-lib>
  • or yarn nx g @dnb/react:lib <your-name-space>/<your-lib>

Now you can go and import your new library from inside your application:

import { Component } from '@dnb/<your-name-space>/<your-lib>';

Contributing to DNB shared libraries​

There is nothing more sweet than sharing your code with the fellow DNB Web Community. If you think your code can be reused by others, we have written the DNB shared library guide to guide you in making a maintainable and easy-to-use shared library.

Creating the root-application​

The root app will be the application that hosts your Gatsby instance, bundling all the sub applications, including their pages.

yarn nx g app <your-name-space>/<root-app>

equivalent to yarn nx g @dnb/gatsby:app <your-name-space>/<root-app>.

Tip: It is recommended that your root application name starts with root-, but you can also use the CLI flag --isRoot during generation.

Renaming or deleting applications and libraries​

Deleting:

yarn nx g remove <your-name-space>/<application-name>

Move (Rename):

yarn nx g move --project <your-name-space>/<application-name> <your-name-space>/<NEW-NAME>