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.jsYou can additionally install globally for direct usage of CLI commands in your terminal.
$ npm install -g --save helium.js/* Replace render with helium method
inside the index file of React application */
import helium from 'helium.js/react';
helium(
<BrowserRouter>
<App/>
</BrowserRouter>,
'root'
);/* Replace render with helium method
inside the index file of React application */
import helium, { getStore } from 'helium.js/react';
// import your reducer
helium(
<Provider store={ getStore(reducer) }>
<BrowserRouter>
<App/>
</BrowserRouter>
</Provider>,
'root'
);/* Replace render with helium method
inside the index file of React application.
Declare your middlewares as usual and pass
in as a second parameter to getStore invocation */
import helium, { getStore } from 'helium.js/react';
// import your reducer
// declare your middlewares
helium(
<Provider store={ 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 helium3. Install globally and run the command
$ he
/* Include this in your server file
(the file in which you initialize your
express application) */
// import your root component
import App from './src/components/App.js';
const helium = require('helium.js');
// initialize your express application here
helium.init({
// indicate the path to your main html file
html: 'index.html',
// specify the id to which your React application will be mounted on
id: 'root',
App,
});
// input api routes here
app.get('*', helium.serve);/* Include this in your server file
(the file in which you initialize your
express application) */
// import your root component and your reducer
import App from './src/components/App.js';
import reducer from './src/reducers';
const helium = require('helium.js');
// initialize your express application here
helium.init({
// indicate the path to your main html file
html: 'index.html',
// specify the id to which your React application will be mounted on
id: 'root',
App,
reducer,
});
// input API routes here
app.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 including helium:start, helium:build, helium:serve.
- Run
helium:buildto bundle your dynamically generated server file. - Run
helium:serveto serve your production ready file.
- Add an additional 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 up server-side render with helium using the following:
$ npm run start$ lift -csr3. 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 a pull request and update the README.md with details of changes.
We use SemVer for versioning. For the versions available, see the tags on this repository.
This project is licensed under the MIT License - see the LICENSE file for details