Awesome

cra-universal

Create React App Universal CLI

Create React App companion for universal app. No eject, zero config with customization, supports string and node stream API

Live Demo | Official Doc

Features

No eject needed!
Zero config by default and customizable
Server-side rendering for your SEO
Code-splitting that works universally
The core middleware is fully unit-tested
Works alongside react-scripts, not as replacement

Prerequisites

Node >= 14.17.5 LTS recommended
npx is required

Installation

# Create new cra
create-react-app myapp
cd myapp

# Install new cra-universal
yarn add -D cra-universal

# Install peer dependency
yarn add @cra-express/core express@4.18.1

Existing Projects


# Install new cra-universal
yarn add -D cra-universal

# Install peer dependency
yarn add @cra-express/core express@4.18.1

# init custom server (optional)
yarn run cra-universal init

#This will copy ./templates/server into the current directory (it should be run on CRA client root)

Client code change

Please update your render method on src/index.js

// before
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

// after
ReactDOM.hydrateRoot(document.getElementById('root'), <App />);

Development

# Start CRA client
npm start

## Start CRA server, then open http://localhost:3001 in your browser
npx cra-universal start

Production

# Change directory to your project root first, and run:
npx cra-universal build

# This command will build both client and server and put them into `./dist`
# Run locally:
# $ cd dist && npm i
# $ npm run serve

Deployment

First, follow the Production guide mentioned above.
Since the bundle used Webpack Node Externals, you need to run npm install --production on the copied /dist, but this time you don't need to install its devDependencies
Use process manager like PM2 to run your server, your run target is ./dist/server/bundle.js

Credit

Create React App https://github.com/facebook/create-react-app
Thanks for https://github.com/ayroblu/ssr-create-react-app-v2 for the base!

Support

If you like this project, please kindly support it by becoming a patron at my Patreon page. Thanks!

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute]. <a href="https://github.com/antonybudianto/cra-universal/graphs/contributors"><img src="https://opencollective.com/cra-universal/contributors.svg?width=890&button=false" /></a>

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

License

MIT