Sample Web App : Fabulous Faucet
Steps:
-
modify the codes in /src
-
npm install
-
npm run build
-
npm start
-
open chrome to localhost:8080
Tools:
-
ESlint : A javascript linter
-
npm : A node module manager
-
prettier A code formatter
-
travis ci A unit/integration test schedulor
-
webpack A javascript bundler(make multiple js files together)
-
expressjs A totally awesome webapp framework
-
babeljs A javascript compiler
-
[react bootstrap]
-
[react native]
Steps
npm install --save-dev @babel/core@^7.0.0-0
Design the logic
Write the codes
- Use express / react to create a simple web App. Create a server.js in the root folder. Add run script to package.json. Use npm start as the main start script.
import express from 'express';
import path from 'path';
const port = process.env.PORT || 8080;
const app = express();
app.use(express.static(path.join(__dirname, 'dist')));
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'dist/index.html'));
});
console.log(`Listening on port ${port}`);
app.listen(port);
Bundle the js
- Define webpack.config.js
- Run webpack to create bundle.js
- embed the bundle.js into page.html
Configure run command
- Install babeljs to run the js codes
npm install --save-dev @babel/core @babel/node @babel/preset-react
- Install webpack to bundle the js sourc
npm install --save-dev webpack webpack-cli
- Istall babel loader for webpack bundle
npm install --save-dev babel-loader
- Install eslint
npm install eslint-loader eslint --save-dev
- Install flowJs for babel
npm install --save-dev babel-cli babel-preset-flow