react-blackbox-template

React Blackbox

This project is meant for creating React applications following convention over configuration.
Don't worry about configuration and setup! Focus on developing 🚀

Table of contents

• Motivation
• Usage
• File Structure
• Scripts
• Important

Motivation

Lately, our team has been developing multiple frontend applications under the microservice frontend architecture. Each application is then hosted in multiple other applications.

Such applications need to follow some shared interface, and we have noticed that creating multiple applications, where each application has its own separate configurations and settings, created a situation in which it's impossible to create a single convention for all apps.

Thus we have decided to create a module which encapsulates all the settings and configurations, including the React & Storybook setup, leaving the developer to focus on business logic.

Another main advantage is that whenever the interface changes, it's enough to upgrade the module instead of copy-pasting the differences in every single app.

Usage

First, use the react-blackbox-template cli to create your new application.
Don't forget to specify the name of your application:

$ npx react-blackbox-template <APP_NAME>

Running the above command will create your new application with a React application boilerplate with default package.json scripts. That's it! You're good to go. Just run the scripts.

File Structure

After installation, your application file structure should be as following:

.
└── src                   # src folder, all code should be inserted here
    └── components        # components folder for all components
        └── App.js        # Main component that will be loaded in the application

Make sure to keep the main component under src/components and all javascript code under the src folder.

Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn test

Launches the test runner in the interactive watch mode.
Defaults to empty tests.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

yarn storybook

Run storybook!
Storybook should start, on a random open port in dev-mode.
Now you can develop your components and write stories and see the changes in Storybook immediately since it uses Webpack’s hot module reloading.

Important ⚠️

In order for this module to work perfectly, you have to make sure the following conditions are met:

• Your application complies to the required file structure
• All javascript code should be inside the src folder
• All story files should be named stories.jsx (unless you don't want to use Storybook which is not advised)