1.0.3 • Published 6 years ago
helium.js v1.0.3
Helium.js
Making your React application lighter! 🎈
Helium.js is a node package that helps make your React application isomorphic and optimized.
- Currently: Includes server side rendering with support for React Router v4 and Redux v3
- Coming Soon: Optimization for webpack bundles
Prerequisites
You will need to have react/react-dom and the babel-cli installed as dependencies.
$ npm install react react-dom babel-cli --save
Installation
$ npm install helium.js --save
Usage
Hydrating on Client Side
/* Replace render with helium method
inside the index file of React application */
import helium from 'helium.js/react';
helium(
<BrowserRouter>
<App/>
</BrowserRouter>,
'root'
);
(with Redux)
/* Replace render with helium method
inside the index file of React application */
import helium, { getStore } from 'helium.js/react';
helium(
<Provider store={getStore(reducer)}>
<BrowserRouter>
<App/>
</BrowserRouter>
</Provider>,
'root'
);
(with Redux and Middlewares)
/* 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';
// declare your middlewares
helium(
<Provider store={getStore(reducer, middleware)}>
<BrowserRouter>
<App/>
</BrowserRouter>
</Provider>,
'root'
);
Rendering on Server Side
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:
* Type this command directly into your terminal
$ ./node_modules/.bin/he
* Add a script to your package.json and run the script
"scripts": {
"start-helium-server": "./node_modules/.bin/he",
},
$ npm run he
* Install globally
$ npm i -g helium.js
$ he
Option 2: Do it Yourself
/* 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)
/* 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);
Running Your Application
If cli was not used, be sure to add a script to your package.json.
"scripts": {
"start-helium-server": "./node_modules/.bin/webpack && babel-node HeliumServer.js",
},
# To run your application, type the following into your terminal
$ npm run start-helium-server
Contributing
If you would like to contribute, submit a pull request and update the README.md with details of changes.
Versioning
We use SemVer for versioning. For the versions available, see the tags on this repository.
Authors
License
This project is licensed under the MIT License - see the LICENSE.md file for details