Preact Setup Timelapse

Notes from setting up a Preact-based SPA from ground up.

Initial Setup

# Initialize the project
npm init

# Install webpack stuff
npm install webpack@3.11.0 webpack-cli@2.0.9 webpack-dev-server@3.0.0 --save-dev

I had to install those specific versions. Webpack 4-beta didn’t work for me. webpack-dev-server@3.1.0 game me this delightful error

/Users/nikhil/Downloads/git-preact-wiki/node_modules/webpack-dev-server/bin/webpack-dev-server.js:405
    throw e;
    ^

TypeError: Cannot read property 'plugin' of undefined

The stylelint-loader didn’t work with Webpack 4 and webpack-dev-server. Frontend development is exciting.

My project looked like this with a base Webpack config.

I then created a source folder with a simple App.js.

Added two commands to package.json: one that builds the project and another that launches the live-reloading dev server.

Babel

npm i -D babel-loader @babel/core @babel/preset-env

I updated the Webpack config to use the loader and tested.

HTML Template

npm i -D html-webpack-plugin

Created a small template for the SPA called ./src/index.html and updated the Webpack config to use it.

At this point, running npm start successfully showed me my SPA.

Preact and a simple SPA

npm i -D preact

Updated src/App.js to import Preact and display a simple component.

JSX

npm i -D babel-plugin-transform-react-jsx

Updated the Webpack config to use the plugin and tried using JSX in src/App.js. So far so good.

Linting ES6

# Linting. Using the AirBnB guide. Make sure ESLint doesn't barf on JSX
npm i -D eslint \
         eslint-loader \
         eslint-plugin-import \
         eslint-config-airbnb-base \
         eslint-plugin-react \
         babel-eslint

Added a basic ESLint configuration to the root of the project and updated Webpack to use the loader. Now I have linting with the live-reload server :)

Clean Before Build

npm i -D clean-webpack-plugin

Updated Webpack to use the plugin. Easy-peasy.

Uglify JS Output

npm i -D uglifyjs-webpack-plugin

And updated Webpack.

Getting Sassy

Wanted to add Sass support and create a separate, compiled, minified file App.css in the output

npm i -D extract-text-webpack-plugin style-loader css-loader sass-loader node-sass

Added a simple Sass file and updated Webpack to use the plugins and spit out App.css.

Add Sass Linting

# Does not work with Webpack 4 beta and the dev server
npm i -D stylelint stylelint-webpack-plugin stylelint-config-standard

Added a basic StyleLint config and updated Webpack to use it.

Assets → Base64

# Does not work with Webpack 4 beta
npm i -D base64-inline-loader

Updated Webpack