Single Page Application (SPA) Starter Kit (NodeJS, React, webpack, babel/ES2015, Redux, Hot Loader)
Quick starter kit for booting up a NodeJS container with React, webpack, babel/ES2015, Redux, and more.
Features
- Docker Node
- webpack
- ReactJS
- Babel (ES2015)
- Sass
- PostCSS
- Autoprefixer
- ES Lint
- Redux
- Redux DevTools
- React Hot Loader
- Hot Reload Server
- dotenv
Quickstart Guide
Clone the repository.
git clone git@github.com:vutran/spa-starter-kit.git
Switch to project directory.
cd spa-starter-kit
Boot up with Docker.
docker-compose up
Open the URL in your browser.
Note: You need to add dockerhost
to your /etc/hosts
file and point that to your Docker machine's address.
Environmental Variables
You can manage your environmental variables via the .env
file.
NODE_ENV=development
DOCKER_HOST=192.168.99.100
React Components
React components should be created and placed inside of the /app/components/
directory. Below is a sample React component in ES6.
For more information, please read the React docs, or ES6.
{ return <p>Hello world!</p> }
Importing a React Component
To render a React component, you will need to import the component before calling React.render()
// Render the componentReactDOM
Redux Implementation
For more information, please refer to the demo application boilerplate.
Actions and Action Creators
You can place all your Action Types and Action Creators in the app/actions/index.js
file.
Reducers
Reducer functions should be stored in the app/reducers/
directory. Once your reducer is created, you can combine them with the root reducer that is found in the app/reducers/index.js
file.