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
.
When prompted, select Vanilla
for the project framework and JavaScript
for the variant.
Now, we will navigate to our newly created project directory and open it in VSCode.
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
.
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.
We’ll import the CSS file in main.js
and include some sample code to display “Hello World!” in the browser.
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.
Next, we will install Tailwind CSS. We will use pnpm to install it as a development dependency.
After installing tailwindcss, we will need to initialize it.
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.
Next, we will include tailwindcss in our CSS. We will do this by adding the following lines to our style.css
file.
Next, we will install Prettier as a development dependency.
Then, we will create a .prettierrc.json
file in the root of our project to configure Prettier.
Next, create a .prettierignore
file to let Prettier and editors know which files not to format.
Finally, add this command to the scripts
section of the package.json
file:
If you haven’t already done so, initialize a local Git repository and commit your code.
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:
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:
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.