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.

http://dockerhost:4000

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.

import { Component } from 'react'

export default class MyComponent extends Component {
    render() {
        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()

import ReactDOM from 'react-dom'
import MyComponent from './component/MyComponent'

// Render the component
ReactDOM.render(
  <MyComponent />,
  document.getElementbyId('app')
)

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.