CRA Universal: Universal create-react-app without ejecting

Note: Content updated for latest cra-universal 4.0.0 release

Hello, today I’d like to share about my latest work, CRA Universal.

It’s a CLI to initialize universal create-react-app, so you’ll get server-side rendering that works with code-splitting, and yes, without ejecting your precious create-react-app and start with zero config by default.

Let’s get started!

Prerequisites:

• Nodejs for SSR server
• create-react-app project (of course!)

Initialize your new create-react-app and change your directory to the newly created app:

npx create-react-app my-app
cd ./my-app

Install cra-universal

npm i -D cra-universal 

Finally, run the following commands with different terminal tabs:

# Start client
npm start 
# Start server
npx cra-universal start

Next, you need to change your render method from ReactDOM.render into ReactDOM.hydrate in your index.html so that the hydration works properly.

You can visit http://localhost:3001 and your create-react-app with SSR is ready!

Now try to use curl to check whether you get the full rendered version or not

curl http://localhost:3001

Now, you may want to deploy your app, let’s build it by running:

npx cra-universal build

This will build both the client and server bundle and put them together into dist folder. You can deploy dist into your Nodejs server, like now.sh, Firebase functions, or even your own server instance.

If you want to clean up the build results, you can run:

npx cra-universal clean

Tips: You can store cra-universal commands into your npm scripts for your convenience 😄

Here is the CLI repo if you want to contribute (it’s very welcomed! 😃)

antonybudianto/cra-universal

For demo, you can visit my website at https://antonybudianto.com and https://cra-universal.now.sh

Thank you for reading, please share to your friends who might need this and claps in! 😄 👏