Preact template

Create preact apps

Inspired by preact-cli and create-react-app. Preact is a lightweight (3kb) alternative to React.

Overview

preact-template contains everything you need to get started. No configuration is required and your environment will have everything you need:

• React, JSX, ES6 syntax support
• Express backend (optional)
• Dev server with hot reloading
• Less compiler
• standard.js linting
• Build script to bundle CSS and JS (with sourcemaps)

The aim isn't a complete feature set. preact-template allows you to get started quickly and add in whatever you need.

Getting started

Install

git clone https://github.com/dreischer/Preact-Template.git
cd Preact-Template
make bootstrap

Development

Starting the develoment server

make dev

Visit localhost:4000

Production

Bundling all the scripts and starting express server

make start

Visit localhost:4000

Build

Bundling all the scripts

make build

Folder structure

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── app
│   └── components
│   |   └── Header
│   |   |    └── Header.js
│   |   |    └── Header.less
│   |   |    └── index.js
│   └── styles
│   |   └── index.less
│   └── views
│   |   └── Feed
│   |   |    └── Feed.js
│   |   |    └── Feed.less
│   |   |    └── index.js
│   |   └── Home
│   |   |    └── Home.js
│   |   |    └── Home.less
│   |   |    └── index.js
│   |   └── NotFound
│   |        └── NotFound.js
│   |        └── NotFound.less
│   |        └── index.js
│   └── app.js
│   └── index.js
├── config
│   └── default.yml
├── public
│   └── index.html
└── server
    └── index.js

What's inside

• webpack with webpack-dev-middleware, webpack-hot-middleware and style-loader
• Buble (ES6, JSX, object spread)
• standard.js
• es6-promise
• and others

What's not included

• Any deployment scripts/configs
• Any unit testing setup