Task 1: Set up the React Project
In this task, you will set up a new React project using Vite. You will also clean up the boilerplate code and add additional dependencies such as Tailwind CSS and Prettier.
Step 1: Create a new Vite project
Run the following command to create a new Vite project with the React template:
pnpm create vite covid-dashboard --template react-tsNext, navigate to the project directory and open it in Visual Studio Code:
cd covid-dashboard && code .Notice that the Vite project has been created with the following files and directories:
.
├── README.md
├── index.html
├── package.json
├── public
│ └── vite.svg
├── src
│ ├── App.css
│ ├── App.tsx
│ ├── assets
│ │ └── react.svg
│ ├── index.css
│ ├── main.tsx
│ └── vite-env.d.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.tsStep 2: Clean up the boilerplate code
In this step, we will clean up the boilerplate code generated by Vite. We will remove unnecessary files and directories and update the content of the remaining files.
First, remove the following files and directories:
rm public/vite.svg src/assets/react.svg src/App.css
rmdir src/assets
echo > src/index.cssNext, create a new file /public/covid.svg and paste the following content:
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128">
<path
d="M115.4 57.709a6.28 6.28 0 0 0-5.313 2.931l-11.363-.629a34.785 34.785 0 0 0-7.353-17.743l7.593-8.482a6.291 6.291 0 1 0-4.752-4.752l-8.482 7.593a34.785 34.785 0 0 0-17.743-7.353l-.627-11.363a6.291 6.291 0 1 0-6.72 0l-.629 11.363a34.785 34.785 0 0 0-17.743 7.353l-8.482-7.593a6.291 6.291 0 1 0-4.752 4.752l7.593 8.482a34.785 34.785 0 0 0-7.353 17.743l-11.363.629a6.291 6.291 0 1 0 0 6.72l11.363.629a34.785 34.785 0 0 0 7.353 17.743l-7.593 8.482a6.291 6.291 0 1 0 4.752 4.752l8.482-7.593a34.785 34.785 0 0 0 17.743 7.353l.629 11.363a6.291 6.291 0 1 0 6.72 0l.629-11.363a34.785 34.785 0 0 0 17.743-7.353l8.482 7.593a6.291 6.291 0 1 0 4.752-4.752l-7.593-8.482a34.785 34.785 0 0 0 7.353-17.743l11.363-.629a6.289 6.289 0 1 0 5.313-9.651z"
fill="#f07281" />
<circle cx="53.416" cy="50.893" r="8.609" transform="rotate(-45 53.416 50.892)" fill="#eb5569" />
<path d="M58.181 78.471a6.464 6.464 0 1 1-6.464-6.464 6.464 6.464 0 0 1 6.464 6.464z"
fill="#eb5569" />
<circle cx="78.824" cy="66.232" r="10.631" transform="rotate(-9.217 78.826 66.233)" fill="#eb5569" />
<path
d="M64 123.443a8.037 8.037 0 0 1-5.16-14.2l-.5-8.973a36.532 36.532 0 0 1-15.985-6.625l-6.7 6a8.041 8.041 0 1 1-7.3-7.3l6-6.7a36.672 36.672 0 0 1-4.264-7.571 1.75 1.75 0 0 1 3.233-1.343A33.15 33.15 0 0 0 38 84.643a1.75 1.75 0 0 1-.066 2.255l-7.592 8.483a1.749 1.749 0 0 1-1.687.54 4.541 4.541 0 1 0 3.427 3.427 1.749 1.749 0 0 1 .54-1.687l8.478-7.592A1.749 1.749 0 0 1 43.357 90a33.058 33.058 0 0 0 16.851 6.984 1.75 1.75 0 0 1 1.55 1.642l.63 11.363a1.755 1.755 0 0 1-.811 1.575 4.542 4.542 0 1 0 4.846 0 1.755 1.755 0 0 1-.811-1.575l.63-11.363a1.75 1.75 0 0 1 1.55-1.642A33.058 33.058 0 0 0 84.643 90a1.75 1.75 0 0 1 2.255.066l8.483 7.592a1.749 1.749 0 0 1 .54 1.687 4.541 4.541 0 1 0 3.427-3.427 1.744 1.744 0 0 1-1.687-.54L90.069 86.9A1.75 1.75 0 0 1 90 84.643a33.058 33.058 0 0 0 6.984-16.851 1.75 1.75 0 0 1 1.642-1.55l11.363-.63a1.761 1.761 0 0 1 1.575.811 4.542 4.542 0 1 0 0-4.846 1.774 1.774 0 0 1-1.575.811l-11.363-.63a1.75 1.75 0 0 1-1.642-1.55A33.058 33.058 0 0 0 90 43.357a1.75 1.75 0 0 1 .066-2.255l7.592-8.483a1.743 1.743 0 0 1 1.687-.54 4.541 4.541 0 1 0-3.427-3.428 1.747 1.747 0 0 1-.54 1.687L86.9 37.93a1.748 1.748 0 0 1-2.257.07 33.058 33.058 0 0 0-16.851-6.984 1.75 1.75 0 0 1-1.55-1.642l-.63-11.363a1.755 1.755 0 0 1 .811-1.575 4.542 4.542 0 1 0-4.846 0 1.755 1.755 0 0 1 .811 1.575l-.63 11.363a1.75 1.75 0 0 1-1.55 1.642A33.058 33.058 0 0 0 43.357 38a1.749 1.749 0 0 1-2.257-.07l-8.483-7.592a1.747 1.747 0 0 1-.54-1.687 4.541 4.541 0 1 0-3.427 3.428 1.738 1.738 0 0 1 1.687.54l7.594 8.481A1.75 1.75 0 0 1 38 43.357a33.058 33.058 0 0 0-6.984 16.851 1.75 1.75 0 0 1-1.642 1.55l-11.363.63a1.772 1.772 0 0 1-1.575-.811 4.542 4.542 0 1 0 0 4.846 1.758 1.758 0 0 1 1.575-.811l11.363.63a1.749 1.749 0 0 1 1.65 1.844 1.768 1.768 0 0 1-1.843 1.651L18.76 69.16a8.042 8.042 0 1 1 0-10.32l8.973-.5a36.532 36.532 0 0 1 6.625-15.985l-6-6.7a8.041 8.041 0 1 1 7.3-7.3l6.7 6a36.532 36.532 0 0 1 15.985-6.625l.5-8.973a8.042 8.042 0 1 1 10.32 0l.5 8.973a36.532 36.532 0 0 1 15.985 6.625l6.7-6a8.041 8.041 0 1 1 7.3 7.3l-6 6.7a36.532 36.532 0 0 1 6.625 15.985l8.973.5a8.042 8.042 0 1 1 0 10.32l-8.973.5a36.532 36.532 0 0 1-6.625 15.985l6 6.7a8.041 8.041 0 1 1-7.3 7.3l-6.7-6a36.532 36.532 0 0 1-15.985 6.625l-.5 8.973a8.037 8.037 0 0 1-5.16 14.2z" />
<path
d="M53.416 61.252a10.359 10.359 0 1 1 10.359-10.359 10.371 10.371 0 0 1-10.359 10.359zm0-17.218a6.859 6.859 0 1 0 6.859 6.859 6.866 6.866 0 0 0-6.859-6.859zM51.717 86.684a8.214 8.214 0 1 1 8.214-8.213 8.223 8.223 0 0 1-8.214 8.213zm0-12.927a4.714 4.714 0 1 0 4.714 4.714 4.72 4.72 0 0 0-4.714-4.714zM88 62.606a1.748 1.748 0 0 1-1.51-.864 8.878 8.878 0 0 0-2.227-2.532 1.751 1.751 0 1 1 2.145-2.767 12.382 12.382 0 0 1 3.1 3.526A1.752 1.752 0 0 1 88 62.606zM78.825 78.613a12.383 12.383 0 0 1-2.679-24.472 1.75 1.75 0 0 1 .754 3.418 8.883 8.883 0 1 0 10.242 11.8 1.75 1.75 0 1 1 3.276 1.23 12.441 12.441 0 0 1-11.593 8.024z" />
</svg>Now open the index.html file and replace the content with the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/covid.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Covid Dashboard</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>Next, open /src/App.tsx and replace the content with the following:
function App() {
return <div>Covid Dashboard</div>;
}
export default App;Finally, open README.md and replace the content with the following:
# Covid Dashboard
A simple web application that allows a client to select a country and retrieve the following COVID-related statistics:
* the total number of "confirmed" cases.
* the total number of "active" cases.
* the total number of "recovered" cases.
## Run locally
* Clone this repository.
* Navigate to the project directory.
* Install dependencies using `pnpm install`.
* Start the development server with `pnpm run dev`.
* Open your browser and navigate to `http://localhost:5173`.
* Select a country from the dropdown to view the COVID-19 statistics.
It is time to test the application. Run the following commands:
pnpm install
pnpm run devNavigate to http://localhost:5173 in your browser to see the (empty) Covid Dashboard.
Step 3: Install Tailwind CSS
In this step, we will install Tailwind CSS and its dependencies. First, install Tailwind CSS, PostCSS, and Autoprefixer as development dependencies:
pnpm install -D tailwindcss postcss autoprefixerNext, generate a tailwind.config.js file and a postcss.config.js file by running the following command:
npx tailwindcss init -pUpdate the tailwind.config.js file to include the paths to all of your template files:
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}Next, add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file:
@tailwind base;
@tailwind components;
@tailwind utilities;Finally, to test that Tailwind CSS is working, update the ./src/App.tsx file to include the following:
function App() {
return (
<div className="flex justify-center items-center text-3xl min-h-screen">
Covid Dashboard
</div>
);
}
export default App;Run the app again and navigate to http://localhost:5173 in your browser to see the Covid Dashboard with Tailwind CSS applied.
Step 4: Install Prettier
In this step we will install Prettier as a development dependency.
pnpm install --save-dev --save-exact prettierThen, we will create a .prettierrc.json file in the root of our project to configure Prettier.
{
"semi": true,
"trailingComma": "all",
"singleQuote": false,
"printWidth": 80,
"tabWidth": 2,
"endOfLine": "auto"
}Next, create a .prettierignore file to let Prettier know which files to ignore.
distFinally, add this command to the scripts section of the package.json file:
"prettier": "prettier --write \"src/**/*.{js,ts,jsx,tsx}\" --config \".prettierrc.json\"",Run the following command to format your code with Prettier:
pnpm prettierMake ESlint and Prettier work together
Recall that we installed Eslint when we created the Vite project. Now we will install the eslint-plugin-prettier and eslint-config-prettier packages to make Eslint and Prettier work together.
pnpm install --save-dev eslint-plugin-prettier eslint-config-prettierAdd “prettier” to the “extends” array in your .eslintrc.cjs file. Make sure to put it last, so it gets the chance to override other configs.
{
"extends": [
"some-other-config-you-use",
"plugin:prettier/recommended"
]
}Moreover, update ignorePatterns (in the same .eslintrc.cjs file) to include the following:
"ignorePatterns": ["dist", ".eslintrc.cjs", "*.config.*"],Update the lint script in the package.json file as follows:
"lint": "eslint . --report-unused-disable-directives",Finally, run the following commands to format your code with Prettier and lint your code with Eslint:
pnpm prettier
pnpm lintStep 5: GitHub Action to deploy the app
If you haven’t already done so, initialize a local Git repository and commit your code.
git init -b main
git add .
git commit -m "Initial commit: Set up project with Vite, TypeScript, React, Tailwind CSS, Eslint, and Prettier"We will deploy this app to GitHub pages. Create a GitHub repository and push your local code to it. Next, on your local repository, update the vite.config.ts file to include the base property:
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
// https://vitejs.dev/config/
export default defineConfig({
base: "/REPO_NAME/", // TODO: Replace REPO_NAME with the name of your repository
plugins: [react()],
});Next, create a .github folder. Add a subfolder workflows to .github. Finally, add a deploy.yml file to this subfolder with the following content:
name: Deploy Vite app to GitHub Pages
on:
push:
branches:
- main
permissions:
contents: read
pages: write
id-token: write
concurrency:
group: "pages"
cancel-in-progress: true
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4.1.6
- name: Detect package manager
id: detect-package-manager
run: |
if [ -f "${{ github.workspace }}/pnpm-lock.yaml" ]; then
echo "::set-output name=manager::pnpm"
echo "::set-output name=command::install"
echo "::set-output name=runner::pnpx --no-install"
exit 0
elif [ -f "${{ github.workspace }}/yarn.lock" ]; then
echo "::set-output name=manager::yarn"
echo "::set-output name=command::install"
echo "::set-output name=runner::yarn"
exit 0
elif [ -f "${{ github.workspace }}/package-lock.json" ]; then
echo "::set-output name=manager::npm"
echo "::set-output name=command::ci"
echo "::set-output name=runner::npx --no-install"
exit 0
else
echo "Unable to determine package manager"
exit 1
fi
- name: Install pnpm
if: steps.detect-package-manager.outputs.manager == 'pnpm'
run: npm install -g pnpm
- name: Install yarn
if: steps.detect-package-manager.outputs.manager == 'yarn'
run: npm install -g yarn
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: "latest"
cache: ${{ steps.detect-package-manager.outputs.manager }}
- name: Configure GitHub Pages
uses: actions/configure-pages@v5.0.0
- name: Install dependencies
run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
- name: Build with Vite
run: ${{ steps.detect-package-manager.outputs.manager }} run build
- name: Upload GitHub Pages artifact
uses: actions/upload-pages-artifact@v3.0.1
with:
path: ./dist
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
needs: build
steps:
- name: Deploy GitHub Pages site
id: deployment
uses: actions/deploy-pages@v4.0.5Before pushing these changes to GitHub, update the settings of your GitHub repository to use “GitHub Action” for deploying the app to GitHub Pages.
Push your code to the GitHub repository. This will trigger a build process that will result in deploying your app. From this point on, every time you make changes to your code on the main branch and push those changes to GitHub, the new app will be automatically deployed.
Conclusion
In this task, you have set up a new React project using Vite. You have cleaned up the boilerplate code, added Tailwind CSS and Prettier, and deployed the app to GitHub Pages using GitHub Actions. You are now ready to start building the Covid Dashboard app.
In the next task, you will explore the relevant APIs to fetch Covid-19 statistics for different countries.