React Project Setup: React, Storybook, and Tailwind. epic-games-clone #2

We set up react, storybook, and tailwind to work together in this section.

Setup

Create React App!

We are going to use create-react-app to bootstrap a react project for us. Update the my-app to your project name and run the below command.

npx create-react-app my-app --template cra-template-pwa-typescript

Note the flag — template cra-template-pwa-typescript above. There are many templates that provide additional functionalities on top of the vanilla CRA. This particular one provides us with the workbox configurations needed to make our app a progressive web app.

There are many other interesting templates like redux-typescript. This CRA template comes with a demo project that gives a good overview of what we can do with redux. That is especially helpful if you are new to redux or even revisiting redux after the redux-toolkit makeover. With that said, I encourage you to create the redux template of CRA and play around with that. As we will be using redux in this tutorial extensively.

The above command may take a few minutes to complete. Once done, proceed with the next step.

Storybook

Storybook has streamlined my mental model of how I see web components. Developing components in an isolated environment may take a bit of effort to set up and maintain but it will provide us with long-lasting results.

• It lets us focus on one component at a time.
• We will build more self-sufficient components focusing on what they get and what they render.
• Lets us test the extreme prop scenarios. Scenarios such as how will this card react if it gets a really long string for a name?

Also, in this project, we will set up chromatic a really useful visual regression testing tool by the team behind StorybookJS.

Chromatic provides a huge sense of security from the unexpected UI changes. It protects us from “Updated a css file and it broke a hell lot of other components!” scenarios.

On every push, It immediately requires us to approve the UI changes. It will be really hard to catch them ourselves manually. I encourage you to check https://www.chromatic.com/ to know more. Let’s proceed to install the storybook in our application.

npx sb init

That is it. The above command will detect the configurations of our project and setups the storybook accordingly. We are using typescript in this project and the storybook will create the sample stories in .tsx files for us.

Tailwind

The official tailwind documentation for CRA is well written. Follow the steps carefully in the documentation linked below and you will be good with your tailwind setup.

Install Tailwind CSS with Create React App - Tailwind CSS

Feel free to comment if you face trouble doing the tailwind installation.

Notes:

1. Use the VSCode extensions Headwind by Ryan Heybourn. (Sorts the classes in an opinionated way) and Tailwind CSS IntelliSense by Brad Cornes. (Provides IntelliSense of tailwind classes)
2. Craco: we will be using craco to override some of the webpack configurations without simply ejecting our react-scripts setup.

Run

I reduced the App.tsx to the below simple component.

function App() {
  return (
    <div className='p-5 bg-blue-200 text-blue-900 shadow-lg'>
      Hello World
    </div>)
}

export default App

and run the application.

npm start

We will be seeing the below picture with the tailwind class names doing their work.

Tailwind with storybook

As the storybook uses a separate development environment, we have to set up tailwind for our storybook too.

Step 1: Add the webpackFinal property in the .storybook/main.js exports.

// .storybook/main.js

const path = require('path')

module.exports = {
  stories: [
    '../src/**/*.stories.mdx', 
    '../src/**/*.stories.@(js|jsx|ts|tsx)'
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app',
  ],
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.css$/,
      use: [
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: [
              require('tailwindcss'),
              require('autoprefixer'),
            ],
          },
        },
      ],
      include: path.resolve(__dirname, '../'),
    })
    return config
  },
})

Do not forget to import path.

Step 2: Import index.css into .storybook/preview.js file.

// .storybook/preview.js

import "../src/index.css"
// There are code after this...

refer to the below StackOverflow thread for more details.

Storybook-tailwind. How should I add tailwind to storybook

npm run storybook

Now, the storybook will welcome us with this.

storybook welcome page

The npx sb init, has given us a sample page and introduction as shown above. I encourage you to check out the links given in the introduction.

Let’s visit the components Button, Header, and Page. The three are connected. The button has a few variations. The header component uses the button. The Page component uses the header component along with the button.

Task:

Every story is isolated. Imagine this situation and think about it.

1. The child component gets 5 arguments.
2. The parent component gets 5 arguments. Also, the parent component needs to take the arguments needed for the child component it is rendering.

Question: Should we repeat ourselves by entering 10 arguments in the parent’s story?

Explore the demo components storybook has provided for the answer.

Thank you.