rockpack

• Beginners. With the help of Rockpack, any newbie to React can deploy a project of any complexity in a few minutes, with configured webpack, eslint, jest, etc. Rockpack supports the most popular types of React application with the project structure, Server Side Rendering, optimizations, and has the necessary dependencies.
• Large projects from scratch. Rockpack supports most of the webpack best practices configurations, eslint rules, jest, typescript and will work great even on large projects
• Startup. If you need to quickly check an idea without wasting time on unfolding and setting up the project.
• Library or React Component. If you want to write a UMD library or React component, with support for the esm/cjs build as well as the minified version.

Fast setup

• Legacy projects or modular use. Rockpack is a modular platform, you can only use what you need. Please see every module's readme.

Also, pay attention to module iSSR. This tiny module helps you to move your React application to Server-Side Rendering. Please see articles:

• ENG: Server-Side Rendering from zero to hero
• RU: Server-Side Rendering с нуля до профи

Motivation

Working on many React projects, we are faced with the same type of routine tasks. We answer questions every time:

• How to set up an efficient build system with support for many formats and Typescript we need
• Which linter's rules should be on the project for comfortable work
• How to set up Jest that it works with Babel or Typescript
• How to make server-side rendering to work with existing solutions - Redux, Apollo and other
• How to set up Webpack for server-side rendering and get production ready artifact and a cool dev server

Every time we spend weeks on these routine tasks.

Using Rockpack you can deploy your project in minutes and start writing really useful code.

Modules overview

Rockpack consists of modules. Let's consider them in more detail:

@rockpack/starter

this is create-react-app on steroids.

Rockpack provides the best practice to set up your application. Project structure has feature based approach (see article here).

Supports the following types of applications:

React SPA – Preset for a Single Page Application using React. React SPA + SSR – Preset for a React Single Page Application with Server-Side Rendering. React Component – Preset for publishing a reusable React component to NPM. UMD Library – Preset for a vanilla JavaScript UMD library, suitable for NPM publishing.

All types of applications support:

• Import of many 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, postcss-custom-media, postcss-media-minmax
• SEO Optimizations, React optimizations, Antd optimizations
• Support for settings via Dotenv and Dotenv safe
• Bundle Analyzer, Statoscope
• GraphQL support

Full list of features see here

Additionally, for each type of application, you can install:

• Configured ESLint with best practices rules @rockpack/codestyle
• Customized Jest with additions @rockpack/tester

More details...

@rockpack/compiler

This is React bundler (based on Webpack) using a set of necessary loaders, plugins and using the best practices out of the box.

@rockpack/compiler can help you with:

• Compile your React application (TS/Babel)
• Compile React Component or VanillaJS UMD library (TS/Babel)
• Nodejs backend (TS/Babel)
• Markup html files
• Compile isomorphic (Server-side rendering) application (TS/Babel)
• Bundle Analyzer, Statoscope (TS/Babel)

More details...

@rockpack/tester

This is Jest with cool config, add-ons and fully compatible with TS / Babel.

More details...

@rockpack/codestyle

This is an efficiently customized Eslint with many best practical rules and additions.

More details...

In order to get more detailed info please follow each module links.

Rockpack is a completely free project. We are always open to collaboration and contributors.

Alternatives

The Rockpack project was inspired by:

• Vite
• Next.js
• create-react-app
• Rome
• Estrella

Why do we need Rockpack...?

...if we have create-react-app or other?

• Rockpack provides a very easy way to get started with @rockpack/starter. Just one command allows you to set up your application with support for TypeScript, Jest, Eslint, SSR and more.
• Rockpack is very flexible. You can design the architecture as you like, use different libraries and solutions, for example, for state management.
• Rockpack doesn't add any magic. This is a set of best practices and libraries for automating the start of a project.
• Rockpack has the option of modular integration into a legacy project.
• Rockpack has the ability to modify the webpack.config without "eject" with the ability to update Rockpack.
• Rockpack uses only existing modules and approaches and don't reinventing the wheel.

The MIT License

Copyright (c) Sergey Aleksandrov

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.