Skip to content

Environment Setup (Developer)

Jonathan Grimes edited this page Sep 22, 2021 · 11 revisions

NextThought Web Developer Initiation Document

Light Reading

Setting up the Web Developer Environment

These instructions are for developers intending on working on client side projects. Server devs looking to set up a readonly web instance see docs here.

System Setup/Requirements

  1. Install Docker
  2. Install nodejs
    • NVM is the recommended tool for managing Nodejs versions
      • If you installed the pkg version of node, you can easily remove it with this script so that nvm is the sole provider of the node runtime.
    • Note: installing node will give you access to the npm and npx commands

install the latest of each:

nvm install node
npm i -g npm
#verify npm 7
npm -v
> 7.24.0
node -v
> 16.5.0

npm Configuration

  1. Create a login on npm.nextthought.com.
    • npm.nextthought.com is our private npm repo so we don't have to worry about our source code getting accidentally made public.
  2. Configure .npmrc to look at npm.nextthought.com form "@nti" packages.
    1. Run npm login --registry=npm.nextthought.com to setup your access token.
    2. Run npm set @nti:registry https://npm.nextthought.com setup the @nti registry

Text Editor Requirements

There is no specific text editor that you have to use. Most people on the team use VSCode. No matter what text editor you choose it must be set up to enforce the provided prettier, eslint, and stylelint configs. These ensure consistent code quality across developers.

Checking out the source code

  1. Open a terminal and navigate to a location where you want the code to live.
  2. make an empty workspace directory and cd into it.
  3. run npx -y @nti/clone --preset=webapp
  4. npm install from only the workspace dir.
  5. if you have a local buildout, you will probably want to skip generating the docker container
    • Set the environment variable NTI_SKIP_DOCKER to a non-empty value. (ie: NTI_SKIP_DOCKER=1)

NOTE: The @nti/clone script will generate a few files: (if you are missing these or have outdated ones, rerunning @nti/clone will add missing repositories and refresh these files)

  • a pre-generated vscode workspace file
  • a pull script - it will git pull all git repositories within the workspace (in parallel).
  • a generated package.json with special npm 7 config for workspaces. Review the scripts key within for some shortcuts:
    • build - Runs all the build-* scripts in parallel
    • build-login - Creates a static build of the login app
    • build-mobile - Creates a static build of the mobile app
    • build-webapp - Creates a static build of the main web app
    • refresh - Refreshes all node_modules and updates sources within the dataserver docker container
    • start - Starts the docker containers in the background and then starts the webapp in dev mode.
    • stop - Stops the background docker containers

Starting Things

  1. Start docker containers:
    cd <workspace>/server
    npm start 
    • This starts our backend services in the background. You should stop them when you stop working. To do this use:
      cd <workspace>/server
      npm stop
  2. Start Webapp/Login/Mobile
    cd <workspace>/app/<app-name>
    npm start
    note: we currently can only run one at a time in dev mode. Each app will start the other two in static mode while developing one.

Issue/Ticket list (What to work on)

We use JIRA as our issue tracker. Issues are divided into "releases" and sorted by priority.

Ticket workflow:

  1. Find the ticket in the current release's TODO list you are going to work on.
  2. Move the ticket to IN PROGRESS to alert others that you are working on it.
  3. Once the code to resolve the ticket has been committed and added to a snapshot move the ticket to READY FOR TESTING. To let the QA team know that we are ready for them to start testing.

Updating Code

Do not refresh the workspace to update our code. Only refresh if you are unable to start. The refresh does pull git repositories. However, it also updates all 3rd party code... which we do not need to update unless we know (or you are told) there is a new version of X that is needed/improves things.

To update just our code, use git pull. or the pull script in the workspace root.

Workspace refreshes do not apply to standalone (just one-off cloned) ... unfortunately, the only way to get updates is to reinstall node_modules there. But no web dev should be in that scenario.