react-spa-template

react-spa-template is a React single-page application boilerplate that sets up Webpack, Babel, ESLint, Sass, PostCSS, and emotion without relying on Create React App.

What is react-spa-template?

react-spa-template is a ready-to-use React SPA starter kit that configures a development server, production build, and GitHub Pages deployment out of the box. It takes plain React source files as input and produces a compiled bundle in the dist/ directory for production use. The template is open source and hosted on GitHub by ofnullable, and a live demo is available at https://ofnullable.github.io/react-spa-template.

Key Features

• No Create React App — This template configures React SPA tooling directly with Webpack, Babel, ESLint, Sass, PostCSS, and emotion, giving full control over the build setup.
• Webpack bundling — Running npm run build compiles the app into a production-ready dist/ directory.
• Babel transpilation — Babel is preconfigured to transpile modern JavaScript and JSX syntax.
• ESLint integration — ESLint comes set up to catch code quality issues.
• Sass and PostCSS support — Styling supports Sass preprocessing and PostCSS processing.
• Emotion CSS-in-JS — Emotion is included for styling React components directly in JavaScript.
• Dev server — npm start launches a development server at http://localhost:8080.
• GitHub Pages deploy — npm run deploy publishes the built site to GitHub Pages after editing the homepage field in package.json.

Who is it for?

• React developers who want a minimal SPA starter without the overhead of Create React App.
• Developers who need a preconfigured build pipeline with Webpack, Babel, ESLint, Sass, PostCSS, and emotion ready to use.
• Open source contributors who want to customise and extend the template; the repository invites contributions and issues.

What can you do with react-spa-template?

• Build a single-page application from scratch: clone the repository, run npm install, and start coding with the dev server on localhost:8080.
• Deploy to GitHub Pages quickly: edit the homepage field in package.json to your GitHub Pages URL and run npm run deploy.
• Customise the toolchain: add or remove tools from the Webpack, Babel, ESLint, Sass, PostCSS, and emotion setup to match your workflow.

How does react-spa-template work?

Clone the repository and install dependencies with npm install. Use npm start for a dev server at http://localhost:8080, npm run build to create a production bundle in dist/, or npm run deploy to publish to GitHub Pages after setting the homepage field in package.json.

FAQ

Is react-spa-template free to use?

Yes, it is an open source public repository on GitHub, so you can clone, use, and modify it under the terms of its license.

Do I need Create React App to use this template?

No, this template is specifically built without Create React App. It uses Webpack, Babel, ESLint, Sass, PostCSS, and emotion directly.

How do I start the development server?

Run npm install once, then run npm start. The server will be available at http://localhost:8080.

How do I create a production build?

Run npm run build. The compiled files will be saved in the dist/ directory.

How do I deploy to GitHub Pages?

Edit the homepage field in package.json to something like https://{username}.github.io/{repo} and then run npm run deploy.

Alternatives

Create React App is the official React boilerplate, but it abstracts away the build configuration that this template exposes.