Don't Copy Paste This Frontend Template

By git cloning this project template, you get quickly started in frontend development. I use this project template in almost all of my static site projects, which need the basic set of frontend tools.

Before git clone, please go through the short explanation of how and why it works and see package.json devDependencies explained to get a quick introduction to all tools. See also frequently asked questions. After you understand the whole stack and tools, go ahead and just copy paste this setup.

Features

Get started

You need to have Node.js environment installed before anything. Clone this repository, run npm install and you're ready to run the following commands.

There are other commands too, but they are only used internally by these two main commands. These other commands are explained in package.json scripts reference.

How and why it works

Everything happens via npm scripts. The project "configuration" is in package.json, which in practice means command line tools and their options. These tools all solve a specific problem, and they do it well. You can find all exact shell commands from package.json "scripts" section.

If you spot a new tool, check what it is and why it is used from package.json devDependencies explained section.

Project structure

All your frontend code will be in three files: index.html, bundle.js, and bundle.css – simple.

package.json devDependencies explained

package.json scripts reference

Each npm script is a fairly simple one-line command. This chapter contains very detailed explanation of these commands and written with beginners in mind. It is much more important to know and understand the tools instead of memorizing what each of these commands do.

JavaScript local development watch (npm run watch-js)

Full command:

API_URL=http://localhost:9001 watchify ./scripts/index.js -t [ babelify --presets [ es2015 ] ] -t envify --debug --verbose -o ./bundle.js

JavaScript production build (npm run build-js)

Full command:

NODE_ENV=production browserify ./scripts/index.js -t [ babelify --presets [ es2015 ] ] -t envify -o ./bundle.js && npm run minify-js

Note: you need to define API_URL environment variable before running this command. You can set it in e.g. in your deployment script.

CSS local development watch (npm run watch-styles)

Full command:

npm run build-styles-dev && chokidar '**/*.less' './styles/**/*.css' -c 'npm run build-styles-dev'

CSS local development build (npm run build-styles-dev)

Full command:

npm run build-less && npm run postcss && echo 'Styles built!'

CSS production build (npm run build-styles)

Full command:

npm run build-less && npm run postcss && npm run minify-css

Downsides

As much as I like npm scripts and browserify, here are some downsides in the setup.