React Prime  

Library to effortlessly convert your non-SSR React applications into responsive, SSR React applications. https://ss-react.github.io/react-prime/

Please Note

This library has been developed to work with Create-React-Apps exclusively. Dependencies that rely on the window object before checking if it exists will not be compatable with React-Prime.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Installing

Local installation

npm install --save react-prime

Then, install the required dependencies

npm i inquirer @babel/core @babel/plugin-syntax-dynamic-import @babel/preset-env @babel/preset-react @babel/register react-frontload react-helmet react-loadable md5-file

Server-Side Rendering

The process of SSR with our library has been automated through a CLI.

• Add a script into your package.json and run the script.

scripts: {
  "prime": "prime"
}

npm run prime

Deployment

Upon answering all of the CLI questions, a primessr directory is created which contains five files:

• index.js
• server.js
• primeServer.js
• primeCompare.html
• returnHTML.js

Then, an SSR version of your application is automatically hosted on http://localhost:8080.

Performance Testing

To view side by side comparison of CSR and SSR renders:

prime:compare

While Prime compare server is running, execute the following to generate Lighthouse reports:

prime:CSRreport

prime:SSRreport

Authors

• Andrew Wong
• Andy Ahn
• Brittany Miltenberger
• Greg Domingue

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

• Thank you to Patrick Cason for his excellent article on SSR.
• Huge shoutout to Clariz Mariano for the logo. You can find more of her work on dribbble!