Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mjackson/web-starter

Build and deploy a React website quickly on Heroku
https://github.com/mjackson/web-starter

Last synced: about 2 months ago
JSON representation

Build and deploy a React website quickly on Heroku

Awesome Lists containing this project

README

        

[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy)

This repo is a boilerplate that helps me build websites quickly using [React](https://facebook.github.io/react/), [webpack](https://webpack.github.io/), and [node](https://nodejs.org/), and deploy them on [Heroku](https://heroku.com). Among other things, it includes:

- An asset pipeline for development and production
- Auto-refreshing of assets in development
- Long-term asset caching in production that's easy to deploy to a CDN
- A production-ready deploy strategy
- A web server (express) for custom server logic
- Session management (using cookies)
- React for rendering all views

It does **not** include:

- A mechanism for fetching data
- A global state management framework
- Server-side rendering of React components
- A client-side router

This repo is mainly for me. This is how I build my websites. But I'm publishing it for the sake of others who may find it interesting.

My main goal is to have something I can use to quickly spin up a new website on the stack I like to use. If I succeed, you can bet this repo will stay up to date and will occasionally even get new features. If you decide to use it and you think something's missing, please send a PR. If it's a lot of work, you might want to contact me first [on Twitter](https://twitter.com/mjackson) to see if it's something I'd like to include.

## Examples

This framework currently serves hundreds of thousands of HTTP requests per day on the following sites using Heroku [standard and hobby dynos](https://devcenter.heroku.com/articles/dyno-types):

- [unpkg](https://unpkg.com) ([source](https://github.com/mjackson/unpkg))
- [React30](https://react30.com) ([source](https://github.com/ReactTraining/React30))

## Getting Started

First, install:

- [git](https://git-scm.com/)
- [node](https://nodejs.org/) and [npm](https://www.npmjs.com/)
- [heroku toolbelt](https://toolbelt.heroku.com/)

Run the following command to create a new project:

$ node -e "$(curl -fsSL https://git.io/web-starter)"

Enter your project name at the prompt (e.g. `new-project`), then install dependencies and start the server:

$ cd new-project
$ npm install
$ npm start

Open a browser to [http://localhost:5000](http://localhost:5000).

## Deploying

When you're ready to deploy, initialize your git repository:

$ git init
$ git add .
$ git commit -m "Initial commit"

Then, create a new Heroku app and push:

$ heroku create my-app-name
$ git push heroku

Assets are automatically compiled for you on every deploy.

## Session Configuration

Use the `SESSION_DOMAIN` and `SESSION_SECRET` environment variables to configure the domain and secret that will be used to sign the session cookie. In development, you can store these variables in a `.env` file in the root directory. In production, set them with:

$ heroku config:set SESSION_DOMAIN=.example.com
$ heroku config:set SESSION_SECRET=`node -p 'require("crypto").randomBytes(64).toString("hex")'`

## Long-term Caching

By default assets are compiled when you deploy to Heroku and served out of the `public/assets` directory with a lifetime of one year (i.e. `Cache-Control: public, max-age=31536000` HTTP header). To alter the `max-age` value, set the `MAX_AGE` environment variable:

$ heroku config:set MAX_AGE=1d

## Serving Assets from a CDN

If you prefer to serve your assets directly from a CDN instead of from your application server, first put the full URL to your CDN in the `output.publicPath` variable in `webpack.config.js` and manually run the build with:

$ npm run build

Then upload the `public/assets` directory to your CDN and deploy.

## Credits

web-starter wouldn't exist without the incredible work of everyone involved in these projects:

- [webpack](https://webpack.github.io/)
- [Heroku](https://heroku.com/)
- [express](http://expressjs.com/)
- [Babel](http://babeljs.io/)
- [React](https://facebook.github.io/react/)