MongoDB Developer Hub Front-End

Uses Gatsby to build static site.

Installation

Starting in September 2021, we use Artifactory (MongoDB's internal package repository) as our primary source of dependencies. With this comes the requirement to login to Artifactory using some credentials. At the time of updating this guide, we are working out our service account on artifactory and getting our API key, but for now you will need to set the following ENV variables in ~/.bash_profile (which can be 0bined from a team member) NPM_AUTH and NPM_EMAIL.

npm ci

.env file setup

You'll need to set some environment variables in two separate files at the root of this directory for separate production/development environments.

.env.production

Snooty's build and serve stages use the production environment. Your .env.production file should be as follows:

GATSBY_SITE=<SITE>
GATSBY_PARSER_USER=<USER>
GATSBY_PARSER_CI_USER=jordanstapinski
GATSBY_PARSER_BRANCH=<BRANCH>
GATSBY_SNOOTY_DEV=true

.env.development

Snooty's develop stage uses the development environment. Your .env.development file should be as follows:

GATSBY_SITE=<SITE>
GATSBY_PARSER_USER=<USER>
GATSBY_PARSER_CI_USER=jordanstapinski
GATSBY_PARSER_BRANCH=<BRANCH>
GATSBY_SNOOTY_DEV=true

The GATSBY_SNOOTY_DEV variable is what allows Gatsby to know that when the application is built it should use the snooty branch name as part of the file paths. When not set, the file paths will use the value of GATSBY_PARSER_BRANCH.

It should be set to true when working on snooty locally.

Running locally

To serve a "hot-reloadable" development build of the site at localhost:8000, run:

npm run develop

To build and serve a production build of the site, run the following commands:

$ npm run build
$ npm run serve

To production build and serve without using Gatsby prefix-paths:

$ npm run buildTest
$ npm run serveTest

This will then serve the site at localhost:9000

Staging

Install mut and ensure that you have properly configured your Giza/AWS keys. Then, from root, run:

make stage

Unit tests

Unit tests are located in the tests/unit/ directory. To run only unit tests, use:

npm run test:unit

Integration tests

Integration tests are located in the cypress directory and are run on the Cypress framework. First, build a production build of the site without prefix-paths using the following command:

$ npm run buildTest
$ npm run serveTest

and then load the Cypress UI using:

$ npm run test:e2e:start

or run headless with:

$ npm run test:e2e:headless

Running individual suites

Jest includes configurations for running individual test suites:

npm test -- my-test   # or
npm test -- path/to/my-test.js

For more information, see the Jest CLI Options documentation, or run npm test -- --help.

Linting & Style

We use ESLint and Prettier to help with linting and style.

Style

To format code using Prettier, run the following command:

npm run format:fix

We have set up a precommit hook that will format staged files. Prettier also offers a variety of editor integrations to automatically format your code.

Check out the internal wiki for more information.