The JavaScript ES2015 Starter Kit

by Maxime Rouyrre

Attention: this article is probably not researched enough for now. There'll probably never be a JavaScript boilerplate, there's simply too many of them! In the meantime you can read my other articles but if you'd like to see how to build your own little starter kit, read ahead!

Starting a new project can be tiresome because the toolchain setup can be quite time consuming. The web is full of outdated webpack tutorials, just give me something that works ! Instead of starting from scratch each time, I started to reuse the common parts of my projects. The following is the result of this process.

I present you the ES2015 (EcmaScript2015/ES6) starter kit:

blaze33/es2015-starter

The learning curve shouldn't be too steep and it is best suited to quickstart small projects. I had simplicity in mind while developing it.

Requirements

  • git, a distributed version control system.
  • node.js, includes npm.
  • Optionally yarn.

Starting a new JavaScript project

It's very easy, simply clone and edit the project:

# clone the repository
git clone git@github.com:blaze33/es6-starter.git my-app
cd my-app
# install the npm packages of the dependencies
# if you don't have yarn installed just npm install
yarn
# start webpack-dev-server
npm run serve

Now you should have your browser open a new tab that will autoreload once you start editing the files in the src folder.

Happy coding !

Features

ES2015 starter uses:

  • webpack to bundle the JavaScript app.
  • node-sass and sass-loader to compile the SCSS files to CSS.
  • webpack-dev-server, a development server that provides live reloading.
  • Babel with preset env to compile ES2015 JavaScript down to a supported version.
  • Linting check with standard.js.
  • normalize.css, makes browsers render all elements more consistently and in line with modern standards.
  • purify-cssremoves unused css.
  • surface, a Material Design CSS only framework.

Conclusion

Ideally I would like for this starter project to be a live one that would be updated and improved over time.

Contributions, pull requests, questions and comments are welcome:
blaze33/es2015-starter

Thanks for reading !

Appendix

If you're curious how I made the above gif, I used recordmydesktop on Ubuntu 17.04. Install it with:

sudo apt install recordmydesktop

Then I edited and converted the resulting video with ffmpeg:

# install ffmpeg
sudo apt install ffmpeg
# cut the first 2 and last 2 seconds of the video
ffmpeg -ss 2 -i es2015-starter-demo.mp4 -t 88 -c copy es2015-starter-demo-cut.mp4
# generate a custom png palette to use in the final gif 
ffmpeg -y -i es2015-starter-demo-cut.mp4 -vf fps=10,scale=800:-1:flags=lanczos,palettegen palette.png
# generate the final gif
ffmpeg -i es2015-starter-demo-cut.mp4 -i palette.png -filter_complex 'fps=1,scale=800:-1:flags=lanczos,setpts=0.25*PTS[x];[x][1:v]paletteuse' es2015-starter-demo.gif

That's it !