React Starter

A basic template that consists of the essential elements that are required to start building a React (v16.4) application using Webpack (v4).

The template consists of:

• a typcial project layout structure
• babel setup and configuration
• webpack setup and configuration
• eslint setup and configuration
• SCSS setup and configuration
• the main React components to get started

Additionaly, the template provides a development and production webpack configuration.

The template also allows one to include specific plugins as part of build. Please see here for more detail

---

Developed With

• Node.js 8.11 - Javascript runtime
• React 16.4 - A javascript library for building user interfaces
• Babel 6.26 - A transpiler for javascript
• Webpack 4.x - A module bundler
• SCSS - A css metalanguage

---

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

The following software is required to be installed on your system:

• Node 8.x
• Npm 3.x

Type the following commands in the terminal to verify your node and npm versions

node -v
npm -v

Install

Follow the following steps to get development environment running.

• Clone 'react-starter' repository from GitHub

  git clone https://github.com/jackvanb/yt-web.git

• Install node modules

  cd yt-web
  npm install

Build

Build Application

dev	prod
npm run build:dev	npm run build:prod

Build Application And Watch For Changes

dev	prod
npm run build:dev:watch	npm run build:prod:watch

Build Application With BundleAnalayzer Plugin Included

dev	prod
npm run build:dev:bundleanalyze	npm run build:prod:bundleanalyze

After running the above command, a browser window will open displaying an interactive graph resembling the following image:

Run ESlint

Lint Project Using ESLint

npm run lint

Lint Project Using ESLint, and autofix

npm run lint:fix

Run

Run Start

This will run the 'serve:dev' npm task

npm start

Run Dev Server

npm run serve:dev

Run Dev Server With Dashboard

npm run serve:dev:dashboard

The above command will display a dashboard view in your console resembling the following image:

Run Prod Server

This command will build application using production settings and start the application using live-server

npm run serve:prod