- Notifications
You must be signed in to change notification settings - Fork3
Automating Universal React Applications
License
SJCProduction/Helium.js
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Helium.js is a node package that helps make your React application isomorphic and optimized.
Leveraging server-side rendering can significantly improve first page load performance: render JavaScript templates on the server to deliver fast first render, and then use client-side templating once the page is loaded. However, performance benefits depend on the use case and server-side rendering is not a one size fits all design.
- Currently:
- Includes server side rendering with support for React Router v4 and Redux v3 using React Fiber - v16
- Perfomance metrics CLI
- Coming Soon: Optimization for webpack bundles
You will need to have react 16/react-dom, the babel-cli, and two babel presets: env and react installed as dependencies.
$ npm install --save react react-dom babel-cli babel-preset-env babel-preset-react
$ npm install --save helium.js
You canadditionally install globally for direct usage of CLI commands in your terminal.
$ npm install -g --save helium.js
/* Replace render with helium methodinside the index file of React application */importheliumfrom'helium.js/react';helium(<BrowserRouter><App/></BrowserRouter>,'root');
/* Replace render with helium methodinside the index file of React application */importhelium,{getStore}from'helium.js/react';// import your reducerhelium(<Providerstore={getStore(reducer)}><BrowserRouter><App/></BrowserRouter></Provider>,'root');
/* Replace render with helium methodinside the index file of React application.Declare your middlewares as usual and passin as a second parameter to getStore invocation */importhelium,{getStore}from'helium.js/react';// import your reducer// declare your middlewareshelium(<Providerstore={getStore(reducer,middleware)}><BrowserRouter><App/></BrowserRouter></Provider>,'root');
Have your server file automatically generated by answering questions using our CLI.
To start up the CLI, do one of the following:
$ ./node_modules/.bin/he
"scripts": {"helium":"he",},
$ npm run helium
3.Install globally and run the command
$ he
/* Include this in your server file(the file in which you initialize yourexpress application) */// import your root componentimportAppfrom'./src/components/App.js';consthelium=require('helium.js');// initialize your express application herehelium.init({// indicate the path to your main html filehtml:'index.html',// specify the id to which your React application will be mounted onid:'root', App,});// input api routes hereapp.get('*',helium.serve);
/* Include this in your server file(the file in which you initialize yourexpress application) */// import your root component and your reducerimportAppfrom'./src/components/App.js';importreducerfrom'./src/reducers';consthelium=require('helium.js');// initialize your express application herehelium.init({// indicate the path to your main html filehtml:'index.html',// specify the id to which your React application will be mounted onid:'root', App, reducer,});// input API routes hereapp.get('*',helium.serveRedux);
If CLI was not used, add a script to your package.json to run your serverfile using babel-node.
"scripts": {"helium:start":"nodemon [server file name].js --exec babel-node --presets es2015",},
The CLI would have automatically added threee scripts includinghelium:start,helium:build,helium:serve.
- Run
helium:buildto bundle your dynamically generated server file. - Run
helium:serveto serve your production ready file.
- Add anadditional configuration to your webpack file to target the server file
{entry:path.join(__dirname,'[server file name].js'),target:'node',output:{path:path.resolve(__dirname),filename:'[bundled server file name].js',libraryTarget:'commonjs2',},module:{rules:[{test:/\.jsx?$/,loader:'babel-loader',exclude:/node_modules/,query:{presets:['env','react'],}},},},}
- Add the following scripts to your package.json.
"helium:build":"webpack --config ./prod/helium.webpack.conf.js","helium:serve":"node ./prod/[server file name].prod.js"
- Follow the two steps above.
You can also perform simple Critical Rendering Path testing after setting upserver-side render with helium using the following:
$ npm run start
$ lift -csr
3. After evaluating your application, you will receive results for the client-side rendering instance in your terminal
$"csr": {"webapi": {"DOMLoading": 34,"DOMContentLoaded": 75,"DOMComplete": 125 } }
$ npm run helium:start
$ lift -ssr
$"ssr": {"webapi": {"DOMLoading": 10,"DOMContentLoaded": 56,"DOMComplete": 112 } }
$ lift -diff
# To run your application, type the following into your terminal$"diff": {"webapi": {"DOMLoading": 70.5882%,"DOMContentLoaded": 25.3333%,"DOMComplete": 6.25% } }
If you would like to contribute, submit apull request and update the README.md with details of changes.
We useSemVer for versioning. For the versions available, see thetags on this repository.
This project is licensed under the MIT License - see theLICENSE file for details
About
Automating Universal React Applications