New cra-universal released 🎉

Hi, I’m very happy to announce that the latest major version of cra-universal is released! 🎉🎉🎉

Introduction

First heard about cra-universal? So it’s a CLI for your create-react-app to enable universal app features like server-side rendering, without ejecting at all.

This release includes many improvements and new features:

• Zero config by default, with customization support!
• HMR support on server!
• Isomorphic style support, check here
• Basic assets support (png, jpg, gif, bmp, svg)

With zero config, it means:

• One dependency for tooling, easy updates!
• Customizable
• No need maintain server/webpack.config.js anymore
• No need to maintain server/package.json anymore, all server dependencies can be listed on root package.json

Get started

You can bootstrap universal create-react-app with these steps

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

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

# Start with no config at all!
$ npx cra-universal start
# Start your CRA client
$ npm start

Cool right? Unlike previous version, you don’t need to have server folder anymore, just start right away!

Customization

Zero config doesn’t mean you cannot customize it at all, it just means it abstracts away the painful setup and you can still override as you need.

If you prefer to maintain the server like in previous version, it’s supported too. You can still keep your server folder, or to create a new one, you can run:

$ npx cra-universal init

It will bootstrap the server folder inside your CRA client app, it contains server/index.js that handles the listen and log stuff, and server/app.js that handles the app server code. You can also have server/.babelrc file, it’ll use default babel configuration if not provided.

You can also define crau.config.js to override webpack configuration:

// crau.config.js
module.exports = {
  webpackPlugins: [],
  modifyWebpack: config => config
}

For now, it’ll only expose webpack and plugins overrides, but I think it should be enough for people to customize as their needs.

Please check out the release note here for more details. You can also visit https://cra-universal.now.sh/ for official landing and demo, or my personal website at https://antonybudianto.com.

If you’ve any feedbacks or ideas, please post a reply! I’d like to hear from you.

If you like the article, please share it with your friends, give some claps and star the repo on GitHub.

Thank you for reading!

Related article:

CRA Universal: Universal create-react-app without ejecting