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! 😃)
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! 😄 👏