A modern and modular JavaScript boilerplate setup
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.
__mocks__
dist
lib
src
.babelrc
.gitignore
LICENSE
README.md
jsconfig.json
package.json
template.html
webpack.config.babel.js
yarn.lock

README.md

Modern, modular JavaScript

This is the JavaScript boilerplate stack I set up late 2016. It was heavily inspired by js-stack-from-scratch, but was simplified in some areas and adapted to my wishes.

Code examples inspired by a great composition>inheritance tutorial.

It comes with a fast running, simple to grasp, jest test setup.

All dev-tools are exposed as npm scripts.

To get started, clone this repo and run npm install (or yarn install if you prefer).

Hope somebody may find it useful. Ideas and contributions very welcome!

File structure

The bulk of your development is supposed to happen in the src folder. There you'll find client, server and shared subfolders you can fill accordingly

The dist folder should contain your static assets (here only index.html) and the generated client JavaScript bundle.

node_modules, well, contains your modules.

The following folders will be generated by the included scripts and should not be modified manually.

lib contains compiled JavaScript, whoch can be used by an node.js server.

coverage and .nyc_output contains files releated to test coverage.

Included scripts

You can run all scripts either with npm or yarn. For the sake of briefness, npm is used in the following. For yarn just replace npm with yarn

  • npm start : Starts node server serving the build client bundle
  • npm test : Run the test suite
  • npm run lint : run eslint, we use airbnb style
  • npm build : Build the client bundle
  • npm run compile : Compile server side (node.js) JavaScript
  • npm run dev: Start the development, live-reloading, server
  • npm run coverage: Calculate test coverage.

For some task there is a watch task, which can run the corresponding task after file cahnges.

  • npm run test:watch: Run tests repeatedly
  • npm run lint:watch: Run eslint repeatedly
  • npm run coverage:watch: Run coverage task repeatedly
  • npm run fulltest: Run eslint and test repeatedly

Ideas

This boilerplate doesn't set up any UI. You could add whatever you want, like React or maybe even use custom elements v1.

Also backend implementation is kind of simplistic, this setup is more focused on frontend JavaScript for now.

License

Licensed under the Unlicense (this is a permissive open-source license and doesn't mean this project is not licensed!)