Brunch + Babel + Crank + Express + Tachyons

This is a skeleton for Brunch that includes Crank, Express, and Tachyons.

Installation

Clone this repo manually or use brunch new dir -s darrylcousins/brunch-with-express

Getting started

• Install (if you don't have them):
  • Node.js: brew install node on OS X
  • Brunch: npm install -g brunch
  • Brunch plugins and app dependencies: npm install
• Run:
  • npm start — watches the project with continuous rebuild. This will also launch HTTP server with pushState.
  • npm run build — builds minified project for production
• Learn:
  • public/ dir is fully auto-generated and served by HTTP server. Write your code in app/ dir.
  • Place static files you want to be copied from app/assets/ to public/.
  • Brunch site, Getting started guide

Crank

This brunch template is designed to get an application started with Crank including some simple examples.

Express

And because I like to use Express that is also included. Little extras there are error and notfound templates.

Tachyons

And because I like to use Tachyons that is also included.

Eslint

npx eslint app/*.js

Prettier

Helper for code formatting.

JSDoc

npm run docs

Autoreload

I've left autoreload out of this skeleton as I'm doing my developement remotely and using nginx and haven't yet researched how to configure things so I can avoid websocket errors. I'm therefore used to Ctrl-R.

Nginx

My basic configuration looks like this:

server {
	listen 443 ssl;

	server_name $subdomain.$domain.net;

	ssl_certificate /etc/letsencrypt/live/.../fullchain.pem;
	ssl_certificate_key /etc/letsencrypt/live/.../privkey.pem;

	location / {
		auth_basic "Restricted Development Server";
		auth_basic_user_file /etc/nginx/.htpasswd;

		proxy_pass http://127.0.0.1:$myport;
		proxy_http_version 1.1;
		proxy_set_header Upgrade $http_upgrade;
		proxy_set_header Connection 'upgrade';
		proxy_set_header Host $host;
		proxy_cache_bypass $http_upgrade;
	}
	location /public {
		root $path-to-project;
		index index.html;
	}
	location /docs {
		root $path-to-project;
		index index.html;
	}
}

The path location to public is not essential as the proxy will serve index.html without it, but dropping html files in app/assets are not served from root otherwise. The alternative is to set up one's own server if not aiming for a single page app.