Scaffold a Universal JavaScript App using React and hapi
Scaffold a Universal JavaScript app using React, hapijs, and react-router
$ npm install -g generator-react-hapi-universal
With yo:
$ yo react-hapi-universal
This project utilizes hapijs and react-router to serve a universal javascript application. The app consists of the following very simple routes which render both on the server and client. You might also have heard this technique referred to as "Isomorphic JavaScript".
"/" UsersIndex
Shows a list of two "users" loaded from a hardcoded set of data from ./lib/app/users.js
.
"/:id" UserProfile
Shows the profile of the user with the given id
param.
To run the app:
npm start
Hot module loading allows you to live edit your app and see the changes reflected in the browser in near real time. You should use this mode while you're developing your app to maximize your speed of iteration.
To run the webpack dev server:
npm run dev
After you've made your changes, you can run a production build to update your bundle.js
client side app.
gulp build
Builds a production distribute at lib/public/js/dist/bundle.js
.
Defaults to using the "airbnb" ESLint and JSCS presets for ES6 and React linting, but you can set it to whatever you would like. For more information about the airbnb javascript lint settings see airbnb javascript.
gulp lint
to lint your code once.
gulp lint-dev
to set up a file watcher to lint on every file save.
gulp jscs
to run the jscs code style checks.
Use chalk if you want colors in your CLI.