Getting Started with Razzle: An Alternative SSR Framework for React

Razzle is a tool that abstracts all complex configuration for SSR into a single dependency. Learn how to get started with Razzle in server-rendering React apps.

Setting up universal React applications is difficult and the configurations are not simple to handle. There are existing workarounds like using a framework like Next.js, forking a boilerplate, or maybe setting things up yourself.

All of these existing options have their pitfalls and, in some cases, provide you more future issues than you bargained for. This is where Razzle come in. Razzle is a tool that abstracts all the complex configuration needed for SSR into a single dependency, giving you the experience of create-react-app, but then leaving the rest of your app’s architectural decisions about frameworks, routing, and data fetching up to you.

With this approach, Razzle not only works with React, but also with Reason, Elm, Vue, Angular, and, most importantly, it’ll work with whatever comes next. In this post we are going to look at how to get started with Razzle and explore what features it brings to the table.

Installation

To install Razzle on your system, simply run the command:

$ npm install -g create-razzle-app

This will install Razzle globally.

Since Razzle operates just like the very popular create-react-app construct, you can create a new Razzle app just the same way by running the create-razzle-app command:

    $ create-razzle-app my-app

Now to run the app, navigate into the app directory and run npm start:

    $ cd my-app
    $ npm start

This should now open up your app on localhost:3000, and you should get the default welcome page on the browser like this:

That’s it, you got yourself a React app with SSR all set up without a single configuration, just like CRA.

Razzle Basics

Create a custom component

Let’s demonstrate how to create a custom component in the Razzle application that we’ve just set up. Open the Home.js file in the src directory and update it with the code:

    import React from 'react';
    import logo from './react.svg';
    import './Home.css';
    class Home extends React.Component {
      render() {
        return (
          <div className="Home">
            <p> Hello World !!</p>
          </div>
        );
      }
    }
    export default Home;

When you save, the browser will hot reload and you should be able to see your Hello World page showing up like mine here:

Routing and Navigation

One awesome feature of Razzle is that it uses React Router 4 by default, unlike Next.js. As a result, with Razzle, handling Navigation and Routing is a breeze. Since we already have a custom Home component, let’s see how we can create a new component and display some more custom content in it. We’ll create an About.js page and set it up like so:

    import React from 'react';
    import './Home.css';
    class About extends React.Component {
      render() {
        return (
          <div>
            <p> You've been routed to the About Page </p>
          </div>
        );
      }
    }
    export default About;

To route to this page we’ve just created, let’s update our App.js file like so :

    import React from 'react';
    import Route from 'react-router-dom/Route';
    import Switch from 'react-router-dom/Switch';
    import Home from './Home';
    import './App.css';
    import About from './About';
    const App = () => (
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/about" component={About} />
      </Switch>
    );
    export default App;

See how simple that was? Yeah, you did. Now when you navigate to localhost:3000/about you will be routed to our About page:

Now we have a small Razzle app we can extend to do exactly what we want—build it off to a full-fledged web app, build your next Airbnb, and so on.

Razzle commands

Just like CRA, Razzle has a ton of useful commands that let you speed up development and seamlessly work with the terminal. Here are a few you might find useful:

Start commands

    $ npm start 
    $ yarn start

Either of these commands will run the project in development mode. Once the command is executed and the server is running, you can view your application at http://localhost:3000. The page will reload if you make edits.

Build commands

    $ npm run build
    $ yarn build

These commands build the app for production to the build folder. The build is minified and the filenames include the hashes. Once the command executes, your app is ready to be deployed!

Production commands

    $ npm run start:prod
    $ yarn start:prod

This command will run the compiled app in production. You can again view your running application at http://localhost:3000.

More Features

Hot reloading

Like other modern frameworks, Razzle comes with universal hot module reloading, so both the client and server update whenever you make edits. No annoying restarts necessary. This is a wonderful thing, given that the app is rendered on the server.

Universal across all frameworks

Razzle runs two webpack instances. One handles the client bundle and another handles the server, which gives it the capability to function on all available frameworks since it’s basically dealing with webpack and not necessarily particular to React.

This functionality is also what makes it futuristic, as it can readily accommodate any new frameworks coming up in the future without major breaking changes.

Familiarity

Razzle comes with ES6 JavaScript goodies (through babel-preset-razzle) and the same CSS setup as create-react-app, which makes it very familiar to work with. There is a lot you can do with Razzle out of the box

Conclusion

Razzle is an alternative SSR framework for React and pretty much any other JavaScript framework available and to come. There are frameworks like Next.js and there’s equally the react-server, but all of these do not entirely solve the problems associated with server rendering.

Razzle is an improvement on what these existing technologies offer, as it not only gives more simplicity and flexibility, it also makes it possible to server-render any JavaScript application irrespective of what framework it was initially built on. To gain in-depth knowledge about Razzle and find out more awesome features, take a deeper look at the Razzle documentation.

For More Info on Building Apps with React

Want to learn more about creating great apps with React? Check out Kendo UI for React, our complete UI component library for React that allows you to quickly build high-quality, responsive apps. It includes all the components you’ll need, from grids and charts to schedulers and dials. Learn more about how you can get started with KendoReact.