In a nutshell, Rockpack is Create React App (CRA) on steroids. It is a React bootstrapping tool that aims to do the heavy lifting and it simplifies the process of setting up React applications.
Rockpack enables developers to bootstrap React applications with support for server-side rendering, bundling, linting, testing, logging, localizing, and more.
The easiest way to think of Rockpack is that it is CRA with a lot of useful, well thought out, and, often, required additions.
In this post, we will learn about Rockpack, its architecture, modules, and why it’s needed.
Rockpack modules
One of the greatest things about Rockpack is that it has a modular architecture so you can use only the Rockpack module you want.
In this section, we will be looking at each Rockpack module in detail.
@rockpack/compiler
This is a Webpack
based React bundler. It is preconfigured with the necessary loaders and plugin and using the best practices out of the box.
Usage:
To use this module run the follow steps below.
- Install module:
#NPM npm install @rockpack/compiler --save-dev #YARN yarn add @rockpack/compiler --dev
- Create a
build.js
file in the root directory with the following code:const { frontendCompiler } = require('@rockpack/compiler'); frontendCompiler();
- Run the
build.js
:#DEVELOPMENT cross-env NODE_ENV=development node build #PRODUCTION cross-env NODE_ENV=production node build
When you run the production build it creates a minified version of your app with production optimization.
The Rockpack compiler ships with numerous awesome features. Below are some of them:
- TypeScript support
- Support build nodejs scripts with nodemon, livereload, source maps
- React optimizations
- SEO optimizations
- Image minifications
- GraphQL support (webpack-graphql-loader)
The list continues. You can get a full list here.
@rockpack/ussr
This important library provides universal server-side rendering (SSR
) support for the Rockpack project. It is said to provide universal SSR
support because it works with Redux (thunk, sagas), Apollo, Mobx, and other solutions.
Out of the box React supports SSR
but it does this without considering asynchronous operations. @rockpack/ussr
adds support for asynchronous operations to React during SSR
.
It provides some APIs (custom hooks) that are analogous to their React counterparts. Some of these are the useUssrState
and the useUssrEffect
. These are analogous to the useState
and the useEffect
hook. However, the useUssrState
and the useUssrEffect
supports asynchronous operations and SSR
.
Usage:
To use the @rockpack/ussr
follow the steps below.
- Install modules:
# NPM npm install @rockpack/ussr --save npm install @rockpack/compiler --save-dev # YARN yarn add @rockpack/ussr yarn add @rockpack/compiler --dev
- Import and use hooks with
SSR
support like this:import React from 'react'; import { useUssrState, useUssrEffect } from '@rockpack/ussr'; const getUsers = async () => { // performs some async operation } export const App = () => { const [users, setUsers] = useUssrState({ users: [] }); useUssrEffect(async () => { const allUsers = await getUsers(); setUsers(allUsers); }); return { // performs some operations to render the list of users }; };
- Configure
client.jsx
:import React from 'react'; import { hydrate } from 'react-dom'; import createUssr from '@rockpack/ussr'; import { App } from './App'; const [Ussr] = createUssr(window.USSR_DATA); hydrate( <Ussr> <App /> </Ussr>, document.getElementById('root') );
The line:
const [Ussr] = createUssr(window.USSR_DATA);
Ensures the useUssrState
works correctly by associating the state executed on the server with the client.
Also, build.js
and a server.jsx
(which uses a Koa
) file are set up by default once we choose to bootstrap a SSR
application. These files are preconfigured to work with each other and need no further editing.
You can get more details on using the @rockpack/ussr
module here.
@rockpack/tester
This uses Jest and some recommended modules and add-ons. It features a robust test suite configured with best practices. And it fully supports TypeScript and babel.
Usage:
To use this module follow the steps below.
- Installation:
# NPM npm install @rockpack/tester --save-dev # YARN yarn add @rockpack/tester --dev
- Create the
test.js
in your project root and add the following codes:const tests = require('@rockpack/tester'); tests();
- Run tests with the following commands:
node tests.js #Development node tests.js --watch
@rockpack/codestyle
This is Eslint configured using best practices.
Usage:
To use this module follow the steps below.
More great articles from LogRocket:
- Don't miss a moment with The Replay, a curated newsletter from LogRocket
- Learn how LogRocket's Galileo cuts through the noise to proactively resolve issues in your app
- Use React's useEffect to optimize your application's performance
- Switch between multiple versions of Node
- Discover how to animate your React app with AnimXYZ
- Explore Tauri, a new framework for building binaries
- Advisory boards aren’t just for executives. Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
- Installation:
# NPM npm install @rockpack/codestyle --save-dev # YARN yarn add @rockpack/codestyle --dev
- Create a
eslintrc.js
file with the following code:const { rockConfig } = require('@rockpack/codestyle'); module.exports = rockConfig({ 'no-plusplus': 'error' });
- To override all config you can pass a second to the
rockConfig()
function as shown below:module.exports = rockConfig({}, { plugins: [ 'some new plugin' ] });
You can learn more about this module here.
@rockpack/logger
This is where things get really interesting and where Rockpack shines. The @rockpack/logger
module is an advanced logging system that records all user actions (buttons pressed, OS information, displays, etc. ). These actions can then be analyzed during a debugging section.
Usage:
To use this module follow the steps below.
- Installation:
# NPM npm install @rockpack/logger --save # YARN yarn add @rockpack/logger
- Wrap the
App.js
component in theLoggerContainer
component as seen below:... <LoggerContainer sessionID={window.sessionID} limit={75} getCurrentDate={() => dayjs().format('YYYY-MM-DD HH:mm:ss')} stdout={showMessage} onError={stackData => sendToServer(stack)} onPrepareStack={stack => stack.language = window.navigator.language} > <App/> </LoggerContainer> ...
The above code snippet should be the return value of an exported
anonymous function. The complete setup and usage of the @rockpack/logger
module is a bit demanding.
@rockpack/localazer
This is an advance localizer module that uses gettext. It provides an easy way to (localize) adapt our applications to different languages and regions.
Usage
- Installation:
# NPM npm install @rockpack/localaser --save npm install @rockpack/compiler --save-dev # YARN yarn add @rockpack/localaser yarn add @rockpack/compiler --dev
- Next you have to wrap the
App.js
inLocalizationObserver
components as shown below:import { LocalizationObserver } from '@rockpack/localaser'; const Root = () => { return ( <LocalizationObserver currentLanguage={this.state.currentLanguage} languages={this.state.languages} > <App/> </LocalizationObserver> ) }
The setup and usage of the @rockpack/localaser
module are a bit demanding.
Why Rockpack?
Some notable Rockpack alternatives are Next.js
and Create React App
. However, Rockpack outshines its competitors in a number of ways.
First, all Rockpack application supports the following out of the box:
- Import of different file formats (list of formats)
- Image optimization, SVG optimization
- Loading SVG files as React components
- CSS/SCSS/less modules
- Babel or TS, TS support for CSS/SCSS/less modules
- PostCSS autoprefixer
- SEO optimizations, React optimizations
- Bundle analyzer
- GraphQL support
The full list can be found here (these are all put together using best practices). By providing all these out of the box Rockpack aims to reduce the application setup time. This is regardless of the app size and developer skill.
Other reasons to use Rockpack include:
- It is modular and can be selectively imported into legacy applications
- It provides an easy to use and very beginner-friendly API (with just one line you can bootstrap an application with the features listed above)
- It has a very flexible architecture hence you can use your preferred libraries for state management
- It provides powerful tools for logging and localization
The advantages of Rockpack are exciting and great, any developer would be interested in using this awesome library. We will look at how to bootstrap React applications using Rockpack in the next section.
How to get started with Rockpack
The easiest way to get started with Rockpack is to use the @rockpack/starter
module. This is part of the Rockpack project.
It supports three different types of application:
-
- React Client Side Render (
React CSR
) – This gives boilerplate code similar to Create React App - React Server Side Render (
React SSR Light Pack
) — This gives boilerplate code the following:- Server-side rendering (
SSR
) - It uses
Koa
for itsNode.js
server @loadable/components
- Server-side rendering (
- React Server Side Render (
React SSR Full Pack
) — This gives boilerplate code with the following:- All we have in the
React SSR Light Pack
- React-Router
- Redux
- Redux-Saga
- React-Helmet-Async
- All we have in the
- Library or React component — This is gives it an efficiently configured Webpack needed to develop a React Library or Component with support for the esm/cjs build as well as the minified version.
- React Client Side Render (
To bootstrap any of the applications, follow the steps below.
- Installation:
#NPM npm install @rockpack/starter -g
- Create your app:
rockpack < your project name>
- Answer the terminal question and Rockpack handles the rest. When all is done you should get this:
- Start your project:
cd < your project name> # and run npm start
Conclusion
Rockpack is a well-thought-out library. I am already excited about using it. One of the beautiful things about Rockpack is that there is no real learning curve because you still get to write React code. And it offers you the flexibility of using your preferred library for things like state management.
Cut through the noise of traditional React error reporting with LogRocket
LogRocket is a React analytics solution that shields you from the hundreds of false-positive errors alerts to just a few truly important items. LogRocket tells you the most impactful bugs and UX issues actually impacting users in your React applications.

Focus on the React bugs that matter — try LogRocket today.