Extending the Starter Project

Details on editing the starter project's file structure and build processes.

Out of the box, the Choicelab starter project is a static site that you can upload to a web service (like itch.io or Netlify), or host yourself. It does, however, use npm to supply a local server for building, testing, and previewing.

If you don't use npm packages for design or development, you can always manually add your JS, CSS, and other assets to index.html, and just use npm for local testing. But if you're familiar with npm and want to take advantage of the starter project's module bundling, you can modify the default configuration to suit your needs.

Adding scripts and modules

The starter project uses Webpack to bundle and minify files, working from the file webpack.js (located in /build.) The only file it compiles is index.js, exporting index.min.js to your project root.

  • To add an npm package to the front-end script, add the accompanying require statement to index.js.
  • To change the build process, compile assets, or transpile files like JSX or Sass, you'll want to modify webpack.js.
    • The starter project includes html-webpack-plugin out of the box, but you'll need to install additional plugins to compile different kinds of assets. See Webpack's documentation for details.

Changing where npm files live

By default, Choicelab stores all npm-related files — including package.json and the /node_modules folder — in /build. However, you may prefer to keep these in the project root, like many npm-based projects.

To move this to the top level of your project:

  1. Move package.json out of /build.
  2. Delete /node_modules and package-lock.json from /build.
  3. In package.json, find the config parameter, and update it to the new location. ("./" if it's the project root.)
  4. In the command line, navigate to the top level, then run npm install or npm test.

npm commands

npm test will install any dependencies, run a build, and start the testing server. You can use npm run build to run the build standalone.

At this time, there's no standalone command for the server, though you could create one by copying out the last command in npm test.