Rockpack 2.0 Official Release

More than a year has passed since the release of version 1.0. During this time, I received feedback from users, made many fixes, and also updated all dependencies to the current state. And today I would like to proudly present you the release of the second version of this tool.

Rockpack repository is here!

What is Rockpack?

Starting a new React project, whether it's a small module or a React component, or vice versa, a large application with SSR support, we spend a lot of time solving routine tasks, slowing down the development process. We can’t dive into solving business problems without setting up Webpack, including all plugins and modules, setting up ESLint, Jest, Babel, TypeScript, as well as dependencies and configurations for them.

But this process can be automated!

Rockpack is a tool that can deploy one of the 4 types of React applications on your computer in one console command, which will be described below, with fully configured Webpack 5, ESLint 8, Babel, Jest, TypeScript and more with perfectly optimized settings, for stable and fast work. You not only get the generated settings, but also the basic framework of the project, based on the best development practices and experience of the entire React community.

Rockpack's main goal is to reduce project setup from weeks to 5 minutes!

What's new in Rockpack 2.0?

As part of the work on Rockpack 2.0, absolutely all dependencies have been updated. Now using the latest version of Webpack 5, Typescript 4.5+, ESLint 8+, Jest 27+, etc. All modules, plugins, loaders have been updated. Configs have been rewritten, taking into account the features of new versions.

The project supports React 17+ versions. It is no longer necessary to import React into every component. Also, the latest React Router 6 is available out of the box.

What does Rockpack support?

Out of the box, you can take advantage of the following features:

• TypeScript support 4.5+
• Babel 7, Babel-preset-env (> 5%)
• Support build nodejs scripts with nodemon
• Hot Module Replacement for SPA
• Livereload for SSR
• Source maps and Extended dev mode
• Dotenv support and Dotenv safe support
• React optimizations
• Monorepo support
• Write file webpack plugin (in dev mode)
• Copy Webpack Plugin
• ESLint support
• Templates: HTML/Jade/Handlebars
• CSS: CSS/SASS (dart-sass)/LESS + Postcss
• Postcss, Autoprefixer
• CSS Modules support
• Imagemin
• Formats support: Markdown, Video, Audio, Fonts, SVG, Script, Shaders etc
• SVG + SVGO, SVGR (import SVG like React Component)
• Antd optimizations (With optimizations: auto replace momentjs to dayjs, import antd)
• Terser minification
• Generate stats.json (in production mode)
• SEO Optimizations
• Bundle Analyze (webpack-bundle-analyzer, Statoscope)
• Isomorphic compile support (include isomorphic styles, isomorphic dynamic imports - @loadable)
• Vendor array splitting support (You can set dependency libraries to this array to split it on separate vendor.js file)
• MD/MDX support
• GraphQL support (webpack-graphql-loader)
• Сross-env included

Rockpack comes with a set of the best ESLint rules, Babel plugins and Jest plugins.

Why do I need Rockpack when there is create-react-app?

The main difference between Rockpack and create-react-app is that you can generate 4 types of applications, including those with SSR support, using best practices and feature-based project structure approach.

• CSR (Client Side Render) is an ordinary Single Page Application that has a project structure Project Structure Article
• SSR (Server Side Render) is an application with a configured server to work with Server Side Render support as well as SEO best practices SSR Article
• React Component is a boilerplate for building a React Component. If you need to create a React Component and expose it to NPM, then this option is for you.
• UMD Library - This option is for you if you just need to create and publish to NPM just a library.

The SSR project will also have a number of best practices for SEO, which will make it possible to get a project with a high level in the lighthouse

How to get started with Rockpack?

It's very simple! To start using Rockpack now, you need to:

Step 1. Install the package globally:

npm install -g @rockpack/starter

Step 2. Run the command:

rockpack folder_name

for example:

rockpack my-awesome-app

Step 3. Select the required project type from the list

In order to learn more, Rockpack readme is here to learn more.

What's next?

The Rockpack project is over 2 years old. During this time, it has become stable and does not require changes to the main API. We will support the project and expand its functionality.

Thanks to everyone who read this article! I hope Rockpack will be handy in your work.