Why is No One Talking About Razzle?

I love working in React, as most people do, I started with Create-React-App (CRA).

This provided a big cushion for me to just start working and forget about setting up the environment, I think most of us would agree that if we could just open an editor and start spitting out JSX without setting up babel/webpack, it would make our lives simpler. One of the things I enjoy the most about React is using client-side routing with react-router-dom. When looking for SSR solutions, I noticed the market forced me to abandon my way of doing routing, which meant I couldn't benefit from all the APIs that I get for free with my router. This was a big turn off for me, I had to think about my existing projects, which had gained a certain level of complexity, and re-structure everything to fit in either Next's way of doing router, or Gatsby's way of using templates for static content.

I am NOT a fan of tools that force you to think around them and don't enable your creativity, that's one of the main reasons I abandoned Angular after v2 came out.

So SSR for me was a deal breaker for some time, I needed the SEO benefits, but I wasn't going to re-factor my whole app to do so.

I needed more flexibility from my tools. So I started doing my research and I found Razzle which is an isomorphic SSR solution. Razzle even has its own CLI, Create-Razzle-App (also CRA?), which meant I could get going by just calling it like the original Create-React-App. Razzle grew on me really fast, it's config-less mode meant I could start prototyping quickly just like I would with CRA, but I had all the extensibility I needed without having to adapt my workflow to it. If you want to change my ESLint config,

you could do so by just adding a .eslintrc file to my project, the babel config could be changed the same way, add a plugin with a .babelrc and Razzle will pick it up and add it to the default config, if I needed to modify my webpack config, you could do so using a razzle.config.js file, which would provide me with a no-hassle way to extend the default webpack config. I didn't have to buy into a new framework, I didn't had to refactor my whole app (much). I could keep using React-router-dom just like I did with CRA, so the learning curve is basically non-existent. In fact, the only thing I had to do in order to add SEO to my apps now was to copy paste the SEO component from Gatsby, that was it.

Because of the way Razzle works, you can use it with Vue, Angular, or React.

By default, Razzle comes with React's config, but you could easily change the config to use any other frontend framework.

So How does Razzle work?

Razzle bundles both your client and server code using two different webpack instances running with Hot Module Replacement in parallel. While your server is bundled and run on whatever port you specify in src/index.js (3000 is the default), the client bundle (i.e. entry point at src/client.js) is served via webpack-dev-server on a different port (3001 by default) with its publicPath explicitly set to localhost:3001 (and not / like many other setups do).

Razzle was created by Jared Palmer, the mind behind Formik, Backpack, and After.js, with support from other prominent OSS contributors like Dan 'the man' Abramov, and Jari Zwarts and many others. Give Razzle a try, I'm sure you're going to love it!