Create React App Universal CLI
Create React App companion for universal app. No eject, zero config with customization, supports string and node stream API
- 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
- Node >= 12.16.1 LTS recommended
- npx is required
# 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
# Install new cra-universal yarn add -D cra-universal # Install peer dependency yarn add @cra-express/core # init 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
// before ReactDOM.render(...) // after ReactDOM.hydrate(...)
# Start CRA client npm start ## Start CRA server, then open http://localhost:3001 in your browser npx cra-universal start
# 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: # $ node --preserve-symlinks dist/server/bundle.js # You only need `--preserve-symlinks` on local, since we only do symlinks on development.
- First, follow the Production guide mentioned above.
- Since the bundle used Webpack Node Externals, you need to run
npm install --productionon the copied
/dist, but this time you don't need to install its
- Use process manager like PM2 to run your server, your run target is ./dist/server/bundle.js
- Create React App https://github.com/facebook/create-react-app
- Thanks for https://github.com/ayroblu/ssr-create-react-app-v2 for the base!
If you like this project, please kindly support it by becoming a patron at my Patreon page. Thanks!
- Stan Day (firstname.lastname@example.org)
This project exists thanks to all the people who contribute. [Contribute].
Become a financial contributor and help us sustain our community. [Contribute]
Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]