Micro frontends also allow large teams to share common components – such as headers, footers, and logins – across multiple applications, ensuring consistency and keeping their projects DRY (Don’t Repeat Yourself).

In this article, you will learn:

• How to set up a project and folder structure that implements a Micro Frontend (MFE) Infrastructure

• How to use and configure the @originjs/vite-plugin-federation to allow Module Federation (MF) usage with Vite projects.

• How to share and consume React components between apps.

• How to run and test your app with shared components locally

Table of Contents

• Pre-Requisites

• What Is Module Federation?

• Benefits of Module Federation

• Project Structure

• How to Create the Projects

• How to Install Dependencies

• How to Configure the Remote App

• The Vite Module Federation Plugin

• Key Constraints On Exported Modules

• How to Create the Remote Components

• How to Consume the Remote Components Within the Host

• How to Handle TypeScript Errors

• How to Add RemoteWrapperComponent to App.tsx

• How to Serve the Remote App and Run Your Host

• The True Power of Micro Frontends

• Final Thoughts

Pre-Requisites

• Node installed on your machine – you can get your download of Node here

• Familiarity with JS / TS and React

• Familiarity with Command Line / Terminal

What Is Module Federation?

Before we go any further, let’s talk about Module Federation (MF).

Module Federation is a technique in web development that allows multiple separate builds to work together as a single application. It enables the sharing of code between different, independent applications at runtime, rather than at build time. This means a host application can dynamically load and execute code from a remote application.

At its core, Module Federation uses a "host" and "remote" architecture. A host application is the main app that consumes shared code / components. A remote application is the one that exposes code to be consumed.

The remote app specifies which parts of its code, or "modules," are available for others to use. The host then references these modules and loads them as needed.

Benefits of Module Federation

Independent Deployment

Module Federation lets teams build and deploy their micro-frontends separately. This eliminates the need for full application redeployments, accelerating development and reducing risk.

Efficient Code Sharing

MF provides a native way to share code and dependencies between micro-frontends. This prevents code duplication, reducing bloat and ensuring consistency.

Performance Gains

By sharing dependencies, Module Federation reduces the overall bundle size and improves initial load times, as each micro-frontend doesn't download its own copy of common libraries.

Scalability and Maintainability

MF enables a scalable architecture by breaking down large applications into smaller, manageable micro-frontends. This makes the codebase easier to maintain and allows teams to work independently.

Analogy

Imagine building an online store. Traditionally, you’d create the entire site – homepage, product pages, cart, user profile – as one big application. A small cart change would require rebuilding and redeploying everything.

With Micro Frontends and Module Federation, the shopping cart can be its own app, built and maintained by a dedicated team. The main site simply imports it, allowing the cart team to release updates independently, speeding up development and improving focus.

This also works for organisations with multiple sites that need a consistent look. Shared components like a header, footer, or product card can be reused across sites with different purposes, such as hiring vehicles or selling furniture, ensuring visual consistency while keeping functionality unique.

Project Structure

You will need to create two projects:

• host – this will act as your host application

• remote – this will expose the components you want to share

How to Create the Projects

Run the following commands in your terminal to create your root project folder and your two Vite projects:

# create micro-frontends directory for two vite projects, and navigate to folder
mkdir micro-frontends; cd micro-frontends

Create a Git Repository (Optional)

Using the below command you can create a Git repository for source control.

# initiate git repo
git init

# create host application vite app
npm create vite@latest host-app

# once submitted the command, select React and press Enter, 
Select a framework:
│  ○ Vanilla
│  ○ Vue
│  ● React
│  ○ Preact
│  ○ Lit
│  ○ Svelte
│  ○ Solid
│  ○ Qwik
│  ○ Angular
│  ○ Marko
│  ○ Others

# select Typescript + SWC and again press Enter
Select a variant:
│  ○ TypeScript
│  ● TypeScript + SWC
│  ○ JavaScript
│  ○ JavaScript + SWC
│  ○ React Router v7 
│  ○ TanStack Router
│  ○ RedwoodSDK 
│  ○ RSC

Once this is done, navigate back to the root project folder (micro-frontends):

# navigate back
cd ../

# create remote-app 
npm create vite@latest remote-app

# follow instructions as before to select React, Typescript + SWC

You now have your two projects, host-app and remote-app.

How to Install Dependencies

Open the micro-frontends folder in your preferred IDE / Code Editor. In this tutorial I’ll be using VS Code.

Tip: You can open the current folder in VS Code via your terminal using the following command code . if you’ve already added code to you PATH.

Once you’ve opened VS Code, open the terminal and run the following command:

cd host-app && npm install -D @originjs/vite-plugin-federation

and then run:

cd ../remote-app && npm install -D @originjs/vite-plugin-federation

Styling

To see styling like my examples, you need to add Tailwind CSS to both your remote and host applications. You can find instructions on how to do so here

How to Configure the Remote App

In order to be able to utilise modules and components from your remote applications, you need to configure your application to expose those modules, and your host app to consume them.

Use the following configurations in your apps to allow your components to be exposed and consumed – don’t worry about the components just yet, you’ll create them soon.

Host App – Vite.config.ts

In the host app, open vite.config.js and add the following configuration:

//host - vote.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import federation from "@originjs/vite-plugin-federation";


export default defineConfig({
  plugins: [
    react(),
    federation({
      name: "host_app",
      remotes: {
        remote_app: "http://localhost:5001/assets/remoteEntry.js",
      },
      shared: ["react", "react-dom"],
    }),
  ],
  build: {
    modulePreload: false,
    target: "esnext",
    minify: false,
    cssCodeSplit: false,
  },
});

Remote App – Vite.config.ts

In the remote app, open vite.config.js and add the following configuration:

// remote - vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import federation from "@originjs/vite-plugin-federation";

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: "remote_app",
      filename: "remoteEntry.js",
      exposes: {
        "./Button": "./src/components/Button",
        "./Header": "./src/components/Header",
      },
      shared: ["react", "react-dom"],
    }),
  ],
  build: {
    modulePreload: false,
    target: "esnext",
    minify: false,
    cssCodeSplit: false,
  },
  preview: {
    port: 5001,
    strictPort: true,
    cors: true,
  },
});

Explanation of Vite Configuration:

1. plugins: array where you tell Vite which plugins to use when it:

• Runs your dev server

• Builds your production bundle

Each plugin is basically a little (or big) piece of code that hooks into Vite’s build pipeline to add extra features – for example:

• Adding React JSX/TSX support (@vitejs/plugin-react)

• Enabling Module Federation (@originjs/vite-plugin-federation)

2. build: Controls how Vite produces the production build. You don’t need to worry too much about this for the purpose of this tutorial.

3. preview: Controls how the application is served / previewed:

• Useful in microfrontend setups where a fixed port and CORS enabled are needed so other apps can fetch your remote modules.

• strictPort: true ensures predictable networking – avoids “it works on my machine” issues with random ports.

The Vite Module Federation Plugin

You need to configure your Vite Module Federation plugin to inform it what components are to be consumed and exposed. Let’s take a look at the configured properties:

• name: The unique identifier for your remote application in a Module Federation setup. This is the name other applications (hosts) will use when they declare your app as a remote.

• filename: This is the name of the file that your host will load when it tries to retrieve your exposed modules.

• exposes: A mapping of public module names → local file paths. This is how you decide which parts of your code are available to be consumed remotely.

exposes: {
  "./Button": "./src/components/Button",
  "./Header": "./src/components/Header"
}

The key ("./Button") is the public module name – the name that other apps (the host) will use when importing the module from your remote.

How It Works:

• Key ("./Button") is the exposed identifier other apps can request.

• Value ("./src/components/Button") is the actual file path inside your project.

For example, if your remote’s name is "remote_app", the host can import like this:

import Button from "remote_app/Button";

Under the hood, "remote_app" matches the remote’s name in its federation() config and Button matches the "./Button" key in exposes.

• shared: dependencies that should be shared between the host and remote. It avoids shipping duplicate copies of large libraries (like React), ensuring the host and remote use the same instance – you can read more here about the possible configurations.

• remotes: A mapping of remote app names → the URL to their remoteEntry.js file. This tells the host where to fetch the exposed modules at runtime.

remotes: { remote_app: "http://localhost:5001/assets/remoteEntry.js" }

The key remote_app must match the name in the remote’s config.

The value is the full URL to the remote’s entry file (served in dev or deployed in prod). Remember we set strictPort:true earlier – this is why. We need to ensure we’re pointing at the correct domain & port.

Key Constraints On Exported Modules

Naming constraints and rules

The key in exposes ("./Button"):

• Must start with ./ (per Module Federation spec).

• Must be unique within the remote.

• Is case-sensitive.

• This is the public module path the host will request.

• Doesn’t have to match the filename, but matching is a good convention for ease of reading

The file you point to ("./src/components/Button"):

• Can export default, named exports, or both.

• The host can import default or named exports, same as any ES module:

    // Default export
    import MyButton from 'remote_app/Button';
  
    // Named export
    import { SpecialButton } from 'remote_app/Button';
  

The import name:

• Completely up to the host developer when importing a default export.

• Must match exactly for named exports.

How to Create the Remote Components

Ok, so you’ve created your project structure, and you’ve setup your vite.config.ts file to allow for exposing and consuming your shared assets. Next you will create the remote components.

Button Component

Let’s say you want to create a button component which will be shared across all your host applications, as you want to keep consistency. You can do this as below:

Navigate to the remote-app folder and create a new file called Button.tsx in src/components this will ensure it matches the configured federation plugin.

// remote - ./src/components/Button.tsx
import React from "react";

interface ButtonProps {
  text: string;
  onClick?: () => void;
}

const Button: React.FC<ButtonProps> = ({ text, onClick }) => {
  return (
    <button
      onClick={onClick}
      className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 hover:cursor-pointer"
    >
      {text}
    </button>
  );
};

export default Button;

You now have a re-usable Button component which has some base styling but allows for configuration of what the button does by passing in a onClick() argument.

Header Component

Sticking with the theme of consistency, you want to create a <header/> component which you can use on all your organisation’s websites, ensuring a themed appearance on all applications.

Like before, create a Header.tsx file within src/components/, and paste in the following code:

// remote - .src/components/Header.tsx
import React from "react";

const Header: React.FC = () => {
  return (
    <header className="bg-gray-800 text-white p-4">
      <h1 className="text-2xl">Remote App Header</h1>
      <p className="text-white">Hi, Grant</p>
    </header>
  );
};

export default Header;

I’ve kept it simple, as this tutorial is for proof of concept purposes rather than aesthetic / real-world components.

How to Consume the Remote Components Within the Host

You have your remote components created, so next you need to get them into your host application and begin using them. This is quite simple now that you’ve already setup your vite.config.ts.

You could import the components into your App.tsx, but this is not best practice as it can bloat your App.tsx (entry point component). I’ve opted to create a RemoteWrapperComponent which pulls in the remote components and handles the business logic.

RemoteComponentWrapper:

Create a file called RemoteComponentWrapper.tsx in src/components, pasting the following code:

// host - ./src/components/RemoteComponentWrapper.tsx
import React, { Suspense } from "react";

const RemoteHeader = React.lazy(() => import("remote_app/Header"));
const RemoteButton = React.lazy(() => import("remote_app/Button"));

const LoadingSpinner = () => (
  <div className="flex justify-center p-4">
    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
  </div>
);

export const RemoteComponentWrapper = () => {
  return (
    <div className="p-4">
      <Suspense fallback={<LoadingSpinner />}>
        <RemoteHeader />
      </Suspense>

      <div className="mt-4">
        <Suspense fallback={<LoadingSpinner />}>
          <RemoteButton
            text="Remote Button"
            onClick={() =>
              alert(
                "Well done you've imported the MF remote component successfully"
              )
            }
          />
        </Suspense>
      </div>
    </div>
  );
};

This component acts as a wrapper, handling some very simple business logic such as loading your remote components, handling a loading spinner whilst waiting for the remote, and passing your onClick event to the remote button.

Why Use React.lazy()?

The import with React.lazy isn’t required for Module Federation components – it’s more of a best practice for React apps when the remote module is:

• Loaded asynchronously at runtime, which Module Federation remotes almost always are

• You want React to handle the loading state and code-splitting gracefully – shown using the Suspense component

React.lazy + <Suspense> gives React a built-in way to pause rendering until the component is ready. Without it, you’d need manual loading state handling.

It also keeps your components looking “normal.” With React.Lazy, <RemoteHeader/> is just another component in your JSX.

Without it, you’d need something like:

const [Header, setHeader] = useState(null);

useEffect(() => {
  import("remote_app/Header").then(m => setHeader(() => m.default));
}, []);

return Header ? <Header /> : <LoadingSpinner />;

…which is messier and repeats for every remote component.

How to Handle TypeScript Errors

Inside your RemoteWrapperComponent you’re going to see the following error on your Button and Header imports.

Cannot find module 'remote_app/Button' or its corresponding type declarations.ts (2307)

You get this error because the remote modules are not defined with types, so both your remote and your host doesn’t know what this imported component is, nor does it know its structure (a key part to TypeScript development).

To fix this you will need to provide your host app with custom types.

Add a Type Declaration File

A type declaration file (if you’re unaware of them) has a .d.ts suffix.

Within your host app, create a file in src/types called remote-app.d.ts. Naming the file in this way lets us know the declarations within are related to the remote-app. This is useful especially when consuming multiple remotes.

Copy and paste the following declarations into your remote-app.d.ts file:

// host - ./src/types/remote.d.ts
declare module "remote_app/Button" {
  const Button: React.FC<{
    text: string;
    onClick?: () => void;
  }>;
  export default Button;
}

declare module "remote_app/Header" {
  const Header: React.FC;
  export default Header;
}

Now if you return to your RemoteWrapperComponent your errors should be gone. If they aren’t, restart your IDE (in VS Code you can open your command palette and select Restart Typescript Server).

How to Add RemoteWrapperComponent to App.tsx

Import the RemoteWrapperComponent into App.tsx.

I’ve removed all the boilerplate code and replaced with some basic styling to allow us to easily see what is the host, and what are the remote components.

Copy and paste the following code into your host App.tsx:

// host - ./src/App.tsx
import viteLogo from "/vite.svg";
import "./App.css";
import "./index.css";
import { RemoteComponentWrapper } from "./components/RemoteComponentWrapper";

function App() {
  return (
    <>
      <div className="px-6 border-2">
        <div className="flex justify-center items-center">
          <img src={viteLogo} alt="Example" />
        </div>
        <h1 className="text-2xl">Host Application</h1>
        <p>
          {" "}
          Welcome to the Host application, below are the components pulled from
          the remote application
        </p>
        <RemoteComponentWrapper />
      </div>
    </>
  );
}

export default App;

How to Serve the Remote App and Run Your Host

Due to how Vite works, you need to build the application before you preview / serve the application.

Make sure that your package.json file’s scripts block looks like this:

# remote-app
"scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview --port 5001 --strictPort",
    "serve": "npm run build && npm run preview"
  },

# host-app
"scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview --port 5000 --strictPort",
    "serve": "npm run build && npm run preview"
  },

In your terminal run:

cd ./remote-app

# run a build, and run / load the app on port 5000
npm run serve

You should see something like this:

Now you can run the host application by doing the same:

# change to the host-app in another terminal 
cd ../host-app

# build and run the application
npm run serve

If you open the localhost:5000 you should now see your host application with the remote components:

Next, if you click the button, you can see that it shows the message you configured from within the RemoteWrapperComponent:

The True Power of Micro Frontends

The true power of micro frontends lies in their ability to update the remote components, without the need to rebuild the host. To fully demonstrate this, keep the host running, and update the Button component on your remote-app.

Let’s update the remote components. Use the below code to update both the Button and Header components:

// remote - ./src/components/Header.tsx
import React from "react";

const Header: React.FC = () => {
  return (
    <header className="bg-gray-800 text-white p-4">
      <h1 className="text-2xl">Updated Remote App Header</h1>
      <p className="text-white">Hi, Grant</p>
    </header>
  );
};

export default Header;

// remote - ./src/components/Button.tsx
import React from "react";

interface ButtonProps {
  text: string;
  onClick?: () => void;
}

const Button: React.FC<ButtonProps> = ({ text, onClick }) => {
  return (
    <button
      onClick={onClick}
      className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 hover:cursor-pointer"
    >
      {text}
    </button>
  );
};

export default Button;

Once you’ve updated the remote components, run the following command in your remote-app folder:

npm run serve

Next, refresh your host app in the browser and you will see the updated app:

The update to the remote components is visible immediately, without restarting or rebuilding the host app. This highlights a key benefit of micro frontends: shared components are fetched from their own server via the remote.js file, enabling independent updates.

Final Thoughts

You've successfully built and deployed a micro frontend architecture – congrats! This basic implementation demonstrates the true power of Module Federation and the ability to update shared components without needing to rebuild and redeploy the entire host application.

This independence can dramatically accelerate development cycles and empower teams to work more autonomously.

I hope you’ve learned something from this article, and as always for more tutorials and discussions, connect with me on twitter/x.

We just published a course on the freeCodeCamp.org YouTube channel that will teach you all about Vite, the speed-focused build tool that's designed for today's modern frameworks. This beginner-friendly course will walk you through everything you need to know to get up and running with Vite, from creating your first project to deploying it for production. With clear explanations and hands-on demonstrations, you'll gain a solid understanding of what makes Vite so fast and why developers everywhere are making the switch.

So, what exactly is Vite? Vite is a next-generation frontend build tool that focuses on performance and developer experience. Created by Evan You (the creator of Vue.js), Vite leverages modern browser capabilities and JavaScript features to deliver near-instant project startup and lightning-fast hot module replacement (HMR). Unlike traditional bundlers that pre-bundle your entire project before serving it, Vite serves source files as native ES modules during development. This drastically reduces startup time, especially in large projects, and ensures that changes you make are reflected immediately in the browser without a full page reload.

This course covers the core use cases and benefits of Vite, including how to:

• Build React apps quickly and efficiently using Vite’s minimal setup.

• Integrate TypeScript seamlessly into your development workflow.

• Manage environment variables and static assets effectively.

• Configure and extend Vite with custom options and plugins.

• Optimize your app for production with Vite’s powerful build tools.

You’ll start by creating your first React project with Vite in just minutes. From there, you’ll dive into essential topics like handling static files, using environment variables (including those built into platforms like Scrimba), and setting up a TypeScript-powered development environment. You’ll also learn how to build your app for production and explore Vite’s flexible configuration system, which allows you to tailor your setup to match your project’s specific needs.

One of the standout segments of this course is the deep dive into what makes Vite fast. You'll learn about the technical innovations behind Vite’s performance, such as native ES modules, optimized dependency pre-bundling, and intelligent caching. You’ll also see how Vite compares to traditional tools like Webpack in terms of both speed and developer experience.

Watch the full course on the freeCodeCamp.org YouTube channel (1-hour watch).

Last week, I came across one that involved building a "Wheel of Names." It reminded me of a similar project I built years ago using Flash and ActionScript 3—technologies that have since fallen out of use. So, I thought it would be fun to recreate the wheel, but this time using a modern tech stack.

In this tutorial, I’ll walk you through how I built it from scratch.

Table of Contents

• Project Description

• Why Would I Need a Wheel of Names?

• The Plan for the App

  • Application Features

  • The Tech Stack

• Let’s Build the App

  • Project Structure

  • How to Build the Components

• How to Deploy the App to Vercel

• Wrapping Up

Project Description

This will be an app that I presume is inspired by the TV show Wheel of Fortune. In the TV show, contestants try to figure out a short phrase by guessing letters. If they guess correctly, the letter will be revealed. They spin the wheel to determine how much money each correct letter is worth.

Wheel of Names is similar, but allows us to create a virtual wheel, putting our own names on it. We can then virtually spin it to determine a winner.

GitHub Repo

If you want to skip the reading, here 💁 is the GitHub repository with a detailed README 🙌. Here you can see the live demo.

Why Would I Need a Wheel of Names?

First of all, it’s a lot of fun to build your own! A practical, real-life use case would be for running lottery-style games where you need to pick a random winner.

For example, imagine you’re part of an agile team that holds retrospectives every two weeks, and you need to randomly choose a team member to lead each session. Just add everyone’s name to the participants list, spin the wheel, and let it decide for you! 🎡

The Plan for the App

The app is made up of several components, with the main feature being the spinning wheel. The wheel will have a section for each participant, and each section will be uniquely coloured, with its size proportionally calculated based on the number of participants. Once the spinning animation finishes, the winner will be revealed with a fun, confetti-style popup.

Other parts of the app include a section to enter the question or phrase that the spin is for, as well as controls for adding participant names and displaying them in a neatly organised list.

The list will offer options to sort and shuffle the names. The sorting will arrange the names alphabetically, while the shuffle option will randomise them. You can also delete any previously added participant.

All of these changes are dynamically reflected on the wheel component, ensuring that the wheel stays up-to-date with the latest participant list.

Here are a few screenshots that showcase what the app will look like once it's complete.

Here are some YouTube videos I recorded after completing the app, showcasing its features in action.

Application features:

I. Question

1. This is where users can submit a question or phrase that will determine the focus of the spins.

2. Any changes made in the input field are saved when the user clicks outside of it (on focus out).

II. Wheel

1. The wheel component spins with an easing animation and determines the winner.

2. The spin direction can be adjusted using the buttons, for either clockwise or counterclockwise rotation.

3. Each adjacent sector is uniquely coloured, and their sizes are calculated proportionally to the number of participants.

III. Add Participants

1. The participant entry area includes an input field for entering a participant's name and an 'ADD' button to add it to the participants list.

2. To add participants more quickly, the user can press the ENTER key on the keyboard.

IV. Participants List

1. This section displays all the participants' names.

2. The list offers options to sort the names alphabetically or shuffle them randomly, with both actions dynamically updating the wheel component.

The Tech Stack

Here’s a list of the main technologies we’ll be using:

• Bun – A fast JavaScript bundler and package manager, known for its speed and simplicity.

• Vite – A build tool that provides a fast development environment, particularly optimised for modern web projects.

• React – A popular JavaScript library for building user interfaces, enabling efficient rendering and state management.

• TypeScript – A superset of JavaScript that adds static typing, improving code quality and maintainability.

• styled-components – A library for writing CSS-in-JS, allowing styles to be scoped to components and providing a more dynamic approach to styling.

• canvas – A powerful HTML element used to draw graphics, animations, and other dynamic content directly on the web page.

• canvas-confetti – A JavaScript library for adding fun, celebratory confetti animations to the canvas, perfect for announcing winners.

Let’s Build the App

From this point onward I will guide you through the process I followed when building this app.

Project Structure

The project structure is quite straightforward, thanks to React and styled-components, which make this modular approach easy to implement. You can check out the project structure in my GitHub repo.

Below, I’ll walk you through the reasoning behind the structure and explain the decisions I made for each part.

• main.tsx: The entry point of the React app created with Vite.

• App.tsx: The parent component that includes all other components and handles participant name management (adding, removing, sorting, shuffling).

• Header.tsx: Top part of the app, which renders the app title.

• Participants.tsx: Renders the controls for adding and displaying participants. It includes a validation function to prevent empty or invalid names.

• Question.tsx: Displays the question section, managing state and basic keyboard and click functionality.

• Wheel.tsx: The core component containing the animation logic, sector size/colouring, and rendering participant names. It uses the canvas element for smooth spinning and integrates confetti to announce the winner.

• utils.ts: A file with helper functions used across the app.

• styles.ts: Contains shared styled components, exported for use throughout the app.

CSS Files and Configs

The remaining files in the project include standard boilerplate CSS styles from the initial Vite setup, along with configuration files for Vite, TypeScript, Prettier, and ESLint. These configurations are commonly used in modern projects and are not specific to this app, so I won't dive into them here. You can easily find documentation for each online.

How to Build the Components

In this section, we will go through the process of building each component of the application, step by step. By the end, you’ll have a fully functional app with modular, self-contained components.

1. App component

The App component serves as the central container for the entire application. It encapsulates all the core building blocks and is responsible for managing the state of the participants' names. Beyond rendering the UI, it handles key application logic, such as adding, removing, sorting, and shuffling participants.

The component uses local state to hold the list of names. This state is updated through callback functions that are triggered by interactions in the child components — specifically, the Participants and Wheel components.

The primary handler functions, handleAddName and handleRemoveName, manage adding and removing names from the list. Additionally, there are two other handlers dedicated to manipulating the order of the names: one for sorting (handleSortNames) and one for shuffling (handleShuffleNames). These handlers provide flexibility in how the list of participants is displayed and interacted with in the app.

const [names, setNames] = useState<string[]>([]);

  const handleAddName = (name: string) => {
    if (names.length < MAX_PARTICIPANTS) {
      setNames([...names, name]);
    }
  };

  const handleRemoveName = (index: number) => {
    setNames(names.filter((_, i) => i !== index));
  };

  const shuffleNames = () => {
    const shuffledNames = [...names].sort(() => Math.random() - 0.5);
    setNames(shuffledNames);
  };

  const sortNames = () => {
    const sortedNames = [...names].sort((a, b) => a.localeCompare(b));
    setNames(sortedNames);
  };

A crucial part of the component is the MAX_PARTICIPANTS constant, which sets a limit on the number of participants allowed. This ensures that the app doesn't exceed a certain number of entries, maintaining performance and usability.

The rendering structure of this component looks as follows:

 return (
    <>
      <Header />
      <Question />
      <Main>
        <Participants
          handleAddName={handleAddName}
          handleRemoveName={handleRemoveName}
          shuffleNames={shuffleNames}
          sortNames={sortNames}
          names={names}
        />
        <Wheel participants={names} />
      </Main>
    </>
  );

2. Header component

The Header component is the simplest part of the application. Its primary role is to display the title at the top of the page. This component is essential for setting the tone and branding of the application. Despite its simplicity, it lays the foundation for structuring the UI and can be easily customised or extended in the future.

Here is how it looks:

3. Question component

The component that displays the input for entering a question or phrase is relatively simple. It renders a text field and utilises a few handler functions to enhance the user experience. These handlers manage focus behaviour: setting focus when the input field is clicked, removing focus when the user clicks outside the field, and allowing the user to use the ENTER or ESCAPE keys to submit or cancel their input, respectively.

4. Participants

In this part of the app, we render the list of all added participants. The component includes a local validation function that runs each time before adding a new participant, ensuring that the input meets the necessary criteria (for example, no duplicates or empty names).

We also leverage built-in HTML attributes to dynamically enable or disable buttons based on the state of the participants list. For example, the "Sort" and "Shuffle" buttons are disabled when the list is empty, while the "Add" button is disabled once the maximum participant limit (MAX_PARTICIPANTS) has been reached. This ensures a smooth and intuitive user experience by preventing invalid actions.

You’ve probably already noticed how we use a utility function from the utils.ts file to capitalise the participant names before displaying them. This ensures that all names are presented in a consistent and user-friendly format.

This happens inside a map() loop, where we iterate over the names data structure and display each participant's name in a separate row within the list component. The utility function is applied during this iteration to ensure that the names are properly capitalised before rendering.

5. Wheel component

This is the largest component in our app. At the top, you'll find the styles required to position the winning popup, which is accompanied by confetti when a winner is selected. Below that, we define an array containing all the possible colours used to color the wheel sectors. Afterward, we move into the component code itself.

The component utilises several states to ensure the spinning animation behaves as expected. Additionally, it manages when to trigger and display the winner popup, with the winner's name shown inside. These states and handlers work together to create a smooth and interactive experience.

 const [spinning, setSpinning] = useState(false);
  const [rotation, setRotation] = useState(0);
  const [spinDirection, setSpinDirection] = useState<
    'clockwise' | 'counterclockwise'
  >('clockwise');
  const [showPopup, setShowPopup] = useState(false);
  const [popupWinner, setPopupWinner] = useState<string | null>(null);

The drawWheel() method is responsible for rendering the wheel with the specified number of sectors on the canvas. This method relies heavily on the canvas element and its associated API to draw each sector and participant's name. We also use our helper function to capitalise the participants' names in the wheel, ensuring consistency with the list component.

When the "Spin" button is clicked, the startSpin() method is triggered. This is where the animation logic is implemented. We generate a random number of rotations, ranging from 5 to 10 full rotations, to make the spin feel unpredictable.

The direction of the spin is determined by the user's selection, allowing the wheel to spin either clockwise or counterclockwise. We also set the spin duration to 6000ms (6 seconds) for a smooth and engaging animation.

To enhance the realism of the animation, we apply an easing function that implements the "Ease-out cubic" effect, which causes the wheel to gradually slow down as it reaches the end of the spin.

 const easing = (t: number) => {
      // Ease-out cubic
      return 1 - Math.pow(1 - t, 3);
    };

The animation is handled by an inner function called animate(), which utilises the requestAnimationFrame API, a feature supported by all modern browsers for smooth, high-performance animations. Inside this function, we calculate the elapsed time and the current rotation, updating the component's state accordingly to ensure the wheel spins smoothly.

During each animation frame, we also invoke the determineWinner() function, which is defined below. This function calculates the winning sector by determining which sector the wheel lands on at the end of the spin. It then updates the popup state to display the winner’s name inside the popup.

const determineWinner = (finalRotation: number) => {
    const sliceAngle = 360 / numSectors;
    const normalizedRotation = ((finalRotation % 360) + 360) % 360;
    const winningSector = Math.floor(normalizedRotation / sliceAngle);

    setPopupWinner(participants[winningSector]);
    setShowPopup(true);
  };

Changing the direction of the spin is straightforward. We simply update the component’s state based on the value of the button’s label, which toggles between "Clockwise" and "Counterclockwise." By setting the state accordingly, we can easily control the spin direction with a single click of the button.

The remaining code before the rendering part of this component includes an effect that controls the visibility of the confetti popup. The startConfetti function is responsible for initiating the confetti animation when a winner is selected. This effect ensures that the confetti animation is triggered and displayed at the right moment, adding a celebratory touch to the experience.

And with all that we are ready to render our Wheel component as it follows:

return (
    <div>
      <canvas
        ref={canvasRef}
        width={400}
        height={400}
        style={{ borderRadius: '50%', border: '2px solid black' }}
      />
      <ButtonsContainer>
        <Button
          onClick={changeSpinDirection}
          disabled={participants.length === 0 || spinning}
        >
          {capitalize(spinDirection)}
        </Button>
        <Button
          onClick={startSpin}
          disabled={participants.length === 0 || spinning}
        >
          Spin
        </Button>
      </ButtonsContainer>
      {showPopup && popupWinner && (
        <Popup>
          <h2>Congratulations!</h2>
          <h3>{capitalize(popupWinner)}</h3>
        </Popup>
      )}
    </div>

How to Deploy the App to Vercel

Finally 🎉 we’re ready to deploy our app.

I used Vercel for this deployment because it offers a fast, free, and easy way to deploy web apps. If you'd like a more detailed guide on how to deploy with Vercel, check out my previous tutorial for step-by-step instructions.

Wrapping Up

I hope you found this process as interesting and enjoyable to follow as it was for me to create!

Now, let’s take a moment to reflect on what we’ve accomplished and highlight a few key takeaways that could prove useful for future projects.

1. Modular Design: Breaking the app into small, manageable components made it easier to maintain and scale.

2. React and Styled-Components: These tools streamlined the development, allowing for dynamic styling and efficient UI management.

3. Canvas for Animations: Leveraging the canvas element enabled smooth and visually appealing animations.

4. Vercel Deployment: Vercel's simplicity and speed made it the ideal choice for quickly deploying the app.

This project highlighted the power of modern tools like React, TypeScript, and canvas, all while ensuring the app stayed modular and easy to maintain.

Thanks for reading! 🙏

As a backend framework, Laravel actually offers a tool to help you do this, called Inertia. Here's what the docs say about it:

It bridges the gap between your Laravel application and your modern Vue or React frontend, allowing you to build full-fledged, modern frontends using Vue or React while leveraging Laravel routes and controllers for routing, data hydration, and authentication — all within a single code repository.

But what if you don't want to use such a tool? And instead, you just want to use React.js as a frontend library and have a simple Laravel-powered backend?

Well, in this article, you will learn how to use React.js with Laravel as a backend by building a draggable tasklist app.

For this full-stack single-page app, you'll use Vite.js as your frontend build tool and the react-beautiful-dnd package for draggable items.

By the end of this article, you will have a single-page app for managing tasks, which will look like this:

Captured from a local working project

In this article, we'll create a dynamic page that will have a list of tasks, each of which will belong to a specific project. This way, the user will be able to select a project, and only the tasks of the selected project will be shown on the page. The user can also create a new task for the current project, as well as edit, delete and reorder tasks by dragging and dropping them.

Table of Contents:

• Prerequisites
• The Backend: How to Install Laravel
• How to Create Models and Migrations
• How to Create Seeders
• How to Connect to the MySQL Database
• Service Injection
• Web and API Routes in Laravel
• Validation Requests in Laravel
• How to Write a Controller that Uses Services
• How to Test the API Routes
• The Frontend: How to Install the Packages
• How to Configure Vite.js
• React.js – Initial Integration
• How to Add CSS
• A Service for the API requests
• React.js Components
• Final Results
• Conclusion

Prerequisites

Before following along, it would be helpful to have a basic understanding of React.js, Laravel, and familiarity with fundamental web development concepts.

You'll need the following tools for the app that we'll build in this article:

• PHP 8.1 or above (run php -v to check the version)
• Composer (run composer to check that it exists)
• Node.js 18 or above (run node -v to check the version)
• MySQL 5.7 or above (run mysql --version to check if it exists, or follow the docs)

Additional (optional) tools that you can use:

• Postman – a program with a UI for testing the API routes
• curl – a CLI command for testing the API routes

We'll start by building out the backend, and then move to the frontend.

The Backend: How to Install Laravel

First, if you don't have it already, you'll need to install the Laravel framework on your local machine.

One way to install Laravel is by using a popular dependency manager for PHP called Composer. Here's the command to do so:

composer create-project laravel/laravel tasklist

This will install the latest stable version of Laravel in your local machine (currently it's version 10).

The tasklist in the command is the app's root folder name, which you can set to whatever you want.

At this point, you can cd into the project's folder and run the backend app without needing to have a virtual server set up:

cd tasklist/ && php artisan serve

The artisan in the above command is a CLI tool included in Laravel. It exists at the root of your Laravel application as the artisan script file, which provides a number of helpful commands that can assist you while you build your application.
We'll use it in this article often.

Visit http://127.0.0.1:8000 in your browser to see the default page. It should look like this:

Laravel welcome page

How to Create Models and Migrations

Now, let's create Project and Task models, as well as migrations for them.

Models are the way your app entities should be defined, and migrations are like schema definitions for storing the records of those entities in the database.

You can create model and migration files manually as well as generate them using the artisan command:

php artisan make:model Project -m
php artisan make:model Task -m

The -m argument will automatically generate a migration file using the provided model name.

Keep the command execution sequence as it is, so the Project's migration later can run before the Task's migration.

This is important, because the projects and tasks tables should have a one-to-many relationship (1-N): each task will refer to a single project, or, in other words, each project can have multiple tasks.

Set the Project model's $fillable fields and the task() relationship method as below:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\HasMany;

class Project extends Model
{
    use HasFactory;

    protected $table = 'projects';
    public $timestamps = false;
    protected $fillable = [
        'id', // primary key, auto-increment, integer
        'name', // string
    ];

    // a project can have multiple tasks
    public function tasks(): HasMany
    {
        return $this->hasMany(Task::class);
    }
}

By default, the $timestamps public property has a true value, which is coming from the parent Model class. This means that the created_at and updated_at columns in your database table will be maintained automatically by Eloquent (the ORM included in Laravel).

But you can customize it by changing its value to false. We don't need to have created_at and updated_at fields in the projects table, so we'll set the $timestamps to false.

Set the Task model's $fillable fields, project() relationship method, and created accessor. An accessor in Laravel is like a function between the database and your code, that can access the already fetched database record and modify it.

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\BelongsTo;
use Illuminate\Database\Eloquent\SoftDeletes;

class Task extends Model
{
    use HasFactory, SoftDeletes;

    protected $table = 'tasks';
    protected $fillable = [
        'id', // primary key, auto-increment, integer
        'project_id', // foreign key, integer

        'priority', // integer
        'title', // string
        'description', // text
    ];
    protected $appends = [
        'created',
    ];

    // each task belongs to a single project
    public function project(): BelongsTo
    {
        return $this->belongsTo(Project::class);
    }

    public function getCreatedAttribute()
    {
        return $this->created_at->diffForHumans();
    }
}

Above, in the Task model, there is an accessor called created. For having an accessor, we have the created field in the $appends array, and also a public function getCreatedAttribute().

In get**<WordsInCamelCase>**Attribute() function there is logic that will run to modify the already fetched database record.

In our case the getCreatedAttribute() function will return a human-friendly and readable time difference between the current time and the given time. For example, "3 mins ago" or "4 months ago".

Now that the models are ready, let's set up the migrations.

First, set up a migration for the projects table:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    public function up(): void
    {
        Schema::create('projects', function (Blueprint $table) {
            $table->id();
            $table->string('name');
        });
    }

    public function down(): void
    {
        Schema::dropIfExists('projects');
    }
};

Then set up a migration for the tasks table:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    public function up(): void
    {
        Schema::create('tasks', function (Blueprint $table) {
            $table->id();

            $table->foreignId('project_id')->nullable()->constrained();

            $table->integer('priority');
            $table->string('title');
            $table->text('description')->nullable();

            $table->timestamps();
            $table->softDeletes();
        });
    }

    public function down(): void
    {
        // drop existing foreign keys
        Schema::table('tasks', function (Blueprint $table) {
            if (Schema::hasColumn('tasks', 'project_id')) {
                $table->dropForeign(['project_id']);
            }
        });

        // drop the table
        Schema::dropIfExists('tasks');
    }
};

The tasks table has a foreign key project_id, which is a reference to the projects table. So it's a good practice to update the down() method too, to be sure that the project_id foreign will be dropped before dropping the actual projects table.

There is also a priority field, which will be a non-nullable natural number for ordering the tasks. And optionally, you can add a soft deletion feature to the Task model.

How to Create Seeders

Now we need to add dummy data to the projects and tasks tables. To seed some data in the database, you can use Laravel seeders. This allows you to create dummy data to use in your database.

If you want to read more about how this works, you can check out the docs here.

Laravel provides a way to generate those files by using make:seeder artisan command:

php artisan make:seeder ProjectsSeeder
php artisan make:seeder TasksSeeder

So with the above commands, you'll have database/seeders/ProjectsSeeder.php and database/seeders/TasksSeeder.php files created.

At first, you'll need to set up the ProjectsSeeder to add a few projects to the projects table. Then you can set up the TasksSeeder to add tasks to the tasks table.

As I mentioned at the beginning, each task will belong to a specific project. From a relational database perspective, this means that each entry in the tasks table will link to a specific entry in the projects table. Here's the importance of having a project_id foreign key in the tasks table to be able to relate each task to a specific project as well as retrieve the specific project's tasks.

You can imagine the database structure by looking at the following visuals:

generated by PHPStorm IDE

Using the example below, you can generate 3 projects:

<?php

namespace Database\Seeders;

use App\Models\Project;
use Illuminate\Database\Seeder;

class ProjectsSeeder extends Seeder
{
    public function run(): void
    {
        for ($i = 1; $i <= 3; $i++) {
            Project::create([
                'name' => "Project $i",
            ]);
        }
    }
}

Next, set up TasksSeeder. You'll run all the seeder files after setting them up, and they will run one by one. That being said, at this point your ProjectsSeeder is ready to create a few projects.

By imagining it, the next step will be generating the tasks, each of them will have a reference to one of the already existing projects by its project_id field.

Using the example below, you can generate 10 projects:

<?php

namespace Database\Seeders;

use App\Models\Project;
use App\Models\Task;
use Illuminate\Database\Seeder;

class TasksSeeder extends Seeder
{
    public function run(): void
    {
        $project_ids = Project::all()->pluck('id')->toArray();

        $now = now();
        $tasks = [];
        $project_priorities = [];
        foreach ($project_ids as $project_id) {
            $project_priorities[$project_id] = 0;
        }

        for ($i = 1; $i <= 10; $i++) {
            $project_id = $project_ids[array_rand($project_ids)];
            $project_priorities[$project_id]++;

            $tasks[] = [
                'project_id' => $project_id,
                'priority' => $project_priorities[$project_id],
                'title' => "Task " . $project_priorities[$project_id],
                'description' => "Description for Task " . $project_priorities[$project_id],

                'created_at' => $now,
                'updated_at' => $now,
            ];
        }

        Task::insert($tasks);
    }
}

The above code just grabs all the project IDs, then randomly chooses a project for each task. In the end, it inserts all the tasks into the tasks table.

As you may have noticed, we're inserting $tasks into the tasks table using the insert() static function, which allows us to insert all the items into the database table with a single query.

But it has a downside as well: it doesn't manage created_at and updated_at fields. That's why there's a need to set up those fields manually by assigning them the same $now timestamp.

Now, when you have all the seeders ready, you need to register them into the DatabaseSeeder.

<?php

namespace Database\Seeders;

use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    public function run(): void
    {
        $this->call([
            ProjectsSeeder::class,
            TasksSeeder::class,
        ]);
    }
}

How to Connect to the MySQL Database

Before running migrations and seeds, create a MySQL database and set up the appropriate credentials in the .env file. If there is not a .env, then create it and paste the .env.example file's content into it.

After setting up the database credentials, you'll have these kinds of environment variables:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE="<DATABASE_NAME>"
DB_USERNAME="<USERNAME>"
DB_PASSWORD="<PASSWORD>"

After setting up environment variables, optimize the cache:

php artisan optimize

Now you'll be able to create projects and tasks tables in the MySQL database, setup their structure, and add initial records with a single command:

php artisan migrate:fresh --seed

In the above command, the migrate:fresh argument will drop all tables from the database. Then it will execute the migrate command, which will run your migrations to create projects and tasks tables appropriately.

With the --seed argument, it will run ProjectsSeeder and TasksSeeder after the migrations. That being said, it will empty your database for you, and will create all the tables and fill all the necessary dummy data.

After running the command, you'll have these kinds of database records:

A screenshot from the PHPStorm IDE

Service Injection

Now let's create a controller and a service classes to manage all the task features, such as listing, creating, updating, deleting, and reordering the tasks.

At first, use the below command to generate a controller.

php artisan make:controller TaskController

In order not to place all the code in the controller, you can keep only the main logic in it, and move the other logic implementations to another class file.

Those classes are generally called services, and using service implementations in a controller method is called service injection (it comes from the term dependency injection).

One of the main advantages of using services is that it helps you create a maintainable codebase.

You can inject your service class into the controller's construction method as an argument, so after each controller execution (when a controller's __construct() method runs) you can initialize an object of service. This means that you can access your service's functions right in your controller.

Now, let's create two separate service classes, which will be used in the TaskController.

Manually create a app/Services/ProjectService.php service class, which will be responsible for the project-related logic.

<?php

namespace App\Services;

use App\Models\Project;
use Illuminate\Database\Eloquent\Collection;

class ProjectService
{
    public function getAll(): Collection
    {
        return Project::all();
    }
}

The second service class will be the app/Services/TaskService.php, which will be responsible for doing task manipulations:

<?php

namespace App\Services;

use App\Models\Task;
use Illuminate\Support\Facades\DB;

class TaskService
{
    public function list(int $projectId)
    {
        return Task::with('project')->where('project_id', $projectId)
            ->orderBy('priority')->get();
    }

    public function getById(int $id)
    {
        return Task::where('id', $id)->with('project')->first();
    }

    public function store($data): void
    {
        $count = Task::where('project_id', $data['project_id'])->count();
        $data['priority'] = $count + 1;

        Task::create($data);
    }

    public function update(int $id, array $data): void
    {
        $task = $this->getById($id);
        if (!$task) { return; }

        $task->update($data);
    }

    public function delete(int $id): void
    {
        $task = $this->getById($id);
        if (!$task) { return; }

        $task->delete();

        $tasks = Task::where('project_id', $task->project_id)
            ->where('priority', '>', $task->priority)->get();
        if ($tasks->isEmpty()) {
            return;
        }

        $when_then = "";
        $where_in = "";
        foreach ($tasks as $task) {
            $when_then .= "WHEN ".$task->id
                ." THEN ".($task->priority - 1)." ";
            $where_in .= $task->id.",";
        }

        $table_name = (new Task())->getTable();
        $bulk_update_query = "UPDATE `".$table_name
            ."` SET `priority` = (CASE `id` ".$when_then."END)"
            ." WHERE `id` IN(".substr($where_in, 0, -1).");";

        // there is no way to be SQL injected here
        // because all the values are not provided by the user
        DB::update($bulk_update_query);
    }

    public function reorder(int $project_id, int $start, int $end): void
    {
        $items = Task::where('project_id', $project_id)
            ->orderBy('priority')->pluck('priority', 'id')->toArray();

        if ($start > count($items) || $end > count($items)) {
            return;
        }

        $ids = [];
        $priorities = [];
        foreach ($items as $id => $priority) {
            $ids[] = $id;
            $priorities[] = $priority;
        }

        $out_priority = array_splice($priorities, $start - 1, 1);
        array_splice($priorities, $end - 1, 0, $out_priority);

        $when_then = "";
        $where_in = "";
        foreach ($priorities as $out_k => $out_v) {
            $id = $ids[$out_v - 1];
            $when_then .= "WHEN ".$id." THEN ".($out_k + 1)." ";
            $where_in .= $id.",";
        }

        $table_name = (new Task())->getTable();
        $bulk_update_query = "UPDATE `".$table_name
            ."` SET `priority` = (CASE `id` ".$when_then."END)"
            ." WHERE `id` IN(".substr($where_in, 0, -1).")"
            ." AND `deleted_at` IS NULL;"; // soft delete

        DB::update($bulk_update_query);
    }
}

In the above TaskService class, you'll use the following functions in the TaskController.

• list: fetches tasks for a given project ID, including the related project, and orders them by priority.
• getById: retrieves a specific task by its ID, including the related project.
• store: stores a new task, calculating the priority based on existing tasks for the same project.
• update: updates an existing task by its ID.
• delete: deletes a task by its ID and adjusts the priorities of remaining tasks in the same project.
• reorder: changes the priorities of tasks within a project, (handles soft delete as well with deleted_at IS NULL).

Web and API Routes in Laravel

Now you can add routes to test the methods you've already written. In this project, we have a stateless app on the frontend which requests API routes for getting JSON data, so it will follow RESTful principles (GET, POST, PUT, DELETE methods). Only the initial HTML page will be retrieved as a whole web page.

So now, set up a route in routes/web.php for the initial single-page:

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\TaskController;

Route::group(['prefix' => '/', 'as' => 'tasks.'], function () {
    Route::get('/', [TaskController::class, 'index'])->name('index');
});

Set up API routes in routes/api.php like this:

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\TaskController;

Route::group(['prefix' => '/tasks', 'as' => 'tasks.'], function () {
    Route::get('/', [TaskController::class, 'list']);
    Route::get('/{id}', [TaskController::class, 'get'])
        ->where('id', '[1-9][0-9]*');
    Route::post('/', [TaskController::class, 'store']);
    Route::put('/{id}', [TaskController::class, 'update'])
        ->where('id', '[1-9][0-9]*');
    Route::delete('/{id}', [TaskController::class, 'delete'])
        ->where('id', '[1-9][0-9]*');
    Route::put('/', [TaskController::class, 'reorder']);
});

We have all the API routes in the routes/api.php instead of the routes/web.php because in the web.php file, all the routes by default are CSRF protected. So, in a stateless app, usually you won't need that – that's why api.php was invented in Laravel.

As you can see, there is a "task" prefix for all API routes. It's optional to have a prefix, but it's just a good practice. And for the specific API routes, there are regex validations for accepting only natural numbers as project IDs.

Don't forget to refresh route caches after the above changes. It's important to remember that Laravel (version 10 in this case) reads routes from the cached bootstrap/cache/routes-v7.php file, and they won't be updated automatically right after your changes. It just generates one if it hasn't cached yet.

Use the below command to refresh Laravel caches as well as the route caches:

php artisan optimize

Validation Requests in Laravel

Before writing controller methods, you'll need to add some validation request files. You can do that manually or by just using the artisan command:

php artisan make:request Task/CreateTaskRequest
php artisan make:request Task/ListTasksRequest
php artisan make:request Task/ReorderTasksRequest
php artisan make:request Task/UpdateTaskRequest

After creating them, you'll need to set up validation rules for each request.

Validation rules in Laravel are a way to describe how to expect to get incoming HTTP data. If the data matches the rules, then it passes the validation – otherwise, Laravel will return a failure.

Laravel provides a set of rules you can use to check incoming data. A field of the incoming request can have multiple rules.

One way to write validation rules for a single field is concatenating those rules by a "|" character.

Below are the validation rules for creating a new task:

return [
    'project_id' => 'required|integer|exists:projects,id',
    'title' => 'required|string|max:255',
    'description' => 'nullable|string',
];

Below is the validation rule for listing project tasks:

return [
    'project_id' => 'required|integer|exists:projects,id',
];

Below are the validation rules for tasks reordering:

return [
    'project_id' => 'required|integer|exists:projects,id',
    'start' => 'required|integer',
    'end' => 'required|integer|different:start',
];

Below are the validation rules for updating a task:

return [
    'title' => 'required|string|max:255',
    'description' => 'nullable|string',
];

Don't forget to return true in the authorize() method in all validation classes:

public function authorize(): bool
{
    return true;
}

This function is usually designed to determine if the user is authorized to make the request. As we don't use authentication as well as authorization stuff in the app, it should return true for all the cases.

How to Write a Controller that Uses Services

As the last step in the backend part, it's time to write controller methods for each API route, which will use service functions.

<?php

namespace App\Http\Controllers;

use App\Http\Requests\Task\CreateTaskRequest;
use App\Http\Requests\Task\ListTasksRequest;
use App\Http\Requests\Task\ReorderTasksRequest;
use App\Http\Requests\Task\UpdateTaskRequest;
use App\Services\ProjectService;
use App\Services\TaskService;
use Illuminate\Http\JsonResponse;

class TaskController extends Controller
{
    protected ?TaskService $taskService = null;

    public function __construct(TaskService $taskService)
    {
        $this->taskService = $taskService;
    }

    public function index()
    {
        $projects = (new ProjectService())->getAll();

        return view('tasks.index', [
            'projects' => $projects,
        ]);
    }

    public function list(ListTasksRequest $request): JsonResponse
    {
        $tasks = $this->taskService->list($request->get('project_id'));

        return response()->json([
            'success' => true,
            'tasks' => $tasks,
            'message' => "Tasks retrieved successfully.",
        ]); // 200
    }

    public function store(CreateTaskRequest $request): JsonResponse
    {
        $this->taskService->store($request->all());

        return response()->json([
            'success' => true,
            'message' => "Task created successfully.",
        ], 201);
    }

    public function get(int $id): JsonResponse
    {
        $task = $this->taskService->getById($id);

        if ($task) {
            return response()->json([
                'success' => true,
                'task' => $task,
                'message' => "Task retrieved successfully.",
            ]); // 200
        } else {
            return response()->json([
                'success' => false,
                'message' => "Task not found!",
            ], 404);
        }
    }

    public function update(UpdateTaskRequest $request, int $id): JsonResponse
    {
        $this->taskService->update($id, $request->all());

        return response()->json([
            'success' => true,
            'message' => "Task updated successfully.",
        ], 201);
    }

    public function delete(int $id): JsonResponse
    {
        $this->taskService->delete($id);

        return response()->json([
            'success' => true,
            'message' => "Task deleted successfully.",
        ], 201);
    }

    public function reorder(ReorderTasksRequest $request): JsonResponse
    {
        $this->taskService->reorder(
            $request->get('project_id'),
            $request->get('start'),
            $request->get('end')
        );

        return response()->json([
            'success' => true,
            'message' => "Tasks reordered successfully.",
        ], 201);
    }
}

As you can see in the TaskController:

• TaskService is injected into the constructor method as an argument. In the constructor body, an instance of the TaskService class is created, and the $taskService property is initialized. So in the custom methods, you'll be able to access that $taskService and its functions.
• The index method is for returning the HTML.
• All the other custom methods ( list, store, get, update, delete, reorder) are using the TaskService functions through the already initialized $taskService property. So, all the logic implementation goes to the service, and this way, you just call a service function and return the response.

How to Test the API Routes

At this point, you can test the API routes by requesting them via Postman or any similar tool. Just run (or rerun) the backend:

php artisan serve

Here's the published Postman collection with all the requests.

Instead of using Postman, you can use a command line tool such as curl right from your terminal.

Below are all the sample commands that you can run to test out the API routes:

• Create a new task for a specific project:

curl --location '127.0.0.1:8000/api/tasks?project_id=1' \
--header 'Content-Type: application/json' \
--data '{
    "title": "Title",
    "description": "Description"
}'

• List project tasks:

curl --location 'http://127.0.0.1:8000/api/tasks?project_id=1'

• Get a task by ID:

curl --location 'http://127.0.0.1:8000/api/tasks/1'

• Update a task by ID:

curl --location --request PUT 'http://127.0.0.1:8000/api/tasks/11' \
--header 'Content-Type: application/json' \
--data '{
    "title": "Title edited",
    "description": "Description edited"
}'

• Reorder project tasks:

curl --location --request PUT 'http://127.0.0.1:8000/api/tasks' \
--header 'Content-Type: application/json' \
--data '{
    "project_id": "1",
    "start": "1",
    "end": "2"
}'

• Delete a task by ID:

curl --location --request DELETE 'http://127.0.0.1:8000/api/tasks/11'

In the below screenshot, there is an example of getting project tasks by its ID using the curl command (at the bottom right):

An example of using curl command to retrieve the existing tasks from the database

The Frontend: How to Install the Packages

Now it's time to switch to the frontend. We'll use TypeScript for React.js. After completing this part, you'll be able to integrate React.js (with Vite) in your Laravel app.

First, make sure you have Node.js version 18 or above by using this command:

node -v

Install these necessary npm packages:

npm i react-dom dotenv react-beautiful-dnd react-responsive-modal react-toastify @vitejs/plugin-react

• react-dom is a library from the React team for rendering React components in the DOM (Document Object Model)
• dotenv is for loading environment variables from the .env file into the process environment
• react-beautiful-dnd is a library from Atlassian for creating drag-and-drop interfaces with animations
• react-responsive-modal is for creating simple and responsive modal dialogs
• react-toastify is for displaying notifications or toasts
• @vitejs/plugin-react is a plugin for the Vite build tool that enables seamless integration of React with fast development and optimized production builds

Install the development dependencies with this command:

npm i -D @types/react-dom @types/react-beautiful-dnd

• @types/react-dom is TypeScript type definitions for the react-dom package
• @types/react-beautiful-dnd is TypeScript type definitions for the react-beautiful-dnd package

How to Configure Vite.js

As Laravel v10 already has vite.config.js, you'll want to set up any React-related stuff there. Or if you still don't have this file, create one like this:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
import 'dotenv/config';

export default defineConfig({
    build: {
        minify: process.env.APP_ENV === 'production' ? 'esbuild' : false,
        cssMinify: process.env.APP_ENV === 'production',
    },
    plugins: [
        laravel({
            input: ['resources/react/app.tsx'],
            refresh: true,
        }),
        react(),
    ],
});

As you can see in the Vite configuration file, there is a reference to the resources/react/app.tsx, which will be the entry point for Laravel to use React resources.

For the initial HTML page, create a resources/views/tasks/index.blade.php blade file, so all the frontend assets will be injected there in the div with ID app:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ config("app.name") }}</title>
    <link rel="shortcut icon" href="{{ asset('favicon.ico') }}" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    @viteReactRefresh
    @vite('resources/react/app.tsx')
</head>
<body>
<div id="app" data-projects="{{ json_encode($projects) }}"></div>
</body>
</html>

As you can see in the blade file, there is a $projects variable passed from the backend. It's the whole project data that will be used to filter tasks in the frontend.

React.js – Initial Integration

In this article, we'll just have a basic React.js app working with Laravel.

At first, it's a good idea to delete unnecessary resources, like default resources/css and resources/js directories.

Create a resources/react/app.tsx file like this:

import ReactDOM from 'react-dom/client';
import Main from "./Main";
import './index.css'

ReactDOM.createRoot(document.getElementById('app')).render(
    <Main />
);

So, the resources/react folder will be the root directory for all the upcoming React stuff.

Create an index.css with some temporary content:

.test-class {
  color: red;
}

Also create a Main.tsx with some temporary content:

function Main() {
    return (
        <div>
            <h2 className="test-class">React App</h2>
        </div>
    );
}

export default Main;

To check the result in the browser, make sure you have backend running and build the assets via the vite tool:

npm run build

Or, if you want to watch React file changes and automatically build assets, you can keep this command running:

npm run dev

The two npm run commands above refer to vite, which builds the assets.
You can see this by checking the package.json file, "scripts" field:

"scripts": {
    "dev": "vite",
    "build": "vite build"
}

Now you can open http://localhost:8000 to see the initial rendered view:

Screenshot from browser

How to Add CSS

Now, once you've set up Vite and have React integrated into your Laravel app, you can work on the React part.

We won't spend too much time on styles, so you can paste this CSS into your index.css:

body { background-color: whitesmoke; color: rgba(255, 255, 255, 0.7); font-family: "Montserrat", sans-serif; cursor: default; margin: auto 0; }

/* MODAL start */
.modal-content { display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #fff; padding: 20px; border-radius: 5px; width: 500px; color: #2d3748; }
.modal-header { font-size: 1.5rem; font-weight: 600; margin-bottom: 20px; }
.modal-input-header { font-weight: 600; margin-bottom: 10px; }
.modal-input { width: 100%; height: 30px; border: 1px solid #ccc; border-radius: 5px; padding: 5px; }
.modal-textarea { width: 100%; height: 100px; border: 1px solid #ccc; border-radius: 5px; padding: 5px; margin-bottom: 20px; resize: vertical; }
.modal-actions { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.modal-btn { padding: 10px 20px; border-radius: 5px; cursor: pointer; }
.modal-btn-cancel { background-color: #e53e3e; color: #fff; border: none; }
.modal-btn-cancel:hover { background-color: #c53030; }
.modal-btn-submit { background-color: #2d3748; color: #fff; border: none; }
.modal-btn-submit:hover { background-color: #4a5568; }
.modal-question { font-size: 1.2rem; font-weight: 600; margin-bottom: 20px; }
/* MODAL end */

/* LEFT & RIGHT SIDE start */
.left-side { width: 50%; float: left; }
.right-side { width: 50%; float: left; }
/* LEFT & RIGHT SIDE end */

/* LEFT SIDE start */
.left-side .no-tasks { font-size: 1.2rem; font-weight: 600; margin-bottom: 20px; text-align: center; color: #2d3748; }
.left-side .task-item { padding: 10px; margin: 10px; min-height: 20px; min-width: 200px; color: #2d3748; list-style-type: none; }
.left-side .task-item-content { display: flex; justify-content: space-between; align-items: center; }
.left-side .task-project { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-right: 10px; }
.left-side .task-project-name { font-size: 1.5rem; font-weight: 600; margin-bottom: 5px; }
.left-side .task-time { font-size: 0.8rem; }
.left-side .task-title { font-size: 1.2rem; }
.left-side .task-actions { display: flex; justify-content: space-between; align-items: center; }
.left-side .task-edit-btn { background-color: #2d3748; color: #fff; border: none; border-radius: 5px; padding: 5px 10px; cursor: pointer; margin: 0 5px; }
.left-side .task-edit-btn:hover { background-color: #4a5568; }
.left-side .task-delete-btn { background-color: #e53e3e; color: #fff; border: none; border-radius: 5px; padding: 5px 10px; cursor: pointer; margin: 0 5px; }
.left-side .task-delete-btn:hover { background-color: #c53030; }
/* LEFT SIDE end */

/* RIGHT SIDE start */
.right-side .projects { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.right-side .projects-select { width: 100%; height: 30px; border: 1px solid #ccc; border-radius: 5px; padding: 5px; }
.right-side .no-project-selected { font-size: 1.2rem; font-weight: 600; margin-bottom: 20px; }
.right-side .right-side-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #fff; padding: 20px; border-radius: 5px; color: #2d3748; }
.right-side .add-task-header { font-size: 1.5rem; font-weight: 600; margin-bottom: 20px; }
.right-side .add-task-input-header { font-weight: 600; margin-bottom: 10px; }
.right-side .add-task-input { width: 100%; height: 30px; border: 1px solid #ccc; border-radius: 5px; padding: 5px; }
.right-side .add-task-textarea { width: 100%; height: 100px; border: 1px solid #ccc; border-radius: 5px; padding: 5px; margin-bottom: 20px; resize: vertical; }
.right-side .add-task-actions { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.right-side .add-task-btn { padding: 10px 20px; border-radius: 5px; cursor: pointer; }
.right-side .add-task-btn-cancel { background-color: #e53e3e; color: #fff; border: none; }
.right-side .add-task-btn-cancel:hover { background-color: #c53030; }
.right-side .add-task-btn-submit { background-color: #2d3748; color: #fff; border: none; }
.right-side .add-task-btn-submit:hover { background-color: #4a5568; }
/* RIGHT SIDE end */

Later you'll attach the index.css file in your main component.

A Service for the API Requests

As you did in backend, here in the frontend you also can move all the logic implementations into a different file, so your code will be more readable and maintainable. We can name that file utils.ts, as there will be utilities in it we need.

Before that, just create axiosConfig.ts for the global Axios configuration, which you'll use in utils.ts.

import axios from 'axios';

export default axios.create({ baseURL: '/api' });

Using the above setup, you can be sure that all the HTTP requests will have the /api prefix.

For example, if you use axiosConfig.get('/example'), it will send a GET request to the /api/example. This is an optional configuration, but it's a recommended way to have non-repetitive code.

As you'll have a few use cases for sending HTTP requests to the server, you can have separate utilities file for those operations:

• Create a new task for a project
• Update a task
• List project's tasks
• Delete a task
• Reorder project's tasks

So below is the utils.ts file:

import axiosConfig from './axiosConfig';
import { toast } from 'react-toastify';

export const getErrorMessage = (error: unknown) => {
    if (error instanceof Error) return error.message;
    return String(error)
}

export const getTasks = async (projectId) => {
    if (!projectId) {
        toast.error("Project is required!");
        return;
    }

    try {
        const response = await axiosConfig.get(`/tasks?project_id=${projectId}`);
        const { success, tasks, message } = response.data;

        if (success) {
            return tasks;
        } else {
            toast.error(message);
            return [];
        }
    } catch (err) {
        toast.error(getErrorMessage(err));
        return [];
    }
}

export const reorderTasks = async (projectId, start, end) => {
    try {
        const response = await axiosConfig.put('/tasks', {
            project_id: projectId,
            start,
            end,
        });
        const { success, message } = response.data;

        toast[success ? 'success' : 'error'](message);
    } catch (err) {
        toast.error(getErrorMessage(err));
    }
}

export const editTask = async (task) => {
    if (!task.id) return;
    if (!task.title) {
        toast.error("Title is required!");
        return;
    }

    try {
        const response = await axiosConfig.put(`/tasks/${task.id}`, {
            title: task.title,
            description: task.description,
        });
        const { success, message } = response.data;

        toast[success ? 'success' : 'error'](message);
    } catch (err) {
        toast.error(getErrorMessage(err));
    }
}

export const deleteTask = async (id) => {
    if (!id) {
        toast.error("Invalid task!");
        return;
    }

    try {
        const response = await axiosConfig.delete(`/tasks/${id}`);
        const { success, message } = response.data;

        toast[success ? 'success' : 'error'](message);
    } catch (err) {
        toast.error(getErrorMessage(err));
    }
}

export const createTask = async (task, projectId) => {
    if (!projectId) {
        toast.error("Project is required!");
        return;
    }
    if (!task.title) {
        toast.error("Title is required!");
        return;
    }

    try {
        const response = await axiosConfig.post(`/tasks?project_id=${projectId}`, {
            title: task.title,
            description: task.description,
        });
        const { success, message } = response.data;

        toast[success ? 'success' : 'error'](message);
    } catch (err) {
        toast.error(getErrorMessage(err));
    }
}

In the above file, you'll find the following functions:

• getErrorMessage: Returns the error message if the input is an instance of Error – otherwise, converts it to a string.
• getTasks: Retrieves tasks for a given project ID using Axios. Displays an error toast if the project ID is missing or if the API request is unsuccessful.
• reorderTasks: Sends a PUT request to reorder tasks within a project based on start and end positions. Displays a success or error toast based on the API response.
• editTask: Sends a PUT request to update task information. Validates that the task has an ID and a title before making the request. Displays a success or error toast based on the API response.
• deleteTask: Sends a DELETE request to delete a task by its ID. Displays a success or error toast based on the API response.
• createTask: Sends a POST request to create a new task for a given project ID. Validates that the project ID is present, and the task has a title before making the request. Displays a success or error toast based on the API response.

React.js Components

Now, since you have utilities ready, in the resources/react/components folder, you can create the components you need to use in your Main.tsx.

First, create SelectProject.tsx, which will be responsible for choosing the current project:

import {getTasks} from "../utils";

function SelectProject({projectId, projects, setProjectId, setTasks}) {
    const selectProject = (e) => {
        const value = e.target.value;
        setProjectId(value);
        if (value === '') {
            setTasks([]);
        } else {
            getTasks(value).then((tasksData) => setTasks(tasksData));
        }
    };

    return (
        <div className="projects">
            <select className="projects-select"
                    value={projectId}
                    onChange={selectProject}>
                <option value="" defaultValue>Choose a project</option>
                {projects.map((project) => (
                    <option key={project.id}
                            value={project.id}>{project.name}</option>
                ))}
            </select>
        </div>
    );
}

export default SelectProject;

The SelectProject component renders a dropdown menu allowing the user to select a project. When a project is selected, it updates the state with the selected project ID, fetches tasks for that project using the getTasks utility function, and updates the state with the retrieved tasks, providing dynamic interaction with project selection and task loading.

Then create TaskList.tsx, which will be responsible for rendering the project's tasks and for their drag and drop manipulations:

import {DragDropContext, Draggable, Droppable} from "react-beautiful-dnd";
import Task from "./Task";
import {reorderTasks} from "../utils";

const getItemStyle = (isDragging, draggableStyle) => ({
    background: isDragging ? 'lightgreen' : 'grey',
    ...draggableStyle,
});

function TaskList({ tasks, setIsModalEditOpen, setModalEditTask, setIsModalDeleteOpen, setModalDeleteTaskId, projectId, setTasks })
{
    const handleDragEnd = (result) => {
        if (!result.destination || result.destination.index === result.source.index) {
            return;
        }

        const items = Array.from(tasks);
        const [reorderedItem] = items.splice(result.source.index, 1);
        items.splice(result.destination.index, 0, reorderedItem);
        reorderTasks(projectId, result.source.index + 1, result.destination.index + 1);

        setTasks(items);
    };

    return (
        <DragDropContext onDragEnd={handleDragEnd}>
            <Droppable droppableId="droppable">
                {(provided) => (
                    <ul {...provided.droppableProps} ref={provided.innerRef}>
                        {tasks.map((task, index) => (
                            <Draggable key={task.id.toString()} draggableId={task.id.toString()} index={index}>
                                {(provided, snapshot) => (
                                    <li ref={provided.innerRef}
                                        {...provided.draggableProps}
                                        {...provided.dragHandleProps}
                                        className="task-item"
                                        style={getItemStyle(snapshot.isDragging, provided.draggableProps.style)}
                                    >
                                        <Task task={task}
                                              setIsModalEditOpen={setIsModalEditOpen}
                                              setModalEditTask={setModalEditTask}
                                              setIsModalDeleteOpen={setIsModalDeleteOpen}
                                              setModalDeleteTaskId={setModalDeleteTaskId}
                                        />
                                    </li>
                                )}
                            </Draggable>
                        ))}
                        {provided.placeholder}
                    </ul>
                )}
            </Droppable>
        </DragDropContext>
    );
}

export default TaskList;

The TaskList component utilizes the react-beautiful-dnd library to implement a draggable task list. It renders a list of tasks, allowing users to drag and drop tasks to reorder them, with drag-and-drop functionality triggering a function (handleDragEnd) that updates the task order both visually and in the backend using the reorderTasks utility function.

Now, create Task.tsx, which will be responsible for a single Task from a list:

function Task({ task, setIsModalEditOpen, setModalEditTask, setIsModalDeleteOpen, setModalDeleteTaskId })
{
    const handleEdit = () => {
        setModalEditTask(task);
        setIsModalEditOpen(true);
    };

    const handleDelete = () => {
        setModalDeleteTaskId(task.id);
        setIsModalDeleteOpen(true);
    };

    return (
        <div className="task-item-content">
            <span className="task-project">
                <span className="task-project-name">
                    {task.project.name}
                </span>
                <span className="task-time">
                    Created {task.created}
                </span>
               </span>
            <span className="task-title">{task.title}</span>
            <div className="task-actions">
                <button className="task-edit-btn"
                    onClick={handleEdit}>Edit</button>
                <button className="task-delete-btn"
                    onClick={handleDelete}>Delete</button>
            </div>
        </div>
    );
}

export default Task;

The Task component represents a single task item. It displays task details including the project name, creation time, and title, and provides buttons to trigger actions such as editing and deleting the task, with corresponding handlers (handleEdit and handleDelete).

Next, create AddTaskForm.tsx, which will be responsible for the task form for adding tasks to the current selected project:

import {createTask} from "../utils";

function AddTaskForm({newTask, setNewTask, projectId, reloadTasks })
{
    const clearTaskCreate = () => {
        setNewTask({title: '', description: ''});
    };
    const submitTaskCreate = () => {
        createTask(newTask, projectId).then(() => {
            setNewTask({title: '', description: ''});
            reloadTasks();
        });
    };

    return (
        <>
            <h2 className="add-task-header">Add Task</h2>

            <h3 className="add-task-header">Title</h3>
            <input type="text"
                   className="add-task-input"
                   onChange={(e) => setNewTask({
                       ...newTask,
                    title: e.target.value
                   })}
                   value={newTask.title}
            />
            <h3 className="add-task-input-header">Description</h3>
            <textarea className="add-task-textarea"
                      onChange={(e) => setNewTask({
                          ...newTask,
                        description: e.target.value
                      })}
                      value={newTask.description || ''}
            />
            <div className="add-task-actions">
                <button className="add-task-btn add-task-btn-cancel"
                        onClick={clearTaskCreate}>Clear
                </button>
                <button className="add-task-btn add-task-btn-submit"
                        onClick={submitTaskCreate}>Add</button>
            </div>
        </>
    );
}

export default AddTaskForm;

The AddTaskForm component provides a form for adding new tasks. It includes input fields for the task title and description, with buttons to clear the form or submit the task creation, and it utilizes the createTask utility function to handle the task creation process, triggering a reload of tasks upon success.

Then, create ModalEdit.tsx, which will be responsible for the modal popup for editing and submitting changes to a task:

import {Modal} from "react-responsive-modal";
import React from "react";
import {editTask} from "../utils";

function ModalEdit({
    isModalEditOpen, setIsModalEditOpen, setModalEditTask,
    modalEditTask, reloadTasks
}) {
    const submitTaskEdit = () => {
        setIsModalEditOpen(false);
        editTask(modalEditTask).then(() => {
            reloadTasks();
        });
    };

    return (
        <Modal open={isModalEditOpen} center
            onClose={() => setIsModalEditOpen(false)}>
            <div className="modal-content">
                <h2 className="modal-header">Edit Task</h2>
                <h3 className="modal-input-header">Title</h3>
                <input type="text" value={modalEditTask.title}
                       className="modal-input"
                       onChange={(e) => setModalEditTask({
                           ...modalEditTask,
                        title: e.target.value
                       })}
                />
                <h3 className="modal-input-header">Description</h3>
                <textarea className="modal-textarea"
                          onChange={(e) => setModalEditTask({
                              ...modalEditTask,
                            description: e.target.value
                          })}
                          value={modalEditTask.description || ''}
                />
                <div className="modal-actions">
                    <button className="modal-btn modal-btn-cancel"
                            onClick={() => setIsModalEditOpen(false)}
                    >Close
                    </button>
                    <button className="modal-btn modal-btn-submit"
                            onClick={submitTaskEdit}
                    >Save</button>
                </div>
            </div>
        </Modal>
    )
}

export default ModalEdit;

The ModalEdit component displays a modal for editing task details. It includes input fields for modifying the task title and description, and buttons to close the modal or save the changes, using the editTask utility function to handle the task editing process and triggering a reload of tasks upon successful editing.

Next, create ModalDelete.tsx, which will be responsible for submitting a task deletion:

import {Modal} from "react-responsive-modal";
import {deleteTask} from "../utils";

function ModalDelete({
    isModalDeleteOpen, setIsModalDeleteOpen,
    modalDeleteTaskId, reloadTasks
}) {
    const submitTaskDelete = () => {
        setIsModalDeleteOpen(false);
        deleteTask(modalDeleteTaskId).then(() => {
            reloadTasks();
        });
    };

    return (
        <Modal open={isModalDeleteOpen} onClose={() => setIsModalDeleteOpen(false)} center>
            <div className="modal-content">
                <h2 className="modal-header">Delete Task</h2>
                <p className="modal-question">
                    Are you sure you want to delete this task?
                </p>
                <div className="modal-actions">
                    <button className="modal-btn modal-btn-cancel"
                            onClick={() => setIsModalDeleteOpen(false)}
                    >Cancel</button>
                    <button className="modal-btn modal-btn-submit"
                            onClick={submitTaskDelete}
                    >Yes</button>
                </div>
            </div>
        </Modal>
    );
}

export default ModalDelete;

The ModalDelete component displays a modal for confirming the deletion of a task. It provides options to either cancel the deletion or proceed with deleting the task, utilizing the deleteTask utility function and triggering a reload of tasks upon successful deletion.

And lastly, set up the Main.tsx by using the above-defined components.

import { useState } from 'react';
import {getTasks} from "./utils";
import "react-responsive-modal/styles.css";
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import ModalEdit from "./components/ModalEdit";
import ModalDelete from "./components/ModalDelete";
import TaskList from "./components/TaskList";
import SelectProject from "./components/SelectProject";
import AddTaskForm from "./components/AddTaskForm";

function Main () {
    const [projectId, setProjectId] = useState('');
    const projectsData = document.getElementById('app').getAttribute('data-projects');
    const projects = JSON.parse(projectsData);
    const [tasks, setTasks] = useState([]);
    const [isModalEditOpen, setIsModalEditOpen] = useState(false);
    const [modalEditTask, setModalEditTask] = useState({id: '', title: '', description: ''});
    const [isModalDeleteOpen, setIsModalDeleteOpen] = useState(false);
    const [modalDeleteTaskId, setModalDeleteTaskId] = useState('');
    const [newTask, setNewTask] = useState({title: '', description: ''});

    const reloadTasks = () => {
        getTasks(projectId).then((tasksData) => setTasks(tasksData));
    };

    return (
        <div>
            <ToastContainer autoClose={2000} />
            <ModalEdit isModalEditOpen={isModalEditOpen}
                       setIsModalEditOpen={setIsModalEditOpen}
                       modalEditTask={modalEditTask}
                       setModalEditTask={setModalEditTask}
                       reloadTasks={reloadTasks}
            />
            <ModalDelete isModalDeleteOpen={isModalDeleteOpen}
                         setIsModalDeleteOpen={setIsModalDeleteOpen}
                         modalDeleteTaskId={modalDeleteTaskId}
                         reloadTasks={reloadTasks}
            />
            <div className="left-side">
                {tasks.length > 0 ? (
                    <TaskList tasks={tasks}
                              setIsModalEditOpen={setIsModalEditOpen}
                              setModalEditTask={setModalEditTask}
                              setIsModalDeleteOpen={setIsModalDeleteOpen}
                              setModalDeleteTaskId={setModalDeleteTaskId}
                              projectId={projectId}
                              setTasks={setTasks}
                    />
                ) : (
                    <div className="no-tasks">
                        {projectId === '' ? (
                            <p>Choose a project to see its tasks.</p>
                        ) : (
                            <p>This project has no tasks.</p>
                        )}
                    </div>
                )}
            </div>
            <div className="right-side">
                <div className="right-side-wrapper">
                    <SelectProject projectId={projectId}
                                   projects={projects}
                                   setProjectId={setProjectId}
                                   setTasks={setTasks}
                    />
                    {projectId === '' ? (
                        <div className="no-project-selected">
                            <p>Please select a project.</p>
                        </div>
                    ) : (
                        <AddTaskForm newTask={newTask}
                                     setNewTask={setNewTask}
                                     projectId={projectId}
                                     reloadTasks={reloadTasks}
                        />
                    )}
                </div>
            </div>
        </div>
    );
}

export default Main;

The Main component is a central component that managing project and task-related functionalities. It includes modals for editing and deleting tasks, a task list with dynamic updates, a project selection dropdown, and a form for adding new tasks, leveraging state management and utility functions for smooth user interaction.

Final Results

At this point, all the components are ready to interact with each other. So you can build the frontend assets and run the server:

npm run build && php artisan serve

By visiting http://127.0.0.1:8000 you'll get this kind of result:

GIF generated from a local working project

That's it!

Now you can easily integrate React.js into your Laravel app without using any additional Laravel tools (like Inertia). And as a result, you can continue to maintain your Laravel app to build more scalable APIs with its authentication and other stuff.

So, this can be just an example app for your next full-stack Laravel and React.js project.

Conclusion

With this article, you built a single-page, full-stack Tasklist app using React.js (with TypeScript) with Vite.js as frontend technologies, Laravel as a backend framework, and react-beautiful-dnd package for having draggable items.
Now you know how to manually integrate React.js in your Laravel app and maintain it.

You can find the complete code of the project here on my GitHub⭐, where I actively publicize much of my work about various modern technologies.
For more information, you can visit my website: boolfalse.com

Feel free to share this article. 😇

Say, you are getting started with a ReactJS project and want to use TailwindCSS for the same. The first time, it would be fine for you to create a project using the ViteJS tool, and then configure TailwindCSS on top of it.

But the next time (and many more times after that), if you want to start a new React project, would you like to repeat these same steps over and over? A clever developer wouldn't do that. Instead, they'd create a "template" and use it every time they needed something similar in the future.

In this article, we are going to learn how to create a GitHub template repository for scaffolding a new React project with Vite and TailwindCSS. The steps explained in this article will also help you to set up React using Vite, and configure TailwindCSS with it, even if you have reasons not to create the template repository. So, read on.

If you like to learn from video content as well, this article is also available as a video tutorial here: 🙂

What is Vite?

Vite (aka ViteJS) is a next generation frontend tooling system that helps developers get started with local development quickly and easily. It supports super fast hot module replacement (HMR) so that there's hardly any lag between changing the source code and seeing it rendered on the browser.

Vite is way faster in starting the dev server than its predecessors like create-react-app (CRA) which was a go-to option for scaffolding React applications. Vite supports JSX, TypeScript, and CSS out-of-the box. It creates optimized builds and manages dependencies in an efficient manner.

Vite comes with templates available for all modern web technologies like vanilla JavaScript/TypeScript, React, Vue, Preact, Lit, Svelte, Solid, and Qwik.

At this moment, Vite is the most viable tooling system available to get started with React development.

How to Set Up a React Project with Vite

To get started, make sure you have Node.js version 18+ installed. You can check this by executing the following command from your command prompt (terminal):

node -v

This will print the Node.js version you have installed. If you do not have Node.js installed or you have a lower version than v18, go ahead and download and install it from here.

You can use the --template option of the vite library to create a React project using the template. Just copy-paste the following command on your terminal and press enter to execute it:

npm create vite@latest your_app_name -- --template react

Note that you need to replace the your_app_name with the name of your project/application. The vite tool will create a directory with the same name with the generated source code under it.

Next, change directory to your project:

cd your_app_name

Now, install the dependencies using this command:

npm install

Once successful, run the app locally using the following command:

npm run dev

Vite will run the app locally on the URL http://localhost:5173 by default.

Vite running the app locally at http://localhost:5173

You can now open a browser tab and try the URL to see your React application up and running.

React app up and running

Congratulations! You have now successfully set up a React app with Vite. Feel free to make any changes to the src/App.jsx source code file to see the changes reflected instantly on the browser.

How to Configure TailwindCSS with Vite

TailwindCSS is a utility-first CSS framework that can help make you more productive with its rapid development cycle. It provides utility classes you can use to translate any design into markup effortlessly.

Tailwind works quite well with React, and the two have become a modern combo for building fast websites and web applications.

Install TailwindCSS

We will now install and configure TailwindCSS with the React application we have created so far with Vite. You can now stop the Vite server if it's running locally for you.

First, let's install tailwindcss, postcss, and autoprefixer as the dev dependencies of the project:

npm install -D tailwindcss postcss autoprefixer

A few points worth mentioning about the postcss and autoprefixer here:

• The tailwindcss framework doesn't provide us the CSS styles that the bowser understands directly. It provides us the utility classes that some tool has to translate to regular CSS that the browser understands.
• Also, the produced CSS from the utility classes must work across all browsers (Edge, Chrome, Firefox, Safari, and so on).

So we need to have PostCSS and Autoprefixer along with TailwindCSS to set up the expected CSS output at the build phase.

Configure TailwindCSS

Now create the configuration file for Tailwind and PostCSS using this command:

npx tailwindcss init -p

It will create two files for you:

• tailwind.config.js: the configuration file for TailwindCSS. We will have to change this file to provide some basic configuration to start with. The same file must be edited with additional settings when you want to extend TailwindCSS for any advanced use cases.
• postcss.config.js: the configuration file for PostCSS. In most cases you do not have to change anything in this file.

Open the tailwind.config.js file and replace the existing content with the following:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Note that we have added a couple of entries to the content array value to tell TailwindCSS what to consider for its utility classes to work. In our case, it must be the index.html file and any .js | .ts or .jsx | .tsx files under the src/ directory.

Now open the ./src/index.css file and add the @tailwind directives for each of Tailwind’s layers:

@tailwind base;
@tailwind components;
@tailwind utilities;

That's it. We have done all the required configuration for TailwindCSS to run with a Vite app.

Let's Run Things Together

It's time to run things together. Start the Vite server back up locally using the command:

npm run dev

Now edit the src/App.jsx file to replace its content with the following code snippet:

function App() {

  return (
    <>
      <h1
        className="text-3xl text-center text-red-700"
      >Welcome to Vite with TailwindCSS and React</h1>
    </>
  )
}

export default App

Here, the JSX of the App component returns a heading tag (h1) with some welcome text. Notice the class names used with the <h1> tag. These are all utility classes from the TailwindCSS framework. You can even read them like plain English. We asked TailwindCSS to render a bigger text (3XL), that should be center aligned, and in a shade of red.

Now access the app like before using the URL http://localhost:5173. You should see the output as expected:

Welcome screen in your React/Vite app

Congratulations, again! You have now set up React and TailwindCSS with Vite and everything is working as expected.

How to Create the Template Repository on GitHub

All the hard work is done. Now we want to save this work somewhere so you can use it like a template every time you want to start a React project with TailwindCSS. There is no better place than GitHub to store and manage the source code.

Login to your GitHub account and create a new repository by clicking the New button from the repositories tab.

Creating a new repo on GitHub

Now, provide a repository name and description and create the repository.

Enter your repo details and click "create repository"

Next, commit, and push the entire project code to this repository. After pushing the project code, go to the Settings of the repository. Under the general settings, you will find a checkbox with a label Template repository. Check that checkbox to make this repository a template repository.

Make this repo a template repository by checking the checkbox

Great! Now you have created a template repository that'll let you create a React and TailwindCSS project with a single-click in the future.

Now, you will find a new button called Use this template at the top-right corner of your repository. You can click on it to create a new project repository from this template. If your template repository is public, anyone else from the developer community can use it to create their project repository. Amazing, isn't it?

I've created a template repository using the same steps we discussed in this article. Please feel free to check it out and if you like the work, give the repository a star ⭐.

https://github.com/atapas/vite-tailwind-react

Wrapping Up

That's all for now. I hope you found this article informative and insightful. I regularly publish meaningful posts on my GreenRoots Blog, and I think you'll find them helpful, too.

Let's connect.

• I am an educator on my YouTube channel, tapaScript. Please SUBSCRIBE to the channel if you want to learn JavaScript, ReactJS, Next.js, Node.js, Git, and all about Web Development in the fundamental way.
• Follow me on X (Twitter) or LinkedIn if you don't want to miss the daily dose of Web Development and Programming Tips.
• Find all my public speaking talks here.
• Check out and follow my Open Source work on GitHub.

See you soon with my next article. Until then, please take care of yourself, and stay happy.

Nowadays, the team recommends using production-grade React frameworks like NextJS, Remix, Gatsby, or Expo for native apps. While frameworks are the preferred choice, the React team also recommend using Vite or Parcel for custom build processes.

This is partly because the CRA package has not been updated for about a year. This may cause some problems where packages already updated to more recent versions cannot be used within an existing application. As a result, you may need to update existing applications by replacing the CRA package with the recommended alternatives — Vite or Parcel.

This article walks you through the steps for migrating a production-based application from CRA to Vite. You will learn the "why" of each step, how to retain Jest for tests, and how to update your browserslist since it doesn't work with vite out of the box.

In the conclusion section, you can find a sample pull request that includes all the changes. At the end of each step, you will find a sample commit text which shows the code change required per step.

Step 1: Install Vite and Plugins

Here are the commands to install the packages we need:

yarn add vite @vitejs/plugin-react vite-tsconfig-paths

OR

npm install vite @vitejs/plugin-react vite-tsconfig-paths

Apart from Vite, we are adding two plugins — @vitejs/plugin-react and  vite-tsconfig-paths.

The vitejs/plugin-react plugin enables fast refresh in development, uses automatic JSX runtime, and custom Babel plugins or presets. It enriches your React development experience.

The vite-tsconfig-paths plugin resolves imports for TypeScript's path mapping. For example, you can use components/ComponentName instead of ./../components/ComponentName.

Other Vite plugins

Another plugin you could consider is vite-plugin-svgr, which transforms SVG into React components and uses svgr under the hood. I left it out since we do not have such a use case in the application I’m migrating.

You can also checkout other official Vite plugins here.

Step 1 sample commit.

Step 2: Create a Vite config file

On running vite in the command terminal, Vite tries to find a vite.config.ts file inside the project's root directory. You can read more on Vite's page for how to further configure this file for intellisense, environment based configurations, async configuration, and env variables usage.

At your application’s root, create a file named vite.config.ts with the following content:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import viteTsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
    // depending on your application, base can also be "/"
    base: '',
    plugins: [react(), viteTsconfigPaths()],
    server: {    
        // this ensures that the browser opens upon server start
        open: true,
        // this sets a default port to 3000  
        port: 3000, 
    },
})

Step 2 sample commit.

Step 3: Create a Vite Types File Reference

This step is needed to reference a type declarations file which aids type checks and Intellisense. By default, Vite types are for a NodeJS environment. For client side code, Vite provides the type definitions in vite/client.d.ts.

At your application’s root, create a file named vite-env.d.ts with the following content:

/// <reference types="vite/client" />

Step 3 sample commit.

Step 4: Move the index.html File

Vite has a root directory which your files are served from. Since index.html is the entry point for Vite's server, the file needs to be in the root directory.

From the public directory, move the index.html file to the root of your project.

Step 4 sample commit.

Step 5: Update the index.html File

Two updates are necessary here:

Remove %PUBLIC_URL%

Vite automatically resolves URLs inside index.html, so there's no need for %PUBLIC_URL% placeholders. You can do a search and replace inside your index.html file for this. Be sure to remove all occurrences.

Before:

<link rel="icon" type="image/svg+xml" href="%PUBLIC_URL%/favicon.svg" />

After:

<link rel="icon" type="image/svg+xml" href="/favicon.svg" />

Add module script to the bottom of the body tag

Vite treats index.html as source code and part of the module graph. It resolves <script type="module" src="..."> that references your JavaScript source code.

At the bottom of the body tag in index.html file, add the script as shown below:

<body>
    {/* others here */}
    <script type="module" src="/src/index.tsx"></script>
</body>

Step 5 sample commit.

Step 6: Replace CRA with Vite

You can now remove CRA, add Vite scripts to the package.json file, and update tsconfig.json.

Remove CRA

To remove CRA, run the following command. This will remove react-scripts from our installed packages.

yarn remove react-scripts

OR

npm uninstall react-scripts

After running the command above, delete the react-app-env.d.ts file.

Add Vite scripts to the package.json file

With Vite installed, you can use the vite binary in your scripts. This could mean replacing react-scripts in a few places. Your focus should be on the start and build keys. The preview key is an addition which helps to preview production build locally.

Note that start is vite and not vite start.

{  
  "scripts": {
    "start": "vite", // start dev server
    "build": "tsc && vite build", // build for production
    "preview": "vite preview" // locally preview production build
  }
},

Update tsconfig.json

Here, your focus should be on the isolatedModules, lib, target, and types. For more options, here is a sample tsconfig file from Vite.

{  
    "compilerOptions": {    
        "lib": ["dom", "dom.iterable", "esnext"],    
        "target": "ESNext",    
        "types": ["vite/client"],
        "isolatedModules": true,
    },
 }

Update process.env.REACT_APP_VARIABLE (optional)

This is necessary if your application uses environment variable. Vite uses import.meta.env.REACT_APP_VARIABLE instead of process.env.REACT_APP_VARIABLE. You can find more details on Vite's env variables and modes here.

Before:

process.env.REACT_APP_VARIABLE

After:

import.meta.env.REACT_APP_VARIABLE

Replace REACT_ with VITE_ (optional)

You only need this if you updated process.env above. Replace your REACT_ environment variables to start with VITE_. This is needed because Vite filters out any env variable not starting with VITE_.

Before:

REACT_APP_API_BASE

After:

VITE_APP_API_BASE

Step 6 sample commit.

Step 7: Run your Application

yarn start

OR

npm start

Congratulations! You have successfully completed the first step in migrating your application from CRA to Vite. You should see a screen that looks like the image below:

No sample commit. ;)

Possible blockers and their solutions

global is not defined error

If you have this error, define global inside your vite.config.ts file as shown below:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  // ...
  define: {
    // here is the main update
    global: 'globalThis',
  },
});

If you use @emotion/react or @emotion/css

You need to inform Vite about this. To do this, install @emotion/babel-plugin.

yarn add @emotion/babel-plugin

OR

npm install @emotion/babel-plugin

Then update your Vite's react plugin in the vite.config.ts as shown below:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import viteTsconfigPaths from 'vite-tsconfig-paths';
import svgr from 'vite-plugin-svgr';

export default defineConfig({
  // ...
  plugins: [
    // here is the main update
    react({
      jsxImportSource: '@emotion/react',
      babel: {
        plugins: ['@emotion/babel-plugin'],
      },
    }),
  ],
  // ...
});

Oh no, my unit tests are not working!

At this point, try running your unit tests — yarn test or npm run test. It’s possible that they don’t work. The following steps highlight how you can fix your unit tests.

Your unit tests are not working because CRA uses react-scripts test to run tests, so we want to switch to using jest.

Step 8: Install Jest and TypeScript-related Dependencies

To start with, you need to install jest, ts-jest, and jest-environment-jsdom. jest will be our new binary for running the tests, [ts-jest](https://www.npmjs.com/package/ts-jest) is a transformer with source map support which allows you to run tests in TypeScript projects, and jest-environment-jsdom imitates the browser's behavior during test runs.

yarn add -D jest @types/jest ts-jest jest-environment-jsdom

OR

npm install --save-dev jest @types/jest ts-jest jest-environment-jsdom

Step 8 sample commit.

Step 9: Update Jest Config

This depends on your current Jest configuration. If it is configured inside package.json, you can update as follows. Here, you focus on preset, testEnvironment, moduleNameMapper, and modulePaths.

preset is set to ts-jest/presets/js-with-ts to allow TypeScript with JavaScript. You can also just set it to ts-jest depending on your application.

moduleNameMapper configures Jest to gracefully handle assets such as stylesheets and images.

  "jest": {
    "preset": "ts-jest/presets/js-with-ts",
    "testEnvironment": "jest-environment-jsdom",
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
    },
    "modulePaths": [
      // you can update this to match your application setup
      "<rootDir>/src"
    ],
  },

Since we referenced a file in moduleNameMapper above, we need to create the file and it's corresponding files. Step 10 takes care of this. This setup is explained further in Jest's documentation here.

Step 9 sample commit.

Step 10: Add the __mocks__ Directory to the Root of Your Project

At the root of your project, create a folder named __mocks__.

Inside the created __mocks__ folder, add a file named styleMock.js and add the following content:

module.exports = {}

Inside the created __mocks__ folder, add a file named fileMock.js and add the following content.

module.exports = 'test-file-stub'

Step 10 sample commit.

Step 11: Update the package.json Scripts

Now that we have jest properly installed, we can replace react-scripts tests with jest. Changes should be as shown below. If you do not have the test:coverage or test:debug keys in your code before, feel free to ignore.

Before:

"scripts": {
    "test": "react-scripts test",
    "test:coverage": "react-scripts test --coverage .",
    "test:debug": "react-scripts test --inspect-brk --runInBand --no-cache"
}

After:

"scripts": {
    "test": "jest",
    // you can add this to keep watch mode on
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage .",
    "test:debug": "jest --inspect-brk --runInBand --no-cache"
}

Step 11 sample commit.

Step 12: Run your Tests

yarn test

OR

npm test

If you face a problem related to import.meta, you can resolve this by moving all your environment keys to a single file and mocking this file in your test. You can take a look at this commit to have a better understanding of what I mean.

No sample commit. :)

Ah, it works! But how about the browserslist config?

What is browserslist config?

This is a configuration used to share your target or supported browsers among multiple frontend repositories.

There are various standards depending on the industry. For example, in EdTech, it's possible that all users learning online use similar browsers in terms of brand, version, and screen size. This list of the commonly used browsers can easily become a standard for the EdTech industry.

A sample application of the browserslist config is when you need to be compatible with older browsers. Passing this range to the browserslist config helps your bundler to compile your code using polyfills that are compatible with your target browsers. This way, your page has optimized performance with good user experience.

Mozilla defines a Polyfill as a piece of code (usually JavaScript on the Web) used to provide modern functionality on older browsers that do not natively support it.

Browserslist config is often set in the package.json or .browserslistrc file as shown below.

package.json

{
  "browserslist": [
    "iOS >= 9",
    "Android >= 4.4",
    "last 2 versions",
    "> 0.2%",
    "not dead"
  ]
}

.browserslistrc

iOS >= 9
Android >= 4.4
last 2 versions
> 0.2%
not dead

You can also read more about Browserslist here.

Why is browserslist a Problem with Vite?

Vite uses ESBuild under the hood which expects a different format to the usual browserslist format.

ESBuild expected format: ['es2015', 'safari11', 'ios11']

Browserslist format: ['defaults', 'Safari >= 11', 'ios_saf >= 11']

As a result of this discrepancy, Vite ignores your browserslist configuration which is currently in the package.json or .brwserslistrc file.

To fix this, you can use a package called browserslist-to-esbuild which does this conversion under the hood and pass the config to build.target inside the vite.config.ts file. Steps 13 and 14 take care of this.

Step 13: Install browserslist-to-esbuild

yarn add browserslist-to-esbuild

OR 

npm install browserslist-to-esbuild

Step 13 sample commit.

Step 14: Confiure the browserslist in Vite Config

In the vite.config.ts file, update as shown below.

import { defineConfig } from 'vite'
import browserslistToEsbuild from 'browserslist-to-esbuild'

export default defineConfig({
  ..
  build: {
    // --> ["chrome79", "edge92", "firefox91", "safari13.1"]
    target: browserslistToEsbuild(), 
  },
  ..
})

And then, you can pass your configs as shown below,

export default defineConfig({
  ..
  build: {
    // you can also pass your usual browserslist config here
    target: browserslistToEsbuild([
        '>0.2%',
        'not dead',
        'not op_mini all'
    ]),
  },
  ..
})

Step 14 sample commit.

Conclusion

Voilà! You're done and your application is fully migrated.

Missing any step? Here is a sample pull request that highlights all the changes involved.

You have learned the "why" and "how" of replacing create-react-app with Vite. I hope you are as proud of yourself as I was of myself for what I have learned in the process of the migration.

Alrighty, that it! Happy coding!

Getting Started

I started off the project by running npm create vite@latest and naming my project brian-component-lib to stay consistent with my previous post. I also chose to use TypeScript and Vue when those options came up.

The Component

The component I built is a clone of the buttons used on freeCodeCamp.org

Button component we are building

Here is the code for that component. Note that it is using TypeScript and the script setup format available in Vue 3.

<script setup lang="ts">

defineProps<{ text: string }>()

</script>

<template>
  <button class="btn-cta">{{ text }}</button>
</template>

<style scoped>
.btn-cta {
  background-color: #d0d0d5;
  border-width: 3px;
  border-color: #1b1b32;
  border-radius: 0;
  border-style: solid;
  color: #1b1b32;
  display: block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 18px;
  line-height: 1.42857143;
}

.btn-cta:active:hover,
.btn-cta:focus,
.btn-cta:hover {
  background-color: #1b1b32;
  border-width: 3px;
  border-color: #000;
  background-image: none;
  color: #f5f6f7;
}
</style>

Then we need to expose this component in the library. We do that by exporting it from an index.ts file.

import FccButton from "./components/FccButton.vue";

export { FccButton };

Config

With the component code ready to go, we need to make sure Vite and the package.json file are configured properly.

Vite has a lot of options when building code. We are interested in the "Library Mode".

import { defineConfig } from "vite";
import { resolve } from "path";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      // src/indext.ts is where we have exported the component(s)
      entry: resolve(__dirname, "src/index.ts"),
      name: "BrianComponentLibrary",
      // the name of the output files when the build is run
      fileName: "brian-component-lib",
    },
    rollupOptions: {
      // make sure to externalize deps that shouldn't be bundled
      // into your library
      external: ["vue"],
      output: {
        // Provide global variables to use in the UMD build
        // for externalized deps
        globals: {
          vue: "Vue",
        },
      },
    },
  },
});

Here is the package.json file. We need to make sure we have the properties necessary for pointing to our built files. For more information on what each property does, you can hover over them in VS Code.

{
  "name": "brian-component-lib",
  "version": "1.0.0",
  "type": "module",
  "files": ["dist"],
  "main": "./dist/brian-component-lib.umd.cjs",
  "module": "./dist/brian-component-lib.js",
  "exports": {
    ".": {
      "import": "./dist/brian-component-lib.js",
      "require": "./dist/brian-component-lib.umd.cjs"
    },
    "./style.css": "./dist/style.css"
  },
  "types": "./dist/index.d.ts",
  "scripts": {
    "dev": "vite",
    "build": "vite build && vue-tsc --emitDeclarationOnly",
    "types": "vue-tsc ",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "@types/node": "^20.2.5",
    "@vitejs/plugin-vue": "^4.2.3",
    "typescript": "^5.0.2",
    "vite": "^4.3.9",
    "vue-tsc": "^1.4.2"
  }
}

In order for the vue-tsc --emitDeclarationOnly to work when building, we need to add the following properties to the compilerOptions section of the tsconfig.json file:

"outDir": "dist",
"declaration": true,

We will also need to remove the noEmit: true property. This will make it so our types are available in the package, so a project using TypeScript with Vue doesn't yell at us for not having declared types.

I also added this line to make sure my App.vue and main.ts file aren't included in the component library built files.

"exclude": ["src/App.vue", "src/main.ts"],

Test the Library

We can now run npm run build and then test out our library. To do this, open up a Vue project (you can open a current Vue 3 project you have, or create a blank one).

Inside the package.json file for the project you just opened add the following to the dependencies:

"brian-component-lib": "file:../brian-component-library"

Make sure the file path you put in points to the correct folder where the component library lives.

Run npm install and you should now have the component library in your node_modules.

Import the component into one of the pages to test that it is working.

Note: You will need to also import the CSS because it gets built to its own file during the build process.

<script setup lang="ts">
import { FccButton } from 'brian-component-lib'
import "brian-component-lib/style.css"
</script>

<template>
    <FccButton text="Run the Tests" />
</template>

You should now see the button when you run the project.

How to Publish to NPM

If you haven't signed into NPM inside your terminal you can do that by running the npm adduser command.

Then just run the npm publish command and the package should be pushed up and made available on NPM.

Conclusion

Vite makes it pretty easy to get a component library published. Hopefully this helped. Let me know on Twitter if it did or if you'd like to see something else from me in the future.

You can see the repository for this code here: https://github.com/briancbarrow/vue-component-library-2023

You will also learn how to leverage React hooks, built as an abstraction of the native JavaScript timeouts and time intervals. For styling the application we will use CSS Modules with SASS.

Here's what we'll be building:

Football live scoreboard - current games screen

💡If you want to skip the reading, 💁 here is the GitHub repository, and here you can see the live demo 📺.

What is a Scoreboard?

Football scoreboard

A live scoreboard is a digital sport scoreboard that automatically displays up-to-the-minute sports scores and data from a certain game – for example a football game. This way it’s much easier for the users to follow the game, make predictions or bets, and so on.

Our application is going to reflect such a board, but in the browser.

The Project

Our application has just a few dependencies and several components. It also uses JavaScript timeouts and intervals to simulate real-time score updates.

⚙️ Application features

Before going into the technical part of the tutorial, let's talk about the application features we will implement.

It’s always better (if possible, of course) to have clear project requirements laid out before writing a single line of code. But folks with some experience in the software engineering and development world know that the reality is often completely different.

The beauty of such small projects that you build for educational purposes is exactly this – you have the freedom to define your own requirements and to meet them in a feasible manner.

So here it the summary of the requirements/features:

Live Football World Cup Scoreboard that shows matches and scores.

The board supports the following operations:

1. Start a game. When a game starts, it should capture the home team and away team (with an initial score of 0 – 0).

2. Finish game. It will remove a match from the scoreboard.

3. Update score. Receiving the pair's score. When the home team or away team scores, it updates the game score.

4. Get a summary of games by total score. Those games with the same total score will be returned ordered by the most recently added to our system.

✍️ As an example, if this is the current data in the system:

a. Mexico - Canada: 0 - 5
b. Spain - Brazil: 10 – 2
c. Germany - France: 2 – 2
d. Uruguay - Italy: 6 – 6
e. Argentina - Australia: 3 - 1

The summary would give us the following information:

1. Uruguay 6 - Italy 6
2. Spain 10 - Brazil 2
3. Mexico 0 - Canada 5
4. Argentina 3 - Australia 1
5. Germany 2 - France 2

🏗️ Project Structure

Project Structure

Let me go through each of the files and give a short explanation of what they are and why we need them:

• package.json – the configuration file of every Node.js app, created with npm or yarn, or any other package manager that uses the same approach.

• README.md – not much to say here – it's a simple text file that uses Markdown and contains the description of the project, plus any other information you want to put there.

• vite.config.js – the main configuration file that Vite uses, which you get when you do the installation from the previous step. The content of this file by default looks like this:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// <https://vitejs.dev/config/>
export default defineConfig({
  plugins: [react()],
})

But in my case, I had to add the test configurations so that we could run the tests. You will read more about this later in the article.

• setupTests.js – this one is used for configuring the unit tests. We put here any of the things we would like to have available in the tests we write.

For example, in order to be able to use unique keys when rendering multiple elements (because we React needs it), I am using the randomUUID()method of the Crypto interface to generate a v4 UUID using a cryptographically secure random number generator. And to make it available in my tests, I need to add it here, like this:

import { expect, afterEach } from 'vitest';
import { cleanup } from '@testing-library/react';
import matchers from '@testing-library/jest-dom/matchers';
import {randomUUID} from 'node:crypto';

// extends Vitest's expect method with methods from react-testing-library
expect.extend(matchers);

// runs a cleanup after each test case (e.g. clearing jsdom)
afterEach(() => {
    cleanup();
});

window.crypto.randomUUID = randomUUID;

• yarn.lock – this is generated automatically when run yarn installation and lock the version of the packages being used.

• .gitignore – comes out of the box from Vite installation. Here you define which files and folders you want Git to ignore, that is not get committed to your repo.

• index.html – this the app’s entry point. It's a simple HTML document that has a few meta tags, and includes the logo and the main script file.

• /src – contains a few different things we need to discuss:

1. First, it has the main.jsx file, which is where React and ReactDOM come in play. We also load here the default styles file I mentioned earlier.

2. It also has index.css which I have explained already.

3. Then we have App.jsx which is where our actual application code begins. This file can be considered as the main component in our application, as it contains all ‘inner’ parts of our app.

4. Then we have app.module.scss which contains styles for App component, using the CSS module convention to name the files with ‘module’ prefix and ‘scss’ extension.

5. Finally, we have App.test.jsx which contains a simple test for App component, using Vitest for testing framework.

🛠️ Components

Let me walk you quickly through each of the components in the application. They are located in the components folder.

/components folder contents:

• Footer – self-explanatory, contains the footer part of the app.

• GameStatus – used to show if a game has started, that is if it's being played.

• Header – self-explanatory, contains the header part of the app.

• MessageBoard – a small component used to display text messages that state when the games are starting or if we are looking at the “Summary” screen or the “Current Games”.

• Result – another small component showing game scores.

• Scoreboard – kind a parent component, serving as container that holds all the small ones in place.

• ScoreboardGrid – this is the most important component in the app, as it contains all the logic related to the timers. It holds all child components and it’s responsible for passing the necessary data to them via their props.

• TeamView – another small component serving as a representation of a team, which shows team’s flag and name.

⏱️ Timeouts

The timeouts – or more precisely the time intervals – in the application are implemented with the help of several React hooks. All of them are located in the hooks folder. I borrowed them from a very knowledgable and kinda famous guy named Josh W Comeau. I'll post the links in the end of the article.

So basically we use three hooks, one per type of time interval or timeout we need.

1. useInterval – this is based on the built-in JavaScript setInterval function and it's used for initial countdown, before the games start

2. useRandomInterval – this is an enhanced version of the previous one, and it’s used for randomly updating the score of the games, as well as randomly starting and stopping them

3. useTimeout – this is based on the built-in JavasScript setTimeout function and it’s used for deciding when to stop the playing time of the games and start finalizing them

🧾 How to Build the Project

By now you should have a decent understanding of what our application is and how its various parts are put together.

Let me now guide you, step-by-step, from the very beginning, and show you how I built it. I will add images where necessary, so that it’s easier for all of you to follow along.

📦 Dependencies

The dependencies we have are very few. Except Vite and Vitest, I have installed additionally only SASS, and the React Testing Library. Here is how my package.json file looks:

{
  "name": "scoreboard",
  "private": true,
  "version": "1.0.0",
  "type": "module",
  "author": "Mihail Gaberov",
  "scripts": {
    "dev": "vite",
    "test": "vitest",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^3.1.0",
    "jsdom": "^21.1.1",
    "sass": "^1.59.3",
    "vite": "^4.2.0",
    "vitest": "^0.29.7"
  }
}

🧑🏻‍💻 Installation

In this step I assume you are starting from scratch. We are going to use Vite for scaffolding the project. In order to do that you need to have Node.js installed on your system – at least version 14..18. I suggest that you update it to the latest stable version. And as a package manager you may go with either npm or yarn. In my case I use yarn.

In your terminal app run the following:

yarn create vite

And then follow the prompt.

Some of you may ask “Why Vite?” Here is a little praise of Vite that should answer that question.

After doing the installation we have the bare skeleton of a React app that we can start building on. Here is how it looks:

Default Vite Project

💡 When starting such projects, I usually wipe off what’s there by default. Meaning that I delete the files I don’t plan to use, clean up App.jsx, and update the index.html file.

Another thing you may have noticed already is that the only pure CSS file I kept is index.css. This is one of the files that comes by default from Vite’s installation. I kept it as it is because it contains some basic styling that I didn’t want to move anywhere else.

After the initial cleaning and adding the files for styling and testing App.jsx, the project looks like this:

First steps of the project in App.jsx

In the screenshot above, you can see what the App.jsx file looks like after my changes. I placed comments as placeholders for where the components I need to create will be.

We are now ready to start building the components in question. Usually there are several different approaches you can take when deciding what to begin with. In this case, we'll start from top to bottom, create the header component, then jump to the scoreboard component, and in the end we'll build the footer component.

You could also decide to first build the essential part of the app, that is the scoreboard and in the end to add the “hat” and the “shoes”.

But in any case, what I recommend is to create empty components for each of the placeholders we have placed, based on the idea we have in mind about what our application will be.

Usually I use something called “Live Templates” in my IDE (in case you are using different IDE, I am sure there is an alternative for it) that can generate different types of a boilerplate code.

In our case I use it for generating empty functional React components. This comes in very handy at this stage of the development process, because we can quickly create our project's components, leaving them empty. Then later we can start filling them up with content.

Live Templates in Webstorm

Generating boilerplate code for the components we will create

And this is what the result of the above looks like:

Generated boilerplate code for a functional component in React

🧩 How to Build the Header

In order to make the application to look more like a real-life one, I decided to add a small logo in the left part of the header, and a title next to it. Let’s see how it will look like in the browser and then how to implement it with code:

Application Header

First, I did a quick Google search and chose an appropriate image (the cup). I made sure to pick a SVG file for several reasons.

First and most important is the performance and the adjustability that come from it. And second, in the Vite default settings there is already an SVG logo added. So the only thing you need to do is to replace the existing one with yours. And then add some styling if necessary.

SVG logo

Let’s now look at the code of our brand new header component:

import './header.module.scss'
const Header = () => {
    return (
        <header>
            <img src='./logo.svg' alt='FIFA World Cup Scoreboard'/>
            <h2>FIFA World Cup Scoreboard</h2>
        </header>
    );
};

export default Header

If you keep the logo file in the public folder, you don’t need to worry about the path to the image. It’s taken care by Vite and you refer to it as it’s shown in the code above. The import statement in the beginning applies all styles to the header that make it looks like the picture.

header {
  display: flex;
  background-color: #fdbe11;
  justify-content: flex-start;
  align-items: center;

  img {
    width: 3rem;
    height: auto;
    margin: 1rem;
  }
}

After adding some tests, the content of the component folder looks like this:

Header component directory

I mentioned in the beginning of the article that we will use Vitest and React Testing Library to write the units/components tests for this application. Here is how the tests for the header look:

import { render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it } from 'vitest'
import Header from "./index"

describe('Header', () => {
    beforeEach(() => {
        render(<Header />)
    })
    it('renders correctly the app title', async () => {
        expect(screen.getByText(/FIFA World Cup Scoreboard/i)).toBeVisible()
    })

    it('renders correctly the app logo', async () => {
        const logo = screen.getByAltText('FIFA World Cup Scoreboard');
        expect(logo).toHaveAttribute('src', './logo.svg')
    })
})

As you probably can guess just by reading the tests, what we're doing here is checking for the app title and then the logo we saw on the left.

Congratulations 🎉 You just finished the implementation of the first building block of your application. Let’s continue now with the main area. This is where the essential functionality of the scoreboard will be.

🧩 How to Build the Scoreboard

The scoreboard supports two screens: one showing the scores of the games that are currently being played, and another one showing a summary of the end results.

Current Games screen

Summary screen

When I see this kind of layout design, I usually start thinking about a grid. Because, what’s a grid if not just rows and columns?

The modern CSS language has support for grid systems with just few lines of code, as you will see a bit later in this section. For example, to achieve this result I used the following styles:

.grid {
  list-style-type: none;
  margin: 1rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

Whenever I am about to implement a UI like this in a component based library such as React, I tend to mentally split it to separated blocks. These will turn into components.

Let me show you visually what I mean by this:

Thinking components - visual representation

I hope you can figure out what I am showing you on the picture above.

This is how I mentally split the design layout we have in place into representational components.

After defining the constituent parts of our application, it’s time to move forward and implement them in code.

First we need the ScoreboardsGrid component that will hold all the smaller ones and will contain the logic for managing different events based on time.

ScoreboardsGrid component directory

As you may have noticed, in addition to the usual files, here we have one more – ScoresReducer.js. This is where our reducer logic lives. It’s responsible for manipulating the application state, depending on what actions are being triggered. In other words, this is where we actually update the score when a team scores, and also where we start and finish games.

In the return statement of the component we make use of the rest of the components we defined earlier.

...
...
...
return (
        <>
            {timeElapsed === 0 ?
                <>
                    <MessageBoard message={getScoreBoardStateMessage()}/>
                    <div className={classes.grid}>
                        {gamesToRender?.map(pairScore => (
                            <Scoreboard
                                key={crypto.randomUUID()}
                                pairScore={pairScore}
                                status={getGameStatus(pairScore.startedGame)}/>))}
                    </div>
                </> :
                <MessageBoard message={`Games are about to start in ${timeElapsed} seconds.`}/>
            }
        </>
    );

The rest of the code consists of a few helper methods, dispatch methods, and the logic for starting and stopping the timers.

From here, things become even easier. We just are going to use our smaller components for displaying different things in our scoreboard app.

For example, the MessageBoard component is just a container that shows in a stylistic way a bit of a string, passed via its props. Here is the implementation:

import classes from "./message-board.module.scss";

const Index = ({ message }) => {
    return (
        <div className={classes.message}>
            {message}
        </div>
    );
};

export default Index;

Same goes for the [GameStatus](https://github.com/mihailgaberov/scoreboard/tree/main/src/components/GameStatus) and [Result](https://github.com/mihailgaberov/scoreboard/tree/main/src/components/Result) components. The difference between the later ones is that Result gets two arguments – the name of each team in a game – and displays them with a dash (’-’) in the middle. GameStatus is just showing whatever we pass through via its props, which happens to be a string signifying that a game is playing at the moment.

The only component that is a bit different is TeamView, because it contains both an image and text, representing the teams. The code itself is far from complicated. See for yourself:

import classes from "./team-view.module.scss";

const TeamView = ({teamData}) => {
    return (
        <div className={classes.team}>
            <img src={`https://flagcdn.com/${teamData.countryCode}.svg`} width="50" alt={`${teamData.name}`}/>
            <span>{teamData.name}</span>
        </div>
    );
};

export default TeamView;

Here I used a regular HTML img tag, setting the width using inline styling. The rest is pretty straightforward.

With that, our coding job is more or less done. As you have probably seen, all the component have tests. These, in most cases, are just simple checks to see whether the component is being rendered correctly.

Maybe the most interesting tests to talk about are the ones we added for the ScoreboardGrid component.

This is so because we are using React Testing Library asynchronicity support to test the state of the component in different moments of the time. In this way we are able to test the initial timer ticking, before the games start. And after it expires, we can use it to check that our Current Games screen is displayed correctly. I'm pasting the code here as well, for easier reading.

import { render, screen } from '@testing-library/react'
import { describe, expect, it } from 'vitest'
import ScoreboardsGrid from "./index"

describe('ScoreboardsGrid', () => {
    it('renders correctly all available scoreboards', async () => {
        render(<ScoreboardsGrid />)

        expect(await screen.findByText(/Games are about to start in 3 seconds./i)).toBeVisible()
        expect(await screen.findByText(/Games are about to start in 2 seconds./i)).toBeVisible()
        expect(await screen.findByText(/Games are about to start in 1 seconds./i)).toBeVisible()
        expect(await screen.findByText(/Argentina/i)).toBeVisible()
        expect(await screen.findByText(/Australia/i)).toBeVisible()
        expect(await screen.findByText(/Spain/i)).toBeVisible()
        expect(await screen.findByText(/Brazil/i)).toBeVisible()
    })
})

After you've completed the implementation of the entire application and have a cup of ☕ or a glass of 🚰, it’s time to think about possible improvements.

For example, if we have more time to work on this project, what would we add or change, to make it an even better scoreboard app?

🧩 How to Build the Footer

To give the application a more complete look, I’ve decided to add a footer component as well. This is how it looks:

Footer Component

The implementation of it is pretty simple, too. We have two links to social platforms and a bit of copyright text. Here is how I coded it:

import classes from "./footer.module.scss";
import packageJson from '../../../package.json';

const Footer = () => {
  const currentYear = new Date().getFullYear();

  return (
      <footer className={classes.footer} data-cy="footer">
        <ul>
          <li className={classes.footerLinks}>
            <a
                href="<https://twitter.com/mihailgaberov>"
                target="_blank"
                rel="noopener noreferrer"
                data-cy="twitterLink"
            >
              twitter
            </a>{" "}
            &bull;{" "}
            <a
                href="<https://github.com/mihailgaberov>"
                target="_blank"
                rel="noopener noreferrer"
                data-cy="githubLink"
            >
              github
            </a>
          </li>
          <li className={classes.footerCopyrights}>
            © {packageJson.author} {currentYear}. All rights reserved.
          </li>
          <li>
            <div className={classes.version}>v.{packageJson.version}</div>
          </li>
        </ul>
      </footer>
  );
};
export default Footer;

Again, in the component folder you will find the other files that are necessary for applying the styles and the tests for that component.

The code looks a bit cluttered because I used an unordered list and added the links and the text as a separated list elements. Then I used the tests to verify that the elements I want are rendered correctly.

Here is the essential part of the code that is doing this:

it('renders correctly social links', async () => {
    expect(screen.getByText(/twitter/i)).toBeVisible()
    expect(screen.getByText(/github/i)).toBeVisible()
  });

  it('has social links working correctly', async () => {
    expect(screen.getByText('twitter').closest('a')).toHaveAttribute('href', '<https://twitter.com/mihailgaberov>');
    expect(screen.getByText('github').closest('a')).toHaveAttribute('href', '<https://github.com/mihailgaberov>');
  });

  it("should contain copyright info", () => {
    expect(screen.getByText(/© Mihail Gaberov 2023. All rights reserved./i)).toBeVisible()
  });

  it("should contain version number", () => {
    expect(screen.getByText(/v.1.0.0/i)).toBeVisible()
  });

🚀 Possible Improvements

• Add a clock under the game status, say counting down the seconds, to make it look more like a real-time app

• Add some animation when updating the scores to make it easier for the user to spot the change

• Add some interactivity in general:

  • Clicking on each game leads to a details pane with the match details

  • Option for selecting a favourite team

  • Add another page/tab where users can read a history summary of the past games

Conclusion

That was a fun challenge. Especially if you are a football fan, right? ⚽

We learned about several interesting topics.

First we learned what a scoreboard is, and the ‘why’ and the ‘how’ behind it.

Then we learned about Vite and Vitest, which I think are currently the best tools to use when making a React app – especially if you don’t want to start from scratch and deal with Webpack manually.

Then we saw how to leverage JavaScript timeouts with React hooks, and thus create some kind of time-based interactivity.

And last, but not least, we had fun, didn't we? 🕺🏻

Thanks for reading 🙏🏻

References:

• Resources from Josh W. Comeau: for use-interval and use-timeout and use-random-interval

• An article from Kent C. Dodds about common mistakes devs make with the React Testing Library

We just published a full Vite course on the freeCodeCamp.org YouTube channel that will teach you how to use Vite effectively and efficiently to streamline your web development workflow.

Arsalan Khattak developed this course. Arsalan is a frontend developer and DevRel engineer on a mission to help developers learn frontend technologies. He has created many popular courses and has taught at events such as Google's DevFest and Microsoft's Reactor.

Vite is a modern build tool and development server designed to make web development faster and more efficient. Unlike traditional build tools, Vite uses an optimized development server that leverages native ES modules, resulting in lightning-fast development and build times. With Vite, you can create and maintain modern web applications with ease and speed.

What makes Vite fast? Vite's speed is mainly due to its innovative development server, which allows for lightning-fast hot module replacement (HMR) and static asset handling. With HMR, changes you make to your code will be reflected in your browser almost instantly, without requiring a full page refresh. This feature alone can save you hours of development time.

One of the first things you'll learn in this course is how to create a static server with Vite. This will enable you to quickly and easily serve up your web application for local development and testing.

Vite makes it easy to use templates to speed up your development process. You'll learn how to use templates in your Vite project to quickly scaffold out your application and get up and running faster.

Tailwind is a popular utility-first CSS framework that helps you quickly create beautiful, responsive web applications. In this course, you'll learn how to integrate Tailwind with Vite, allowing you to take advantage of its powerful features to streamline your development process.

In this course, you'll also learn how to use environment variables in your Vite project. This will enable you to create dynamic web applications that can adapt to different environments, such as development, staging, and production.

Once you've created your Vite project, you'll need to deploy it to a hosting platform. In this course, you'll learn how to deploy your Vite project to popular hosting platforms such as GitHub, Netlify, and Vercel.

Finally, you'll learn how to configure Vite to suit your specific development needs. This will enable you to customize Vite to work best with your particular development environment, workflow, and tools.

By the end of this course, you'll have a solid understanding of how to use Vite to make modern web development faster and more efficient. You'll be able to create and maintain modern web applications with ease and speed, saving you time and effort in the development process.

Watch the full course below or on the freeCodeCamp.org YouTube channel (2-hour watch).

And Tailwind CSS and React are a great combo to use if you're building a frontend project.

In this article, you will learn how to setup your coding environment with Vite, install React and Tailwind CSS with their latest versions, and start building your projects right away.

We will be using these tools:

• VSCode for our code editor
• Node.js for our package manager
• Vite for our development environment

If you don't have these tools installed, you can do so by clicking the links for each one above.

After setting up Node.js for your VSCode, you can now use Node.js to install Vite for your project using the terminal.

Step 1 – Create Your Project Folder

Open your terminal, and navigate to the folder where you want to build your project – for example Desktop. Input the command below in the terminal and click enter:‌

npm create vite@latest your-project-name -- --template react

The command above will create your project folder.‌

My project name is "food-app", the food-app folder will be created in the Programming folder on my Desktop

‌Note that we have used -- --template react to specify that we are building a React app with Vite.

Step 2 – Navigate to Your Project Folder

Input the command below in your terminal and click enter:

cd food-app

‌This command will navigate to your project folder. You should have this:

Inputing "cd food-app" in terminal to navigate to the "food-app" folder

Step 3 – Install Tailwind CSS and Other Dependencies

Input the command below in your terminal and click enter:

npm install -D tailwindcss postcss autoprefixer

This command will install the following:

• The Tailwind CSS framework
• Post CSS, which provides plugins to perform different functionalities like prefixes in Vanilla CSS
• Autoprefixer, which is a PostCSS plugin to parse CSS and add vendor prefixes to CSS rules.

Your folder should look like this in your VSCode:‌

Confirm that you have the below text in your package.json‌:

Step 4 – Generate the Configuration Files

Input the command below in your terminal and click enter:

npx tailwindcss init -p

This command generates tailwind.config.cjs andpostcss.config.cjs configuration files, also known as config files. They help you interact with your project and customize everything.

Step 5 – Configure Source Paths

Add the paths to all of your template files in your tailwind.config.cjs file. Template files include HTML templates, JavaScript components, and other source files that contain Tailwind class names. This is to make sure that vanilla CSS is generated for the corresponding elements.

Your tailwind.config.cjs looks like this for now:

Current config file named as tailwind.config.cjs, it contains the module.export object to customize tailwind with property like content, theme and plugins

Add this in your content section.

"./index.html",


"./src/**/*.{js,ts,jsx,tsx}",

So your file should now look like this:

Config file after updating the content property

Step 6 – Add Tailwind Directives to Your CSS

Tailwind directives are custom Tailwind-specific statements that instruct CSS how to behave. You'll need to add directives for three of Tailwind’s layers.

@tailwind base injects Tailwind's base styles and base styles registered by plugins, @tailwind components injects Tailwind's component classes and component classes registered by plugins, while @tailwind utilities injects Tailwind's utility classes and utility classes registered by plugins.

Add the statements below to your ./src/index.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

@tailwind base;
@tailwind components;
@tailwind utilities;

Your index.css file contains some default styling. You can clear all that and paste the three lines of directives above.

Step 7 – Start Your Vite Server

Run your build process with the npm run dev command in the terminal. You should get this message below in your terminal‌:

The message you get after running your Vite server that provides localhost link, network, and help.

Hold the ctrl key and click on the link at Local – here it's http://127.0.0.1:5174. It will open a new tab in your browser if you do that.

A screenshot of the webpage on first run

Our styles are broken because we cleared the default CSS in the index.css file to input our directives.

Step 8 – Start Writing Tailwind CSS

You can start using Tailwind’s utility classes to style your content. Navigate to your App.jsx file, where you should see this below:

Screenshot of the App.jsx file

Clear the return element starting from line 9, and replace it with the text below to test your Tailwind to know if it is working. Input this:

<h1 className="text-3xl font-bold underline text-center">Hello world!</h1>

Now you have this:

Adding the h1 element to the App.jsx file

According to the above image, text-3xl font-bold text-red-500 underline text-center has been added as a className to the div element. This is the standard for writing Tailwind CSS styling.

You can learn more about Tailwind classnames here. Your browser should update automatically.

Screenshot of the webpage after add the h1 element

You can now start building your React projects and style them with Tailwind CSS.

Conclusion

You have now created a React and Tailwind CSS app using Vite, a frontend build tool. You have learned what Vite is and how to create a Vite app with a React template, as well as how to install Tailwind and other dependencies.

Thanks for reading this article. If you enjoyed it, consider sharing it to help other developers.

You can reach me on Twitter, LinkedIn and GitHub.

Happy Learning.‌

Documentation is a crucial aspect of software development. But developers often neglect it because it can be a hassle to maintain. This is why it's important to use tools that help simplify this process.

In this tutorial, you'll learn how to build a complete docs site quickly by utilizing a modern tool called VitePress.

What is VitePress?

VitePress is a simple and performant static site generator built on top of Vite that lets you create docs in a matter of minutes. It is powered by Vuejs and Vite with built-in customizable components.

VitePress powers some popular documentation sites like Vuejs, Vitest, faker.js, and Vite itself.

Prerequisites

To follow along with this tutorial, you need to have a basic understanding of the following:

• Markdown syntax
• Basic understanding of NPM and Vite

Here's a screenshot of what you'll build by the end of this tutorial:

Want to play around with it? Check out the live demo. Also, the source code for this can be found on GitHub.

Step 1: Create a New Project

If you already have a folder created, you can skip this step and go on to the next one. If not, use the following command to create a project folder and move into the folder.

mkdir project-name
cd project-name

Next you need to initialize the project with your preferred package manager. I'll be using NPM for the rest of this guide.

npm init
// or use this command if you want to skip all the questions
npm init -y

If you used the first command, you'll be prompted with certain questions, so just complete them as appropriate.

After a successful operation, you should have a package.json file in your root directory. This is where the VitePress dev dependency will be installed.

Step 2: Install VitePress

The next step is to add VitePress and Vue as dev dependencies to your project, like this:

npm install --dev vitepress vue

You've successfully installed VitePress and Vue and added them as dev dependencies. Now you can start creating creating your respective doc files.

But before you do that, I believe it's essential to explain how VitePress works.

How Does VitePress Vork?

VitePress makes use of Markdown .md files for its markup which is automatically converted into static HTML. In other for this to work, a special folder called docs gets created in the root directory.

This folder behaves similarly to the pages folder in NextJS, where any .js file created in the directory is automatically treated as a web page. In this case a file called index.md will be the treated as index.html and serve as the root of your docs template.

Now that you understand how that works, you can create your respective doc files.

Step 3: Create the Respective Doc Files

You can create the docs folder and the index.md file manually, or you can do it with the terminal like a hacker.

mkdir docs && echo '# Hello VitePress' > docs/index.md

This command simply creates a folder called docs and adds an index.md file containing a h1 element that says "Hello World".

With this, you can boot up your dev environment to see what has been created so far.

Step 4: Boot Up Your Dev Environment

In order to run your docs locally, you need to add the following scripts inside the package.json file. Simply copy the code below and replace the "script" object with it:

// package.json
"scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:serve": "vitepress serve docs"
  },

Finally, the documentation site can be served on a local server by running the command below:

npm run docs:dev

This will start a hot-reloading development server at http://localhost:5173, and you can visit it to see your docs site.

Here's the output:

All you had to do was add the markup and VitePress handled the appearance from its template engine. In the next session, you'll learn how you can customize the docs to fit your needs.

How to Customize Your Docs with VitePress

First create a .vitepress folder inside the docs directory you created earlier on. This is where all VitePress-specific files will be placed.

Inside this new directory, you need a config.js file. Again, you can use the terminal command like so:

mkdir .vitepress && touch .vitepress/config.js

To test this config file, you can start by changing the meta title and description of your docs site. Copy this markup and paste into the config.js file:

// .vitepress/config.js
export default {
  title: 'Adocs',
  description: 'An awesome docs template built by me'
}

If you check the dev tools, you should see the changes in the meta title and description.

How to Update the Title and Logo

In order to change the logo title and add an image, copy the markup below and paste it into a new object called themeConfig inside the same config.js file. This will overwrite the current title and add a logo to your docs site.

// config.js
export default {
  themeConfig: {
    logo: "/logo.svg",
    siteTitle: "Adocs",
  },
};

For the image source, you can pass in an image URL or specify the path to a local image. To do it locally, make sure you place the image within the public directory.

Here's the output:

Note that files in the public directory are served at the root path. So instead of ../public/logo.svg, just use /logo.svg.

How to Customize the Navbar

Customizing the Navbar is a pretty straightforward process as well. Inside your themeConfig file, paste the markup below. Here we have an object that contains two properties: the anchor text text, and the path link defines the URL path.

// .vitepress/config.js
{  
  // ...
   nav: [
    { text: "About", link: "/about" },
    { text: "Contact", link: "/contact" },
    { text: "Guide", link: "/guide" },
    { text: "Configs", link: "/configs" },
    { text: "Changelog", link: "https://github.com/..." },
  ],
  // ...     
}

Essentially navigating to localhost:5173/about should take you to an about page (though we haven't created that yet).

Here's the output:

Navigation links can also be dropdown menus, too. To add one, simply replace any of the links property with the items object which contains an array of links.

// .vitepress/config.js
{
  text: "Changelog",
  items: [
   { text: "v0.0.1", link: "/item-1" },
   { text: "v0.0.2", link: "/item-2" },
   { text: "v0.0.3", link: "/item-3" },
  ],
},

Now the changelog will become a dropdown menu with the respective links you pass inside.

Here's the output:

How to Add Social Icons

Navigation menus usually have social icons that visitors can use to visit your social platforms. To add them, define a new object called socialLinks inside themeConfig and simply pass in the social icon and the link you want it to navigate to.

// .vitepress/config.js
socialLinks: [
  { icon: "github", link: "https://github.com/Evavic44/adocs" },
  { icon: "twitter", link: "https://twitter.com/victorekea" },
  { icon: "discord", link: "..." },
]

By default, only 8 icons (Discord, Facebook, GitHub, Instagram, LinkedIn, Slack, Twitter, and YouTube) are provided. If you want to add a custom icon, use the SVG property to define an svg image. You can get free icons from icones.js.org.

For example, here's a snippet of the apple icon.

{
  icon: {
    svg: '<svg role="img" width="26.01" height="32" viewBox="0 0 256 315"><path d="M213.803 167.03c.442 47.58 41.74 63.413 42.197 63.615c-.35 1.116-6.599 22.563-21.757 44.716c-13.104 19.153-26.705 38.235-48.13 38.63c-21.05.388-27.82-12.483-51.888-12.483c-24.061 0-31.582 12.088-51.51 12.871c-20.68.783-36.428-20.71-49.64-39.793c-27-39.033-47.633-110.3-19.928-158.406c13.763-23.89 38.36-39.017 65.056-39.405c20.307-.387 39.475 13.662 51.889 13.662c12.406 0 35.699-16.895 60.186-14.414c10.25.427 39.026 4.14 57.503 31.186c-1.49.923-34.335 20.044-33.978 59.822M174.24 50.199c10.98-13.29 18.369-31.79 16.353-50.199c-15.826.636-34.962 10.546-46.314 23.828c-10.173 11.763-19.082 30.589-16.678 48.633c17.64 1.365 35.66-8.964 46.64-22.262"/></svg>',
    },
  link: "https://www.apple.com/",
},

For custom SVG icons, make sure you add the role="img" property to the svg tag, as this allows the string convert it properly.

Here's the output:

How to Add a Sidebar

VitePress also comes with built-in components like sidebar menus. To add a sidebar, create an object called sidebar and inside it, add nested objects that take in three values: the nested title, collapsible functionality (default is set to true), and the nested links.

// .vitepress/config.js
sidebar: [
    {
      text: "Section A",
      collapsible: true,
      items: [
        { text: "Introduction", link: "/introduction" },
        { text: "Getting Started", link: "/getting-started" },
      ],
    },
    {
      text: "Section B",
      collapsible: false,
      items: [
        { text: "Introduction", link: "/introduction" },
        { text: "Getting Started", link: "/getting-started" },
      ],
    },
    {
      text: "Section C",
      collapsible: true,
      items: [
        { text: "Introduction", link: "/introduction" },
        { text: "Getting Started", link: "/getting-started" },
      ],
    },
  ],

By adding collapsible: "true" to the sidebar object, it shows a toggle button to hide/show each section. You can create as many sections as you want.

Here's the output:

You can see section B is not collapsible, and we have that nice next page button on the bottom of the page.

How to Set Up Page Routing

As explained earlier, VitePress automatically converts every .md file inside the root of the docs directory to static HTML that can be accessed in the address bar. For instance the index.md is converted to index.html, and about.md, about.html and so on.

Since you've created your nav links and pointed them to their respective URLs, you can access these pages easily by creating them.

docs/
├── .vitepress/
│   └── config.js
├── public/
│   └── logo.svg
├── about.md
├── contact.md
├── guide.md
├── configs.md
└── get-started.md

Create these files inside your docs folder and add a simple markup inside them just to see how this works. This page is basic markdown so all your markdown syntax like links, code blocks, headings, and so on works here.

Just for testing purposes, copy this markdown content and paste it inside any of the .md files you just created:

# About

Welcome to the about page.

This markdown supports html elements like the `p` tag coupled with inline styles

<p style="color: #ff7340; border: 1px solid rgba(255, 135, 23, 0.25); border-radius:5px; padding: 1rem;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>

Even satire code snippets with syntax highlighting are also supported. 😅

```js
const lang = prompt("What is your favorite programming language?");

(lang === "JavaScript") | (lang === "javascript") | (lang === "js")
  ? alert("JavaScript to the world! 🚀🟡")
  : alert(`We don't permit such languages here 💩`);

Of course, images are not left out.

Here's the output:

![Image](https://www.freecodecamp.org/news/content/images/2022/11/page-routing-2.gif)

Great! You've set-up the docs, added a navigation menu with a dropdown feature, added a sidebar, and customized the links to navigate to different pages. Next up, let's work on the home page.

## How to Customize the Homepage

Just like every other component, VitePress provides us with markup for building the homepage. I've broken it down into three parts: Hero, features, and footer section.

### The Hero Section

First, we'll start with the hero section. Replace the Hello World text in the `index.md` page with the following markup:

```yml
# docs/index.md
---
layout: home

hero:
  name: Adocs
  text: Static docs template built with VitePress.
  image:
    src: /logo-big.svg
    alt: Adocs logo
  tagline: A free to use template for creating docs for your projects
  actions:
    - theme: brand
      text: Get Started
      link: /get-started
    - theme: alt
      text: View on GitHub
      link: https://github.com/evavic44/adocs-template
---

The Features Section

Additionally, you can add a features section after the hero section. Simply paste the code below under the hero objects:

# /docs/index.md
---
link: https://github.com/evavic44/adocs-template

features:
  - icon: ⚡️
    title: Adocs, The DX that can't be beat
    details: Lorem ipsum...
  - icon: 🎉
    title: Power of Vue meets Markdown
    details: Lorem ipsum...
  - icon: 🔥
    title: Simple and minimal, always
    details: Lorem ipsum...
  - icon: 🎀
    title: Stylish and cool
    details: Lorem ipsum...
---

Here's the output:

The Footer Section

You can add a footer message on the bottom of the page, but this will only show up in the home page.

According to the VitePress docs:

Note that the footer will not be displayed when the SideBar is visible.

To add the footer component, go to the config.js file and paste the markup inside the themeConfig object:

// .vitepress/config.js
 footer: {
   message: "Released under the MIT License.",
   copyright: "Copyright © 2022-present Adocs",
 },

Here's the output:

Aside from the markup, you can also customize the components using custom CSS to change things like fonts family, colors, layout, ETC.

How to Add Custom CSS

The default theme CSS is customized by overriding root level CSS variables. If you want, you can check out the full list of CSS variables that are customizable.

To do get started, create a .vitepress/theme directory, and inside this theme folder, add an index.js and custom.css file. If you've been following along, you can use the terminal command below to do this quickly:

mkdir docs/.vitepress/theme && touch docs/.vitepress/theme/index.js && touch docs/.vitepress/theme/custom.css

If you run into any issues with the terminal command, just create the files manually and move on to the next step.

Here's an overview of the folder structure:

docs/
├── .vitepress/
│   ├── config.js
│   └── theme/
│       ├── index.js
│       └── custom.css
├── public/
│   └── logo.svg
├── about.md
├── contact.md
├── guide.md
├── configs.md
└── get-started.md

After creating these files, inside the .vitepress/theme/index.js file, paste the import commands:

// .vitepress/theme/index.js
import DefaultTheme from "vitepress/theme";
import "./custom.css";

export default DefaultTheme;

Color Theme

The colors are controlled by the CSS variables. You can simply replace them with any colors you want.

Note that this color has a provision for both light and dark mode. So make sure you change them accordingly.

Here's an example of my custom colors:

/* .vitepress/theme/custom.css */

:root {
  --vp-c-brand: rgb(255, 115, 64);
  --vp-c-brand-light: rgb(255, 87, 25);
  --vp-c-brand-lighter: rgb(255, 115, 64);
  --vp-c-brand-dark: #FF622D;
  --vp-c-brand-darker: rgb(226, 60, 0);

  --vp-c-sponsor: #fd1d7c;
}

If you don't see the effects immediately, try stopping the server and starting it again.

Aside from the color themes, you can also override other things like font family, typography, layout, breakpoints, and so on.

How to Use Custom Fonts

You can import Google fonts inside the CSS file to override the default font family.

@import url(https://fonts.googleapis.com/css?family=Space+Mono:regular,italic,700,700italic);
@import url(https://fonts.googleapis.com/css?family=Space+Grotesk:regular,italic,700,700italic);

:root {
  --vp-c-brand: #ff7340;
  --vp-c-brand-light: #ff5719;
  --vp-c-brand-lighter: #ff7340;
  --vp-c-brand-lighter: rgba(255, 135, 23, 0.25);
  --vp-c-brand-dark: #ff622d;
  --vp-c-brand-darker: #e23c00;

  --vp-c-sponsor: #fd1d7c;

  /* Typography */
  --vp-font-family-base: "Space Grotesk", "Inter var experimental", "Inter var",
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
    Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

  /* Code Snippet font */
  --vp-font-family-mono: "Space Mono", Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

With the --vp-font-family-base variable you can change the main font and --vp-font-family-mono, the font for code snippets.

Here's the output:

You've successfully customized the theme and changed the font family using CSS. Though there's more you can do in regards to styling, but at this point, I hope it's clear how you can customize your docs with CSS.

Let's discuss hosting in the next section.

How to Host Your Doc Site

You can publish or host your docs site when you're done to different platforms like Netlify, Vercel, AWS Amplify, and so on.

First, run the build command:

npm run docs:build

This should create a new dist folder that contains all the static files of your docs.

In deciding on what hosting service to use, you can pick any of the options I mentioned earlier but we'll be using Vercel in this guide. Also, feel free to look at other alternatives of your choice.

If you don't have a Vercel account, follow this guide to create one and configure your Git provider before you move on to the next step.

Assuming you've successfully set-up your account and uploaded your docs site to Vercel, navigate to the project > settings > build and deploy settings, and paste the following commands to their respective fields:

• Build command: npm run docs:build
• Output directory: docs/.vitepress/dist

After editing the settings, save them and deploy your site!

Conclusion

In this tutorial, you've set-up a full-fledged documentation site and customized it using CSS and VitePress built-in components.

Just keep in mind that this tutorial only covers a fragment of what is possible with VitePress. To learn more, check out the VitePress docs.

Additional Reading

Here are a few things not covered in this article that I think is also worth looking into:

• Custom Containers
• Using Vue in markdown
• Team Section
• Carbon Ads

Resources

• Live Demo
• GitHub Repo

If you are an open source fan like myself or you enjoy hearing about such cool projects, do follow me on my socials so you don't miss my next post. Cheers. 🍷

GitHub | Twitter | Blog | Portfolio

Test Driven Development (TDD) is one of the best ways to make sure your code is high quality and works like it's supposed to work. It can also help you create reliable builds during continuous deployments.

In this post, we will learn how to create a Svelte application using TDD methods.

What We're Building

We are going to build a vertical tabs component where we can switch between three tabs. We are going to build this component by writing test cases first and developing the component functionality after that to make the tests more effective.

Final implementation

Prerequisite

I will explain all the steps needed to create an app and you can follow along with the code. It's great if you have basic programming knowledge and fundamental knowledge of HTML and CSS for this tutorial.

Also, you'll need to have Node.js installed. You can see how to do that here if you don't have it already.

What is Test-Driven Development?

The basic idea of test-driven development, or TDD, is to write the test before you implement the actual functionality. This helps you clearly figure out what you're developing and how it works.

You first watch the test fail, and then you write the code to make it pass. This ensures that there are no false positive tests in your code.

TDD is a methodology you can apply to any programming language. It is more prevalent when developing backend applications that contain business logic that you can easily test.

The good news is, you can apply similar techniques to test your front-end applications as well.

Three stages of TDD

The three stages of TDD are:

1. Red stage – Write the test and watch it fail
2. Green stage – Write the minimum code required to make the test pass
3. Refactor – Cleanup and refactor the code to make it more robust

Three stages of TDD

What is Vitest?

Vitest is an up-and-coming testing framework which has similar functionality to Jest.

Since we are using Vite as our build tool for Svelte in this tutorial, Vitest has very good integration with Vite and offers a similar testing environment without needing extra configuration.

How to Create a Svelte Application

We are going to create a Svelte application using Vite as the build tool. You can do that with this command:

npm create vite@latest

This will create a new project, and you can follow the steps below to create and setup the project:

1. Enter the name of the project. This will also create a new folder with the project name. In this example, I will add the project name as svelte-tdd-vitest.
2. You can select the framework in the next step. Let's choose svelte as the framework.
3. Then you can enter the variant of the framework. We can choose the TypeScript variant for this article. If you are not comfortable with TypeScript, you can also choose JavaScript in this option.

Initialise Svelte project with Vite

You can then follow the helpful steps provided in the terminal to install the dependencies and start the application. Run the following command:

cd svelte-tdd-vitest
npm install
npm run dev

npm install will install the dependencies of the project.

npm run dev will start the development server. You should see the app running in the port specified in the terminal.

Vite Server started using npm run dev

Congrats, you can now see the starter app running in your browser. You can open the project in your favourite Code Editor and start working.

How to Set Up Vitest

You can add Vitest to the project right now as a dev dependency. This means that Vitest will not be packaged into the production build of the application since you will be running the test in your local environment.

npm install -D vitest

Vitest can read the config of Vite inside the vite.config.js file and prepare the test environment similar to the build environment. This makes the test more reliable. So you can reuse the Vite config file and add more options for the configuration of Vitest.

You can also override the config for the Vitest by creating a new file called vitest.config.js in the project root. So now, create a new file called vitest.config.js:

import { defineConfig } from 'vitest/config'
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
  plugins: [
    svelte({ hot: !process.env.VITEST }),
  ],
  test: {
    environment: 'jsdom',
  }
})

There are a couple of configs we are adding to the file

1. We are disabling Svelte's hot module reload when tests are running.
2. We are defining the environment for running the test as jsdom. It helps in mocking the DOM API and running the tests in a reliable method.

In order to use the jsdom you need to add it as an Dev Dependency as well. So let's install that package using the terminal.

npm install -D jsdom

After installation, let's add a couple of scripts to the package.json file to start the Vitest test from the npm command line:

"scripts": {
    ...
    "test": "vitest",
        "coverage": "vitest run --coverage"
}

How to Create the First Test

You now have all the setup needed to write your first test. Create a new file called sample.spec.ts inside the lib directory.

import {describe, test, expect } from 'vitest';

describe("Example File", () => {
    test("Sample test", () => {
        expect(1 + 3).equal(4);
    });
});

Let's break down the different functions used to create this test file:

1. describe – you use this to group similar test together and benchmark tests when generating your reports. It takes a name and a function that contains the group of tests.
2. test – Represents a single test. It can contain multiple expectations within it. It is created by passing a name of the test and the function to run the test.
3. expect – Represents the expression which you're testing.

There are multiple different ways to write your test based on what you are testing. You can have a look at the complete API for Vitest in the official API Reference.

Let's run the test using the following npm command:

npm run test

Running the test

How to Add the Global Test Config

You are going to be using the describe, test, and expect functions a lot in the test files and it might be verbose to import them in all the test files. So Vitest has a nice config where you can set these global imports and so you don't have to add them to each file.

So let's update the vitest.config.js file with this configuration:

export default defineConfig({
  ...
  test: {
    ...
    globals: true
  }
})

After adding this globals equals true line in your config, you can now remove the imports in your spec file.

If you are using TypeScript, your TypeScript compiler will complain in your spec file. You can solve that by adding the following line to your tsconfig.json file:

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "compilerOptions": {
    ...
    "types": ["vitest/globals"]
  },
}

Now your test can look like this. This is not a huge upgrade for this small file, but when you have lots of spec files, this config change is useful.

describe("Example File", () => {
    it("Sample test", () => {
        expect(1 + 3).equal(4);
    });
});

How to Create a Svelte Component

We will create a new svelte component called VerticalTabs.svelte. The requirements are to create a vertical tab component that can contain a few items and for the user to be able to select a particular tab to view its content in the right side.

The component will be divided into two parts. The left side displays all the tabs. The right side displays the content based on the tab.

Let's create the basic HTML and CSS styles needed for the component. We will add the functionality to switch tabs after writing the tests.

<div class="vertical-tab-container">
    <ul class="vertical-tab">
        <li>First Tab</li>
        <li>Second Tab</li>
        <li>Third Tab</li>
    </ul>

    <div class="vertical-tab-content">
        <h2>First Tab Heading</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem aut deserunt veniam tempora deleniti quos reprehenderit natus. Animi, obcaecati dolorum, culpa, maiores maxime ullam soluta unde rerum nihil temporibus quibusdam!</p>
    </div>
</div>

<style>
    .vertical-tab-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        border: 1px solid gray;
        border-radius: 1rem;
    }

    .vertical-tab {
        margin: 0px;
        padding: 3rem;
        list-style: none;
        border-right: 1px solid gray
    }

    .vertical-tab li {
        margin: 2rem 0;
    }

    .vertical-tab-content {
        flex:1
    }
</style>

In this code, you are adding simple elements like an unordered list to display the list of tabs. You are styling it in the <style> tag which will be locally scoped CSS for this component.

Then, you are adding <h2> tag to display the tab heading and a paragraph tag <p> to show more dummy text for the tab. You're using flex to show the two items side by side and the property of flex: 1 on the content will make that container take all the remaining available space to expand.

The component should look like the below image:

Vertical Tab initial

How to Mount the Svelte Component in Test

Now you need to create the first test for the component by mounting the svelte component and then checking to see if you can find the "First Tab" text in the component.

So create a new spec file called VerticalTabs.spec.ts:

import VerticalTabs from "./VerticalTabs.svelte";

describe("VerticalTabs Component", () => {

    test("should render the component", () => {
        // Create a new container for the test
        const host = document.createElement('div');

        // Append the new container in the HTML body
        document.body.appendChild(host);

        // Create an instance of the vertical tab
        const instance = new VerticalTabs({ target: host });

        // Check if the instance has value
        expect(instance).toBeTruthy()

        // Test if we can find the "First Tab Heading"
        expect(host.innerHTML).toContain("First Tab Heading")

    });

})

In order to mount the Svelte component, you need to first create a div container and attach that div to the body of the HTML document. Then you need to attach your component to the div. You can then test the innerHTML of the main container to see if you have the required content.

Now this test should pass since you have the First Tab Heading content displayed in the component.

Going through this long process in all the steps might prove to be difficult. So let's add another package to make the job easier. The package is testing-library/svelte and it provides more features to make the assertions easy and less verbose.

How to Use the Svelte Testing Library

First, you'll need to install the library:

npm install -D @testing-library/svelte

Let's update the previous test to make it less verbose and let testing-library handle all the heavy lifting for us. You can use the render function to add the component to the testing page.

import VerticalTabs from "./VerticalTabs.svelte";
import { render, screen } from '@testing-library/svelte';

describe("VerticalTabs Component", () => {

    test("should render the component", () => {

        render(VerticalTabs);

        const firstTabNode = screen.getByText(/First Tab Heading/i)

        expect(firstTabNode).toBeTruthy()
    });

})

After the render function, add the component to the testing page. You can use the screen object imported from the library to query the nodes that are rendered.

There are multiple methods inside this object to make testing easy, and you will use one of the methods to get the text in the component.

getByText will return the instance of a given text. You are expecting the node to contain some value.

There are three main ways to retrieve the element in the testing library, and each serves a different purpose:

1. getByText – This will throw an error when the text is not found and the test will fail
2. queryByText – This will return null when the text is not found
3. findByText – This will also throw an error when the text is not found and you can use it when doing async tests where the element will take some time to appear/disappear

You can find a useful summary of these helper functions in the official docs page.

Summary screenshot from Official docs of testing library

You can find more details on this API in this official page.

How to Build the Tab Switching Feature

We will start adding the feature to switch tabs in the component and test the component by writing the test first.

Red stage

Let's write a test the switch to a different tab on click of the "Second Tab" list item.

Since we don't have this functionality implemented, we will fail this test first and that's okay. Once we fail the test, we should write the logic to make it pass in the next step.

So let's write a failing test:

test("should switch tabs", async () => {
        render(VerticalTabs);

        const secondTabElement = screen.getByText(/Second Tab/i);

        fireEvent.click(secondTabElement)

        await screen.findByText(/Second Tab Heading/i);
})

We are using the fireEvent from the testing library to simulate the click of the element. We can make the test async and await for the element since the text will change after the element is clicked.

You should have a failing test now:

Test failing unable to find the content

Green stage

Let's add the logic to change the tab in the Svelte component. We can do that easily by creating a selectedIndex variable and changing its value based on the selected tab.

<script lang="ts">
    let selectedIndex = 0;

    const changeSecondTab = () => {
        selectedIndex = 1;
    }
</script>

<div class="vertical-tab-container">
    <ul class="vertical-tab">
        <li>First Tab</li>
        <li on:click={() => changeSecondTab()}>Second Tab</li>
        <li>Third Tab</li>
    </ul>

    <div class="vertical-tab-content">
        {#if selectedIndex == 0}
            <h2>First Tab Heading</h2>
            <p>...</p>
        {:else if selectedIndex == 1}
            <h2>Second Tab Heading</h2>
            <p>...</p>
        {/if}
    </div>
</div>

Note: This is not the best implementation. It is only meant for showing that you can do minimal work to make the test pass. We will clean it up in the next stage

We have a method changeSecondTab that will change the selectedIndex value to 1 which will make the #if condition to change the tab. Even though it is not the best solution to handle all cases, we have a starting point.

Let's look at the test now. It should be working:

Refactor

Let's fix the implementation to make it more generic and have it work for all three tabs. We can also add an indicator to show which tab is currently selected.

<script lang="ts">
    let selectedIndex = 0;

    const changeTab = (index: number) => {
        selectedIndex = index;
    }
</script>

<div class="vertical-tab-container">
    <ul class="vertical-tab">
        <li class:selected={selectedIndex == 0} 
            on:click={() => changeTab(0)}>First Tab</li>

        <li class:selected={selectedIndex == 1} 
            on:click={() => changeTab(1)}>Second Tab</li>

        <li class:selected={selectedIndex == 2} 
            on:click={() => changeTab(2)}>Third Tab</li>
    </ul>

    <div class="vertical-tab-content">
        {#if selectedIndex == 0}
            <h2>First Tab Heading</h2>
            <p>...</p>
        {:else if selectedIndex == 1}
            <h2>Second Tab Heading</h2>
            <p>...</p>
        {:else}
            <h2>Third Tab Heading</h2>
            <p>...</p>
        {/if}
    </div>
</div>

<style>
    ...
    .selected {
        color: blue;
    }
</style>

We have created a method changeTab that will be called on the click of each element and then change the selectedIndex. This will cause the #if logic to change the tab based on its value.

We also have class:selected followed by an expression and when the expression becomes true, the selected class is added to the element. So we have added one more CSS class and we made the text colour blue to show the selected tab.

Finished vertical tabs component

Test after finishing refactor

We have now confirmed that the test is also passing after the refactor. You can continue this process to add more tests and features to your component.

How to Add Animation

Svelte makes it easy to add animation when content is changed. You can make use of the transition directive to add pre-built animation to your application.

So let's add a fly animation when the content changes. You can import the fly animation from svelte/transition and then add it to the element using transition:fly. This will add the default fly animation when the content flies out and new content flies in. Such a neat effect with just a single line of code!

import { fly } from 'svelte/transition';

<div class="vertical-tab-content" >
        {#if selectedIndex == 0}
            <div transition:fly>
                <h2>First Tab Heading</h2>
                <p>...</p>
            </div>
        {:else if selectedIndex == 1}
            <div transition:fly>
                <h2>Second Tab Heading</h2>
                <p>...</p>
            </div>
        {:else}
            <div transition:fly>
                <h2>Third Tab Heading</h2>
                <p>...</p>
            </div>
        {/if}
    </div>

Animation brings life to your application and helps it stand out. I am a big fan of the simple animation transition system in Svelte.

Conclusion

In this tutorial, you have learned how to create a new component using test-driven development methodology. Please share your feedback on this post and let me know your thoughts.

Thanks for reading! You can contact me on Twitter @sriram_thiagar. I regularly post articles on my blog eternaldev.com if you want to read more articles from me.

Hello everyone. I am Sriram, and I work as a Full Stack developer. I like to share my learning with others. I have been blogging for more than a year now on my website.

In this article, I will share with you the different ways of importing SVGs in React, as well as how the process works under the hood.

Let's get started.

What Is an SVG?

SVG, short for Scalable Vector Graphic, is an image format used for rendering two-dimensional (2D) graphics on the internet.

The SVG format stores images as vectors which are graphics made up of points, lines, and curves based on geometry and mathematical formulas.

Because they are based on numbers and values rather than a grid of pixels like raster images(.png and.jpg), they do not lose quality when zoomed or resized.

They're also great for creating responsive websites that need to look good and function well across a variety of screen sizes.

Overall, SVGs are great as they are scalable, lightweight, customizable, and can be animated using CSS when used inline.

How to Import SVGs in React Apps

Let's go through some of the most used methods when importing SVGs into React Apps.

1. How to Import SVGs Using the Image Tag

Importing SVGs using the image tag is one of the easiest ways to use an SVG. If you initialize your app using CRA (Create React App), you can import the SVG file in the image source attribute, as it supports it off the bat.

import YourSvg from "/path/to/image.svg";

const App = () => {
  return (
    <div className="App">
      <img src={YourSvg} alt="Your SVG" />
    </div>
  );
};
export default App;

But if you are not using CRA, you have to set up a file loader system in the bundler you're using (Webpack, Parcel, Rollup, and so on).

Webpack, for instance, has a loader for handling SVGs called file-loader.

To install the file-loader, add the following command:

npm install file-loader --save-dev

Next, add the loader to the webpack.config.js file:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: "file-loader",
          },
        ],
      },
    ],
  },
};

Now, you can import your SVG files and use them:

import YourSvg from "/path/to/image.svg";

const App = () => {
  return (
    <div className="App">
      <img src={YourSvg} alt="Your SVG" />
    </div>
  );
};
export default App;

NOTE: While this approach is straightforward, it does have one disadvantage: unlike the other methods for importing, you cannot style the SVG imported in a img element. As a result, it will be suitable for an SVG that does not need customization, like logos.

2. How to Import SVGs by Adding them Directly as JSX

JSX supports the svg tag, so we can copy-paste the SVG directly into our React components. This method is straightforward as it helps you take full advantage of SVGs without using a bundler.

The approach is possible because SVGs are in XML format, just like HTML. So, we can convert it to JSX syntax. You can also use a compiler instead of manually converting.

const App = () => {
  return (
    <div className="App">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className="ionicon"
        viewBox="0 0 512 512"
      >
        <path
          d="M160 136c0-30.62 4.51-61.61 16-88C99.57 81.27 48 159.32 48 248c0 119.29 96.71 216 216 216 88.68 0 166.73-51.57 200-128-26.39 11.49-57.38 16-88 16-119.29 0-216-96.71-216-216z"
          fill="none"
          stroke="currentColor"
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth={32}
        />
      </svg>
    </div>
  );
};
export default App;

The advantage of including SVGs inline is that we have access to their different properties, which allows us to style and customize them as we see fit.

One thing to keep in mind is that if your SVG file size is large, your code may become complex, reducing readability and productivity. If this is the case, use a png or jpeg file..

3. How to Import SVGs as React Components

If you use CRA, there's a chance you have imported and used SVGs directly as a React component at one point in time.

This method, which is possible with the help of a file loader, works by loading the image alongside the HTML rather than as a separate file.

import { ReactComponent as Logo } from "./logo.svg";

const App = () => {
  return (
    <div className="App">
      <Logo />
    </div>
  );
};

export default App;

4. How to Convert SVGs to React Components

This approach is similar to the one previously mentioned. Here, we can convert an SVG to a React component by returning it from inside a class or functional component.

To do this, open up the SVG file in a text editor, and copy-paste the code into a new component:

export const ArrowUndo = () => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className="ionicon"
      viewBox="0 0 512 512"
    >
      <path d="M245.09 327.74v-37.32c57.07 0 84.51 13.47 108.58 38.68 5.4 5.65 15 1.32 14.29-6.43-5.45-61.45-34.14-117.09-122.87-117.09v-37.32a8.32 8.32 0 00-14.05-6L146.58 242a8.2 8.2 0 000 11.94L231 333.71a8.32 8.32 0 0014.09-5.97z" />
      <path
        d="M256 64C150 64 64 150 64 256s86 192 192 192 192-86 192-192S362 64 256 64z"
        fill="none"
        stroke="currentColor"
        strokeMiterlimit={10}
        strokeWidth={32}
      />
    </svg>
  );
};

Now, you can import and render the SVG component in another component like this:

import { ArrowUndo } from "./path/to/ArrowUndo.jsx";

export const Button = () => {
  return (
    <button>
      <ArrowUndo />
    </button>
  );
};

Again, this approach is only possible if your React app has a loader like SVGR's Webpack loader included.

5. How to Import SVGs Using SVGR

SVGR is a tool that takes raw SVG files and transforms them into React components. It also has a large ecosystem with support for Create React App, Gatsby, Parcel, Rollup, and other technologies.

So, how do we set it up?

First, install the package by running the code below:

# with npm
npm install --save-dev @svgr/webpack

# with yarn
yarn add --dev @svgr/webpack

Next, update your webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/i,
        issuer: /\.[jt]sx?$/,
        use: ["@svgr/webpack"],
      },
    ],
  },
};

Now, you can import an SVG file as a React component:

import Logo from "./logo.svg";

const App = () => {
  return (
    <div className="App">
      <Logo />
    </div>
  );
};

export default App;

6. How to Import SVGs Using the Vite Plugin for SVGR

vite-plugin-svgr is a plugin for Vite that uses svgr under the hood to transform SVGs into React components.

You can install it by running the following command:

# with npm
npm i vite-plugin-svgr

# with yarn
yarn add vite-plugin-svgr

Next, add the plugin inside your app's vite.config.js:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import svgr from "vite-plugin-svgr";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svgr(), react()],
});

Now, you can import the SVG files as React components:

import { ReactComponent as Logo } from "./logo.svg";

Conclusion

And it's a wrap! In this article, we've covered how to import SVGs in a React App using custom configuration from specific packages, how importing React components works, and how to use them in a Vite setup.

When working with Vite, I use the vite svgr plugin, which works flawlessly. You can also experiment with the other ways discussed in this article.

I hope you found this article insightful. If you do have any questions, feel free to send a message on Twitter or LinkedIn.

Thanks for reading, and happy coding!

Before you go, check out these resources:

• Why You Should Ditch Create-React-App for Vite

• Working with SVGs in React

• Twitter Community for Devs