Skip to content

Dev setup

Jump to bottom
Jonathan Sharpe edited this page May 5, 2021 · 30 revisions

Tools

The following global tools are recommended to simplify development:

  • NVM - lets you manage multiple versions of Node on one machine (the version this project currently uses is in .nvmrc).
  • direnv - lets you manage environment variables (and the active version of Node) based on the .envrc of the directory you're in.

Installation

  1. Go to https://github.com/textbook/starter-kit/generate (or click "Use this template") to create your own version of this repository

  2. Clone the new repository to your local machine.

  3. cd into the repository's directory on your local machine. You can run git status to check you're in the right place, it should say something like

    On branch master
Your branch is up to date with 'origin/master'.

nothing to commit, working tree clean

    • If you have direnv installed, you may see

      direnv: error .envrc is blocked. Run `direnv allow` to approve its content.

      If you trust the repo, you can run direnv allow as suggested.

  4. Install the dependencies by running npm install; this will create a node_modules/ directory and fill it with the requirements specified in package.json and package-lock.json.

  5. Run the app using either npm run dev (developer mode, with watching/reloading of your code as you make changes) or npm run serve (production mode, to check what will actually get deployed) - see Scripts for more details.

  6. While one of those two scripts is running, visit http://localhost:3000 to see the app:

    If you see any errors, or the site doesn't look like the image above, check out Home#Common errors.

Ports

If you see EADDRINUSE when trying to run dev or serve, you may have other processes running on your machine that are using ports the starter kit expects. You can check which processes these are using the command:

lsof -i :<port>

If you see existing npm commands running, you may have terminals running in the background somewhere - find them and stop them! If you see some other program running, you may need to switch ports. You can do this as follows:

  • npm run dev:
    • Frontend (default: 3000): you need to change the line port: 3000, in client/webpack/dev.config.js
    • Backend (default: 3100): you need to change this in two places, the line "/api": "http://localhost:3100", in client/webpack/dev.config.js and the line "dev:serve": "wait-on -l file:dist/server.js && cross-env PORT=3100 nodemon dist/server.js --watch dist", in package.json.
  • npm run serve:
    • Backend (default: 3000): the easiest way to override this is when you actually run the server, so you can do e.g. PORT=3210 npm run serve. Alternatively you can change the line const port = parseInt(process.env.PORT || "3000"); in server/server.js.
Clone this wiki locally