Getting Started with Razzle: An Alternative SSR Framework for React
Tags: javascript, react, razzle
Published: 2019-02-07 13:00:58

---
title: Getting Started with Razzle: An Alternative SSR Framework for React
published: true
tags: javascript, react, razzle 
canonical_url: https://www.telerik.com/blogs/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:

![](https://d2mxuefqeaa7sj.cloudfront.net/s_21304C2417DF567667A1767761B871AD1CDD72B25F1C5309744159D41504022B_1542907862106_Screen+Shot+2018-11-22+at+6.17.08+PM.png)

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:

![](https://d2mxuefqeaa7sj.cloudfront.net/s_21304C2417DF567667A1767761B871AD1CDD72B25F1C5309744159D41504022B_1542970330065_razzle.png)

**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:

![User-uploaded image: about.PNG](https://d2mxuefqeaa7sj.cloudfront.net/s_065F0C67591AA8FE07865625677290B25D18FF36DA635824410DF962968CC340_1542978495778_about.PNG)

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](https://github.com/facebookincubator/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](https://github.com/jaredpalmer/razzle).

* * *

## For More Info on Building Apps with React

Want to learn more about creating great apps with React? Check out [Kendo UI for React](https://www.telerik.com/kendo-react-ui), 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](https://dev.to/progresstelerik/kendoreact-getting-started-blog-series-355-temp-slug-8937918).