What’s a starter kit?

Every Frontend developer has a few basic issues to think about before starting any software project – what tools they want to use, what additional libraries they will add, what solutions are overrated and which they want to learn. I think we should also consider architecture and good practices related to any application’s launch and development.

The above-mentioned dilemmas become even more difficult if they concern a project carried out commercially by a software development company. The most important thing that we have and offer to the client (apart from skills and knowledge) is the developers’ working time. As a result, the whole process must be shortened to a minimum. The selected libraries must be familiar for all team members (or with clear documentation and possibly a quick course in learning this new tool).

While creating new frameworks or libraries, developers tried to simplify their daily jobs by combining individual tools into one starter-kit.

Simply put, it’s a shortcut. Starter-kit a pre-made, production-ready solution that allows you to directly move to create business logic, quick integration and deployment.

A short story of Create React App kit

The beginnings weren’t so easy for React.js. Developers complained about the number of preparations they needed to organise their work environment – from selecting routing libraries and state management to configuring Babel and Webpack.

On one hand, it was a massive disadvantage – it took ages to start working. On the other, the argument was that React is very versatile in terms of configurations for the most specific business requirements.

Luckily, the React community came to the rescue by a large number of unofficial boilerplates available as npm packages or git repositories.

It wasn’t very long before Facebook (the original creators of React) released the first official boilerplate known as Create React App.

I’m not here to discuss all the pros and cons of Create React App. But I strongly encourage you to check out the README file and decide for yourself whether this boilerplate is suitable for your needs.

You’re probably thinking: “If we already have an official boilerplate and it’s still supported by the original creators of React.js, why do you need any other versions”? If you’re happy with the bare minimum – absolutely no need. But if your project is more complicated (and let’s be honest, most of them are), let’s say a bilingual application operating on two different markets, unfortunately, you’ll have to configure the project yourself with the appropriate library.

Here’s where React Starter comes in.

What makes React Starter boilerplate so useful?

The Software House team is not satisfied with the “bare minimum”, believe me. So we concluded that we need to organise our own boilerplate for the following reasons.

Bootcamp

Our React Starter serves as a great tool for introducing new frontend developers in the tech stack and good practices for code writing that we use in our daily work. In this way, even junior developers gain confidence and comfort while engaging in projects based on our tool.

Speed

At the very beginning, I mentioned how important it is to be ready to start a project as soon as possible. In commercial projects, we don’t want to waste time on setting up repetitive configuration (of course, as always, it depends on the project), but move on to designing the much more important business logic.

Independence

Countless open source tools are a great boilerplate of additional library packages. However, they are often abandoned or poorly supported by their developers and may contain outdated versions or omit newer and much better solutions. It’s always a massive shame to find a seemingly perfect fit just to realize that it’s useless.

When creating commercial projects, we need stability to offer our clients the best solutions. Hence why we constantly follow the latest trends and concepts to test them and decide whether to adopt them later or not.

Playground

Devs just wanna have fun, and React Starter is a great test tool for implementing new ideas. With the number of libraries created, we can check and test (by replacing only one selected functionality and appropriate implementation) many different options and relationships before choosing the most optimal one. React Starter is constantly being developed and is subject to constant modification, just like JavaScript itself, frameworks and libraries.

React Starter specification

Finally, it’s time for you to meet our React Starter boilerplate. We love to share stuff with the frontend development community, so don’t hesitate to take it out for a spin.  

Getting down to business, our proposal was based on Create React App and has the following libraries:

TypeScript

The advantages of writing strong-typed code need no introduction, but just to highlight the most general benefits, i.e. code clarity, easy debugging, additional language properties, IDE support and much more. In the tsconfig.json file, you will find the configuration.

React Intl

It uses the provider pattern to scope an i18n context to a tree of components. This allows configuration like the current locale and set of translated strings/messages to be provided at the root of a component tree and made available to the <Formatted*> components.

Cypress

The configuration is mostly isolated to the e2e folder, to allow for easy removal when not needed and to avoid conflicts with any other testing libraries, as they tend to pollute the global namespace. We believe that proper E2E testing is extremely valuable, but we also recognize that it’s not for everyone and it will probably be one of the most removed or ignored features in boilerplate versions.

React Fetching Library

The alternative to Axios or fetch. Perfect combination with React itself. You can use Hooks or Function as Child Components. I would like to point out that besides basic integration, the boilerplate also includes some basic authorization actions, interceptors and server mocking hand-written by us.

Mirage

If you do not have a backend ready and you want to simulate a response from a given endpoint, this library allows you to do it without any problems.

Plop

Everyone is fed up with repetitive tasks, so thanks to Plop JS you can create an appropriate template that we can generate with one command (our starter contains diagrams for building a functional component and a hook)

Husky

This tool allows you to easily define scripts to be executed when certain git actions are performed (git hooks). This way, you can perform auto-formatting and static code analysis before each commit.

Prettier

Of course, we all want our code to look neat and clean, so with a little help and rules we’ve defined us (.prettierrc file) you can enjoy automatic code formatting.

ESlint

In addition to readability, you must always ensure the quality of the code (a set of rules and plugins in the .eslintrc file)

Stylelint

We haven’t forgotten about static analysis of style files (.stylelintrc) either!

This list of tools might seem like nothing new. But then think about how much time would you spend on the appropriate configuration of the above-mentioned libraries manually and separately.

What’s more, our React Starter already contains many modules (e.g. authorization, routing, internationalization), Hooks and components responsible for integrating everything into a working whole. As befits best practices, you will find everywhere tests (unit and integration), and sample e2e tests.

If you want to use CI, we also have prepared .yml files for Bitbucket Pipelines, GitLab CI and GitHub Actions.

What’s next for React Starter?

Willing to reproduce the latest solutions and adding the possibility of your configuration (depending on the preferences of the team or project requirements), we are currently working on React Starter CLI, which will help create your own boilerplate.

The solutions we want to integrate with our React Starter using CLI are:

• Redux
• Material UI
• Styleguidist
• Form validators for React Hook form
• Apollo
• Styled components
• CSS Modules
• Final Form
• Storybook
• Urql
• React Query

Last but not least – an example of using React Starter

Let’s say that in your project you need more advanced state management, therefore you want to include the Redux library. The whole process will look like this:

react-starter-cli add redux

What the command does:

• Install redux react-redux @types/react-redux redux-devtools-extension
• Add basic files for redux middleware.ts; reducer.ts; store.ts; types.ts
• Add the provider to src/providers/AppProviders.tsx
• Add plopfiles for redux
• Add plop generator with redux plopfiles
• Edit plopfile.js and add a new generator 

And it’s all set!

You can contribute to React Starter too!

The presented React starter-kit is undoubtedly a great asset in a software development company. Can this boilerplate be useful for you too? For sure. Can you be useful to this boilerplate? Where there’s a will there’s a way.

I think it’s a nice spot to invite and encourage you to contribute to React Starter open-source version on GitHub. If you have interesting ideas, you know libraries that are worth adding, or you found a bug – go ahead and issue PR. Our team will conduct a review and if the proposed changes are approved, they will certainly be reflected in the next release.