Skip to main content

Quick start

Welcome to the monorepository of the new DNB.no! Here we have gathered all the projects of the new online bank under one single repository to share common tools and workflow. Project apps are included from Private Market (PM), Corporate Banking (CB), Experience (Open pages) and Savings and investments (S&I?).

Setup​

You need to have set up ZPA and granted access to GitLab in advance.

git clone ssh://git@gitlab.tech.dnb.no:2222/dnb/dcf/dnb-web.git
cd dnb-web
./devconfig.mjs

The script devconfig.mjs sets git branching rules, git name/email and optionally enables linting and testing in pre-commit.

More information in the Readme on GitLab.

Repository structure​

On the root level you'll find some basic setup for the formatting tools Eslint/Prettier, test setup with Jest and configurations for the Babel compiler, as well as the Nx-specific workspace configurations (nx.json and workspace.json).

The folders:

  • apps/ - is where you'll create all running applications divided into each departments name-space, i.e. apps/pm-netbank/, apps/spare/
    • inside your namespace you will create a root application, the Gatsby instance that will hold all your pages and library components
  • libs/ - is the space to hold all shareable components and will be divided into departments the same way as in apps/
    • libs/ also includes dnb-components/ where you will find the shared components such as the dnb-header, dnb-footer etc.
  • tools/ - includes the repository tools to create new gatsby applications, es-lint plugin etc.

Read more about the useful tools and components in Library docs.

Run your application​

All run and serve commands should be ran from the monorepository root dnb-web/ using Nx. Every project needs to be listed inside the root workspace.json.

Run your application

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

Your root application should now run on localhost:4200.

Tip: You can test your local setup by running the demo app from Framework: yarn nx serve framework/root-app

Run commands

To run other commands (test, lint, build), use the nx run command.

yarn nx run <your-name-space>/<root-app>:<command>

Run commands with Nx are specified in each project's project.json.

Tip: To run the Gatsby clean cache command, use: yarn nx clean <your-name-space>/<application-name>

Run several projects​

NX has a command to run all projects (nx --all) or some projects (nx run-many --projects=...). But in order to use a Regex, the DNB Framework has an extended CLI support to run a regular expression, like to:

yarn nx <command> --projects=/regex/

Example: yarn nx test --projects=@dnb/

Git workflow​

Meet the branches​

  • The master branch: Where code sits after it’s been developed, reviewed, approved, and merged. The HEAD of the master branch is a production-ready snapshot of all the apps the exist in the monorepo. If you have a WIP feature, make sure it’s behind a feature flag.
  • The task branch: A single purpose, short-lived branch where features are developed, bugs are fixed, utilities are built, etc.
    • Code in a task branch will not be deployed until it has been reviewed, approved, and merged into master.

single purpose: your task branch should not do more than one thing, this makes it easier for you and your team to review and update the code while avoiding merge conflicts with other team members/other teams.

short-lived: a branch that should last a few days and carry a consistent piece of code that contributes to the task you are developing.

Rebase​

To keep the one shared master branch conflict-free and neat, we embrace using a rebase workflow.

Keep your task branch up to date by regularly (we recommend daily) doing a rebase with master:

git fetch origin && git rebase origin/master

Branch naming​

In the monorepo, we follow a branch name convention to make it easier for you and other teams to manage branches. The branch name should be in kebab case (i.e. All words are separated by a hyphen -); that’s because GitLab will pick that up and set your pull request’s title correctly.

The naming format follows this pattern: <target-name-space>/<task-type>/<task>.

Example: pm-netbank/feature/update-card-list-loading-state

List of task-type​

  • feature: new functionality to add to the codebase.
  • fix: bug fixes after a feature is released.
  • internal: housekeeping, refactoring, and all non-user facing utility development.
  • test: writing tests for existing functionality.
  • analytics: adding analytics code to your app(s).
  • text: changing copy and localised string keys.

Create commit​

After you have made your changes, you commit it to the task branch by:

git add .
git commit
git push -u origin <your-branch-name>

Don't use the -m for adding a git message, since the generated commit message template is added later.

For a more detailed step-by-step guide, head over to Create your first commit.

  • NX guide: The guide to the Nx monorepo manager, for more run commands and possible options.
  • Gatsby docs: The documentation of Gatsby js, the framework which provides a big set of possibilities and tools for creating your web apps.