react-webapp-generator v1.0.0
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 filecurl https://raw.githubusercontent.com/jack-siu/react-webapp-generator/develop/rwg_config.json --output rwg_config.json
2. Download sample icon filecurl https://raw.githubusercontent.com/jack-siu/react-webapp-generator/develop/sun.png --output sun.png
3. Generate files for react web applicationgenerate-react-webapp-scaffolding
4. Install node packagesnpm install
5. Start server
npm run start
6. Browse to localhost:9000 to see result
Usage
- 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"}
} - If you set icon path in step 1, please make sure you put the icon in that path
- Run below command to generate the files(components, style, html, package.json and webpack.config.js)
generate-react-webapp-scaffolding
- Step 3 will create a package.json which has dependency needed for this template, run below command to install those packages
npm install
- 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 - 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 severpython3 -m http.server
6 years ago