We will set up a new project using Vite, a modern build tool that provides a fast and efficient development environment for web applications. Vite is designed to optimize the development process by leveraging modern JavaScript features and bundling techniques. In this task, we will create a new Vite project and modify the default template to suit our needs. We will also install Tailwind CSS, a utility-first CSS framework, and Prettier, a code formatter, to enhance the development experience.
Please note this setup is identical to the one we used in the ToDo App project. We will use the same setup to create a new project. Our coverage of the setup will be brief, as we have already covered it in detail in the ToDo App project.
We will create a new Vite project using the pnpm create vite
command followed by the name of our project, which we will call dictionary-app
.
pnpm create vite dictionary-app
When prompted, select Vanilla
for the project framework and JavaScript
for the variant.
✔ Select a framework: › Vanilla
✔ Select a variant: › JavaScript
Now, we will navigate to our newly created project directory and open it in VSCode.
cd dictionary-app && code .
Let’s clean up the boilerplate code that was generated by Vite. We’ll delete the counter.js
file and the two SVG files, vite.svg
and javascript.svg
. We’ll also clear the contents of main.js
and style.css
.
rm counter.js
rm javascript.svg
rm public/vite.svg
echo "" > main.js
echo "" > style.css
Download the following favicon.png and add it to the public
folder.
src
directoryWe’ll create a src
directory and move the main.js
file into it.
mkdir src
mv main.js src/
We’ll import the CSS file in main.js
and include some sample code to display “Hello World!” in the browser.
import "../style.css";
const app = document.getElementById("app");
app.innerHTML = `<div>Hello World!</div>`;
Next, we’ll update the index.html
file to reflect the changes. We’ll link to our favicon and change the title of the page to “ToDo App”. We’ll also update the script
tag to point to the main.js
file in the src
directory.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dictionary App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
Next, we will install Tailwind CSS. We will use pnpm to install it as a development dependency.
pnpm install -D tailwindcss@latest postcss@latest autoprefixer@latest
After installing tailwindcss, we will need to initialize it.
npx tailwindcss init -p
This command creates two files in our project root: tailwind.config.js
and postcss.config.js
files. The postcss.config.js
is the configuration of PostCSS, which is a dependency of Tailwind.
The tailwind.config.js
file is the configuration file for tailwindcss, which allows us to customize the default settings of tailwindcss. Here, we will configure Tailwind CSS to scan the HTML and JavaScript files in our project for classes to generate the necessary CSS.
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.js",
],
theme: {
extend: {},
},
plugins: [],
}
Next, we will include tailwindcss in our CSS. We will do this by adding the following lines to our style.css
file.
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
Next, we will install Prettier as a development dependency.
pnpm install --save-dev --save-exact prettier
Then, 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 and editors know which files not to format.
dist
Finally, add this command to the scripts
section of the package.json
file:
"prettier": "prettier --write \"src/**/*.js\" --config \".prettierrc.json\""
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, Tailwind CSS, 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, create the vite.config.js
file with the following content:
import { defineConfig } from "vite";
export default defineConfig({
base: "/REPO_NAME/",
});
Replace REPO_NAME
with the name of your repository!
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.5
Before 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.