Universal JavaScript applications are tough to setup. Either you buy into a framework like Next.js or react-server, fork a boilerplate, or set things up yourself. Razzle aims to fill this void by abstracting all the required tooling for your universal JavaScript application into a single dependency, and then leaving the rest of the architectural decisions about frameworks, routing, and data fetching up to you.
Razzle comes with the "battery-pack included" and is part of a complete JavaScript breakfast:
- 🔥 Universal Hot Module Replacement, so both the client and server update whenever you make edits. No annoying restarts necessary
- Comes with your favorite ES6 JavaScript goodies (through
babel-preset-razzle) - Comes with the same CSS setup as create-react-app
- Works with React, Reason-React, Preact, Inferno, and Rax as well as Angular and Vue if that's your thing
- Escape hatches for customization via
.babelrcandrazzle.config.js
Table of Contents
- Quick Start
- Getting Started
- Customization
razzleAPI Reference- How Razzle works (the secret sauce)
- Inspiration
$ npm i -g create-razzle-app
create-razzle-app my-app
cd my-app
npm startor with yarn
yarn create razzle-app my-app
cd my-app
yarn startThen open http://localhost:3000/ to see your app. Your console should look like this:
When you’re ready to deploy to production, create a minified bundle with npm run build.
If you have the latest version of Yarn, you can skip this. Otherwise:
Install Razzle globally:
npm i -g create-razzle-app
To create an app, run:
create-razzle-app my-appor with yarn create (new!):
yarn create razzle-app my-appYou can also boostrap any one of the examples
by adding --example <example-name> to your command.
create-razzle-app --example with-preact my-appor with yarn create
yarn create razzle-app my-app -- --example with-preact(The -- is needed for yarn to ignore options meant for create-razzle-app)
It will create a directory called my-app inside the current folder.
Inside that directory, it will generate the initial project structure and install the transitive dependencies.
my-app/
README.md
node_modules/
package.json
.gitignore
public/
favicon.ico
robots.txt
src/
App.css
App.js
client.js # Client entry point
Home.css
Home.js
server.js . # Main server code (an Express application)
react.svg
index.js # Server entry point
Note: The default application is a universal React application with React Router 4 on an Express server. If don't want this setup, have a look at some of the examples. Each one is installable with just a few commands.
Once the installation is done, you can run some commands inside the project folder:
Runs the project in development mode.
You can view your application at http://localhost:3000
The page will reload if you make edits.
Builds the app for production to the build folder.
The build is minified and the filenames include the hashes. Your app is ready to be deployed!
Runs the compiled app in production.
You can again view your application at http://localhost:3000
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"
]
}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
}
}A word of advice: razzle.config.js is an escape hatch. However, since it's just JavaScript, you can and should publish your modify function to npm to make it reusable across your projects. For example, imagine you added some custom webpack loaders and published it as a package to npm as my-razzle-modifictions. You could then write your razzle.config.js like so:
// razzle.config.js
const modify = require('my-razzle-modifictions');
module.exports = {
modify
}
Last but not least, if you find yourself needing a more customized setup, Razzle is very forkable. There is one webpack configuration factory that is 300 lines of code, and 3 scripts (build, start, and init). The paths setup is shamelessly taken from create-react-app, and the rest of the code related to logging.
Runs razzle in development mode.
You can view your application at http://localhost:3000
Builds a razzle project for production. Final build located in build directory.
There are just a few settings you should know about.
// razzle.config.js
module.exports = {
modify: (config, { target, dev }, webpack) => {
// do something and return config
return config
}
}The environment variables are embedded during the build time. Since Razzle produces a static HTML/CSS/JS bundle and an equivalent static bundle for your server, it cannot possibly read them at runtime.
process.env.RAZZLE_PUBLIC_DIR: Path to the public directory.process.env.RAZZLE_ASSETS_MANIFEST: Path to a file containing compiled asset outputsprocess.env.VERBOSE: default is false, setting this to true will not clear the console when you make edits in development (useful for debugging).process.env.PORT: default is3000, unless changedprocess.env.HOST: default is0.0.0.0process.env.NODE_ENV:'development'or'production'process.env.BUILD_TARGET: either'client'or'server'
You can create your own custom build-time environment variables. They must start
with RAZZLE_. Any other variables except the ones listed above will be ignored to avoid accidentally exposing a private key on the machine that could have the same name. Changing any environment variables will require you to restart the development server if it is running.
These environment variables will be defined for you on process.env. For example, having an environment variable named RAZZLE_SECRET_CODE will be exposed in your JS as process.env.RAZZLE_SECRET_CODE.
Defining environment variables can vary between OSes. It’s also important to know that this manner is temporary for the life of the shell session.
set RAZZLE_SECRET_CODE=abcdef&&npm start(Note: the lack of whitespace is intentional.)
RAZZLE_SECRET_CODE=abcdef npm startTo define permanent environment variables, create a file called .env in the root of your project:
RAZZLE_SECRET_CODE=abcdef
.env: Default..env.local: Local overrides. This file is loaded for all environments except test..env.development,.env.test,.env.production: Environment-specific settings..env.development.local,.env.test.local,.env.production.local: Local overrides of environment-specific settings.
Files on the left have more priority than files on the right:
npm start:.env.development.local,.env.development,.env.local,.envnpm run build:.env.production.local,.env.production,.env.local,.envnpm test:.env.test.local,.env.test,.env(note.env.localis missing)
These variables will act as the defaults if the machine does not explicitly set them.
Please refer to the dotenv documentation for more details.
Note: If you are defining environment variables for development, your CI and/or hosting platform will most likely need these defined as well. Consult their documentation how to do this. For example, see the documentation for Travis CI or Heroku.
tl;dr: 2 configs, 2 ports, 2 webpack instances, both watching and hot reloading the same filesystem, in parallel during development and a little webpack.output.publicPath magic.
In development mode (razzle start), 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 your 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). Then the server's html template just points to the absolute url of the client JS: localhost:3001/static/js/client.js. Since both webpack instances watch the same files, whenever you make edits, they hot reload at exactly the same time. Best of all, because they use the same code, the same webpack loaders, and the same babel transformations, you never run into a React checksum mismatch error.