react-webapp-generator

You are asked to build a single page web application using reactjs. Before starting to create very first component, you may have to struggle for configuring your webpack, installing webpack loader and dev server. Sometime you also need some touch events when swiping to other tabs, of course the client side routing need to be implemented for changing tabs. All these configurations set up successfully(,you thought) and click F5 to begin your real work, and yep... You got a 404 error. Time is expensive...

The purpose of React Webapp Generator is to do all these configuration and we can start developing the content part of web application within one minute, with a few commands and one configuration file. React Webapp Generatot will generate all the files for you to kick start

React Webapp Generator assumes you using below modules for developing web application

• react as framework
• webpack as build tool
• react-router-dom for client side routing
• react-hammerjs for touch gesture event

Installation

npm install -g react-webapp-generator

Usage (TL;DR)

Run below commands in same directory

1. Download sample config file
   curl https://raw.githubusercontent.com/jack-siu/react-webapp-generator/develop/rwg_config.json --output rwg_config.json
2. Download sample icon file
   curl https://raw.githubusercontent.com/jack-siu/react-webapp-generator/develop/sun.png --output sun.png
3. Generate files for react web application
   generate-react-webapp-scaffolding
4. Install node packages
   npm install
5. Start server npm run start
6. Browse to localhost:9000 to see result
   

Usage

1. In your working directory, add a rwg_config.json file, which let the genrator knows the basic setup of your site. The config format is as follow:
   {
   "name": "app name, which will be put in package.json and manifest.json",
   "version": "App version, which will be put in package.json",
   "description": App description, which will be put in package.json",
   "icon":"Icon path",
   "author": "App author, which will be put in package.json",
   "license": "App license, which will be put in package.json",
   "themeColor": "App theme color, which will be put to manifest.json and used as background color of navigation bar",
   "textColor": "Text color of navifation bar",
   "tabs": [{"tabName":"TabName","path":"tab path","materialIcon":"material icon font"}{"tabName":"TabName","path":"tab path","materialIcon":"material icon font"}, ...]
   }
   Note that the tab icon is used Material Icon from google
   Sample rwg_config.json:
   {
   "name": "SampleApp",
   "version": "1.0.0",
   "description": "A sample react webapp generated from react-webapp-generator",
   "icon":"./sun.png",
   "author": "Mr Author",
   "license": "ISC",
   "themeColor": "#ABC",
   "textColor": "#123",
   "tabs": [{"tabName":"First","path":"first","materialIcon":"E866"},{"tabName":"Second","path":"second","materialIcon":"E877"},{"tabName":"Third","path":"third","materialIcon":"E8CD"}]
   }
2. If you set icon path in step 1, please make sure you put the icon in that path
3. Run below command to generate the files(components, style, html, package.json and webpack.config.js)
   generate-react-webapp-scaffolding
4. Step 3 will create a package.json which has dependency needed for this template, run below command to install those packages
   npm install
5. Once installed the packages, run below command to start webpack server.
   npm run start
   Browse to localhost:9000 to see the result React Webapp Generator put some dummy components, i.e. , for demonstration purpose. Replace those ExampleBlock to your compoennts
6. webpack-dev-server servers from memory. To build a bundle in disk, run below command and a bundle.js will be created in /dist.
   npm run build After a bundle being created in dist folder, you may also run a server program in /dist folder so that other devices can view the web app, for example, using python simple sever
   python3 -m http.server