How to use Rockpack

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.

1. Install module:

   #NPM
   npm install  @rockpack/compiler --save-dev
   #YARN
   yarn add @rockpack/compiler --dev

2. Create a build.js file in the root directory with the following code:

   const { frontendCompiler } = require('@rockpack/compiler'); 
   
   frontendCompiler();

3. 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.

1. Install modules:

   # NPM 
   npm install @rockpack/ussr --save 
   npm install @rockpack/compiler --save-dev 
   
   # YARN 
   yarn add @rockpack/ussr 
   yarn add @rockpack/compiler --dev

2. 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
     }; 
   };

3. 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.

1. Installation:

   # NPM 
   npm install @rockpack/tester --save-dev 
   
   # YARN 
   yarn add @rockpack/tester --dev

2. Create the test.js in your project root and add the following codes:

   const tests = require('@rockpack/tester');
   
   tests();

3. 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.

1. Installation:

   # NPM
   npm install @rockpack/codestyle --save-dev
   
   # YARN
   yarn add @rockpack/codestyle --dev

2. Create a eslintrc.js file with the following code:

   const { rockConfig } = require('@rockpack/codestyle');
   
   module.exports = rockConfig({
     'no-plusplus': 'error'
   });

3. 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.

1. Installation:

   # NPM 
   npm install @rockpack/logger --save
   
   # YARN 
   yarn add @rockpack/logger

2. Wrap the App.js component in the LoggerContainer 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

1. Installation:

   # NPM
   npm install @rockpack/localaser --save
   npm install @rockpack/compiler --save-dev
   
   # YARN
   yarn add @rockpack/localaser
   yarn add @rockpack/compiler --dev

2. Next you have to wrap the App.js in LocalizationObserver 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:

---

---

1. It is modular and can be selectively imported into legacy applications
2. 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)
3. It has a very flexible architecture hence you can use your preferred libraries for state management
4. 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:

1. 1. React Client Side Render (React CSR) – This gives boilerplate code similar to Create React App
   2. React Server Side Render (React SSR Light Pack) — This gives boilerplate code the following:
      • Server-side rendering (SSR)
      • It uses Koa for its Node.js server
      • @loadable/components
   3. 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
   4. 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.

To bootstrap any of the applications, follow the steps below.

1. Installation:

   #NPM
   npm install @rockpack/starter -g
   

2. Create your app:

   rockpack < your project name>

3. Answer the terminal question and Rockpack handles the rest. When all is done you should get this:
   
4. 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.