A single page application created with Preact and preact-router. This boilerplate aims to help demonstrate some differences and similarities between the preact-router
and react-router
routing libraries. It is also a very generic starting point for a single page application.
- Easy development and easy production deployment.
- Simple generic starting point for a single page application with tooling all set up.
- Comments / annotations to help explain design decisions.
Clone from Github and install with npm
.
git clone https://github.com/pl12133/preact-router-boilerplate.git
cd preact-router-boilerplate
npm install
Start up a webpack-dev-server
which will watch for changes in the src/
folder. You can configure the HOST
and PORT
for the development server using environment variables. Defaults to localhost:8080
:
export PORT=8080
export HOST=localhost
npm start
If you plan on using preact-router-boilerplate
as a starting point for a new project, you will want to clear npm
and git
information and replace it with your own.
npm init
git init
If you intend to build for production, use npm run deploy
. It will use a Webpack config with production optimizations like UglifyJS, and create your entire bundle in the build/
folder.
There is an Express server built to serve single page applications over HTTPS. If you do not already use HTTPS in production, you should start now. Valid signed certificates are now available FOR FREE from LetsEncrypt.org. You must set up LetsEncrypt
to use HTTPS, the assumed path is /etc/letsencrypt/${DOMAIN}/
.
To configure the production server, set PORT
, HTTPS_PORT
and DOMAIN
environment variables.
export PORT=80
export HTTPS_PORT=443
export DOMAIN=example.com
npm run start:prod
If you are new to Preact, visit the official site to get started. Knowledge of React will directly transfer over to Preact with a few API differences listed here.
If you are unfamiliar with Single Page Applications, start by learning the History API. Understanding the History API will help you to understand the benefits and limitations of client side routing.
If you are entirely new to NPM, React, Webpack, and Babel; you should start with a simpler guide.
Currently there is no testing integration for this project.
This project is focused on education about Preact, preact-router, and single page applications. Questions, comments, and contributions welcome.