Skip to content
Starter kit for full-stack JavaScript projects
JavaScript Dockerfile HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
.vscode
__mocks__
client
e2e
server
.babelrc
.cfignore
.dockerignore
.envrc
.eslintignore
.eslintrc.json
.gitignore
.nvmrc
.travis.yml
Dockerfile
README.md
app.json
cypress.json
docker-compose.yml
jest.config.js
manifest.yml
package-lock.json
package.json
setupTests.js

README.md

Starter Kit

Deploy to Heroku

  • Full stack ES8+ with Babel
  • Node LTS support (verified working on 8.x, 10.x and 12.x LTS releases)
  • Express server
  • React client with Webpack
  • Linting with ESLint
  • Unit and integration testing with Jest (and SuperTest)
  • E2E testing with Cypress
  • Dev mode (watch modes for client and server, proxy to avoid CORS issues)
  • Production build (single deployment artifact, React loaded via CDN)
  • Travis pipeline
  • CircleCI pipeline
  • Heroku deployment
  • Cloud Foundry deployment
  • Docker build

Scripts

Various scripts are provided in the package file, but many are helpers for other scripts; here are the ones you'll commonly use:

  • dev: starts the frontend and backend in dev mode, with file watching (note that the backend runs on port 3100, and the frontend is proxied to it).
  • e2e: builds and starts the app in production mode and runs the Cypress tests against it.
  • e2e:dev: opens Cypress for local dev, instead of running it in the background. Doesn't start the app.
  • e2e:docker: runs the E2E tests using docker-compose, as it runs in the verify-* jobs in CircleCI. You can use NODE_VERSION to choose which Node image to run the app in (e.g. NODE_VERSION=carbon npm run e2e:docker).
  • lint: runs ESLint against all the JavaScript in the project.
  • serve: builds and starts the app in production mode locally.
  • ship: runs lint, then test, then e2e; ideal before a git push.
  • test: runs the Jest unit and integration tests.
  • test:watch: runs the unit and integration tests in watch mode.

Rationale

Partly I wrote this to explore what things like Create React App (CRA) are doing under the hood with Babel and Webpack. Partly it was to simplify a previous starter kit, so there aren't multiple package entry points complicating the automation and it's not using copy (which caused cross-platform issues on Windows).

Pros

  • A single root ESLint configuration keeps the project's code consistent to minimise context switching
  • Having Jest running once for the whole project means you can run test:watch and see the tests related to changes anywhere in the codebase
  • Less hidden "magic" config than when using CRA
  • Simpler orchestration with a single NPM entry point

Cons

  • The single package.json is getting a bit unwieldy; there are 20+ scripts and it's unclear what part of the app each dev dependency is for
  • Cypress only runs in Electron/Chrome (for a more cross-browser alternative, see Codecept)

To consider

  • TypeScript?
You can’t perform that action at this time.