https://github.com/sjcproduction/helium.js
Automating Universal React Applications
https://github.com/sjcproduction/helium.js
helium isomorphic javascript optimization react react-fiber react-router-v4 react16 redux universal universal-javascript universal-react
Last synced: 1 day ago
JSON representation
Automating Universal React Applications
- Host: GitHub
- URL: https://github.com/sjcproduction/helium.js
- Owner: SJCProduction
- License: mit
- Created: 2017-11-14T21:55:58.000Z (over 7 years ago)
- Default Branch: dev
- Last Pushed: 2017-12-14T19:03:14.000Z (over 7 years ago)
- Last Synced: 2025-06-20T05:03:42.331Z (5 days ago)
- Topics: helium, isomorphic, javascript, optimization, react, react-fiber, react-router-v4, react16, redux, universal, universal-javascript, universal-react
- Language: JavaScript
- Homepage:
- Size: 3.68 MB
- Stars: 63
- Watchers: 2
- Forks: 3
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
### *
Making your React application lighter! 🎈
*
[](https://www.npmjs.org/package/helium.js)
[](https://david-dm.org/SJCProduction/Helium.js)
[](https://nodesecurity.io/orgs/heliumjs/projects/36e966e1-6caf-4dd7-b424-bf5eb7c32085)
[](https://www.codacy.com/app/Helium/Helium.js?utm_source=github.com&utm_medium=referral&utm_content=SJCProduction/Helium.js&utm_campaign=Badge_Grade)
[](https://github.com/SJCProduction/Helium.js)
[](https://github.com/SJCProduction/Helium.js/blob/master/LISENCE)
[](https://github.com/SJCProduction/Helium.js/issues)
## What is Helium.js?
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
## Table of Contents
- [Authors](#authors)
- [Installation](#installation)
- [Prerequisites](#pre-req)
- [Locally](#local-installation)
- [Globally](#global-installation)
- [Usage](#usage)
- [Client Side](#usage-on-client-side)
- [with Redux](#usage-on-cl-with-redux)
- [Server Side](#usage-on-server-side)
- [CLI](#cli)
- [DIY](#diy)
- [with Redux](#usage-on-s-with-redux)
- [Running Your Application](#running)
- [Getting Production Ready](#production)
- [Performance Testing](#testing)
- [More](#contributing)
You will need to have react 16/react-dom, the babel-cli, and two babel presets: env and react installed as dependencies.
```sh
$ npm install --save react react-dom babel-cli babel-preset-env babel-preset-react
```
### Local Installation
```sh
$ npm install --save helium.js
```
### Global Installation
You can **_additionally_** install globally for direct usage of CLI commands in your terminal.
```sh
$ npm install -g --save helium.js
```
## Usage
```javascript
/* Replace render with helium method
inside the index file of React application */
import helium from 'helium.js/react';
helium(
,
'root'
);
```
```javascript
/* Replace render with helium method
inside the index file of React application */
import helium, { getStore } from 'helium.js/react';
// import your reducer
helium(
,
'root'
);
```
### (with Redux and Middlewares)
```javascript
/* 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(
,
'root'
);
```
#### Option 1: Automation with CLI
*Have your server file automatically generated by answering questions using our CLI.*
**To start up the CLI, do one of the following:**
###### 1. Type this command directly into your terminal
```sh
$ ./node_modules/.bin/he
```
###### 2. Add a script to your package.json and run the script
```json
"scripts": {
"helium": "he",
},
```
```sh
$ npm run helium
```
###### 3. [Install globally](#global-installation) and run the command
```sh
$ he
```
---
#### Option 2: Do it Yourself
```javascript
/* 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);
```
### (with Redux)
```javascript
/* 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.
```json
"scripts": {
"helium:start": "nodemon [server file name].js --exec babel-node --presets es2015",
},
```
### With the CLI:
The CLI would have automatically added threee scripts including ```helium:start```, ```helium:build```, ```helium:serve```.
1. Run ```helium:build``` to bundle your dynamically generated server file.
2. Run ```helium:serve``` to serve your production ready file.
### Without the CLI:
1. Add an [additional configuration to your webpack file](https://webpack.js.org/configuration/configuration-types/#exporting-multiple-configurations) to target the server file
```javascript
{
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'],
}
},
},
},
}
```
2. Add the following scripts to your package.json.
```json
"helium:build": "webpack --config ./prod/helium.webpack.conf.js",
"helium:serve": "node ./prod/[server file name].prod.js"
```
3. Follow the two steps above.
## Performance Testing
You can also perform simple Critical Rendering Path testing after setting up
server-side render with helium using the following:
###### 1. Start your client-side application as usual
```sh
$ npm run start
```
###### 2. Run ```lift -csr``` in a seperate terminal window and walk through the CLI interface
```sh
$ lift -csr
```
###### 3. After evaluating your application, you will receive results for the client-side rendering instance in your terminal
```sh
$ "csr": {
"webapi": {
"DOMLoading": 34,
"DOMContentLoaded": 75,
"DOMComplete": 125
}
}
```
###### 4. Repeat steps 1-3 running your server-side application instead
```sh
$ npm run helium:start
```
```sh
$ lift -ssr
```
```sh
$ "ssr": {
"webapi": {
"DOMLoading": 10,
"DOMContentLoaded": 56,
"DOMComplete": 112
}
}
```
###### 5. After receiving results for both instances, run ```lift -diff```.
```sh
$ lift -diff
```
```sh
# 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](https://github.com/SJCProduction/Helium.js/issues) and update the README.md with details of changes.
We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/SJCProduction/Helium.js/tags).
* [**Shachy Rivas**](https://github.com/shachyjr)
* [**Chris Li**](https://github.com/cli53)
* [**Julie Moon**](https://github.com/juliemoon)
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details