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-appWhen prompted, select Vanilla for the project framework and JavaScript for the variant.
✔ Select a framework: › Vanilla
✔ Select a variant: › JavaScriptNow, 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.cssDownload 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@latestAfter installing tailwindcss, we will need to initialize it.
npx tailwindcss init -pThis 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 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 and editors know which files not to format.
distFinally, 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.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.