node package manager

razzle

Razzle ✨

A zero-config, razzle-dazzle build system for universal JavaScript applications.

Motivation

Universal JavaScript applications are tough to setup. Either you buy into a framework like Next.js or react-server, or you fork a boilerplate. Razzle aims to fill this void by giving you best practices tooling out of the box and then gets out of hell out of your way. In other words, Razzle is agnostic about JS frameworks, routing, and data fetching. This means you can use it with React (the default), Preact, Inferno, Rax, Angular 2, and Vue with ease.

Features

  • Like Facebook's create-react-app, but for universal apps.
  • Uses Webpack Hot Module Replacement on both the client and server. You type, and Razzle will take care of the rest.
  • Comes with your favorite ES6 JavaScript goodies, babel-preset-razzle.
  • Agnostic about data fetching and routing.
  • Agnostic about CSS-in-JS or styling, but ships with the exact same CSS setup as create-react-app.
  • Works with React, Preact, Inferno, Rax, Angular, and Vue.
  • Simple customization API via razzle.config.js.

Quick Start

$ yarn global add razzle
 
razzle init myApp
cd myApp
yarn start

25 seconds to bootstrap

Razzle Onboarding

Customization

Extending Babel Config

Razzle comes with most of ES6 stuff you need. However, if you want to add your own babel transformations, just add a .babelrc file to the root of your project.

{
  "presets": [
    "razzle/babel",
    "stage-0"
   ]
}

Extending Webpack

You can also extend the underlying webpack config. Create a file called razzle.config.js in your project's root.

// razzle.config.js 
 
module.exports = {
  modify: (config, {target, dev}, webpack) => {
    // do something to config 
  
    return config
  }
}

Webpack Flags

  • process.env.RAZZLE_PUBLIC_DIR: Path to the public directory.
  • process.env.RAZZLE_ASSETS_MANIFEST: Path to a file containing compiled asset outputs
  • process.env.PORT: default is 3000, unless changed
  • process.env.NODE_ENV: 'development' or 'production'
  • process.env.BUILD_TARGET: either 'client' or 'server'

Razzle API Reference

razzle init <project>

This will create a new razzle project (with the global CLI) installed. It will also install dependencies.

razzle start

This run the project in development mode.
You can view your application at http://localhost:3000

razzle build

Builds project for production. Final build located in build directory.
You can run your app by simply running:

node build/server.js

or

yarn run start:prod

razzle.config.js

There are just a few settings you should know about.

// razzle.config.js 
 
module.exports = {
  port: 3000, // Changes default port setting 
  host: '0.0.0.0', // Changes default host, useful for testing on mobile 
  clearConsole: false, // Show verbose output, will not clear console on changes. 
  modify: (config, { target, dev }, webpack) => {
    // do something and return config 
  
    return config
  }
}

Inspiration


Author