Welcome to the Vite+Tailwind+i18n boilerplate! 🚀
This project provides you with a solid foundation to kickstart your web development journey using three powerful technologies: Vite, Tailwind CSS, and i18n. Whether you're building a personal blog, a portfolio website, or a complex web application, this boilerplate has got you covered.
Please visit my Linkedin to say thanks 😁 remember it helps me a lot ♥
The Vite build tool revolutionizes your development process with its lightning-fast speeds, thanks to native ES module imports. Say goodbye to slow builds and hello to instantaneous development and hot module replacement.
Tailwind CSS provides a utility-first approach to styling, enabling you to craft visually appealing and responsive interfaces effortlessly. With a vast library of pre-built classes, you can design beautiful components and layouts in minutes.
Internationalization is made simple with the i18n framework. Easily translate and localize your web applications, making them accessible to a global audience. Create a seamless user experience in multiple languages and regions.
Make sure your development environment meets the following requirements:
- Node.js 16.8 or later.
- MacOS, Windows (including WSL), and Linux are supported.
Note: While the pages directory requires Node.js v14 or later, the app directory requires Node v16.8.0 or later.
Now you can create new repositories based on this project by clicking on the "Use this template" button at the top of this repository page or by clicking here.
- Give your new repository a name and description.
- Choose the owner for the new repository.
- Click "Create repository from template".
Once you have created your new repository from the template, you can clone it to your local machine using the following steps:
- Copy the URL of your new repository.
- Open your terminal or Git Bash.
- Navigate to the directory where you want to clone the repository.
- Run the following command: git clone (replace with the URL you copied in step 1).
- Press enter and the repository will be cloned to your local machine.
That's it! You now have a local copy of the repository and can start working on it.
First, install all the dependencies:
npm install
# or
yarn installThen, run the development server:
npm run dev
# or
yarn dev
# or
pnpm devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying src/App.jsx. The page auto-updates as you edit the file.
The project follows a straightforward architecture:
-
src folder: Contains your application source code.
- assets: Store your static assets like images, fonts, etc.
- components: Organize your Vue components.
- locales: Manage your i18n translations here.
-
styles: Customize your Tailwind CSS in tailwind.config.js file
-
vite.config.js: Vite configuration file for customizing the build process.
To add a new language to your project, follow these steps:
-
Navigate to the /src/locales folder in your project directory.
-
Create a new JSON file for your language, e.g., fr.json for French.
-
Open the newly created JSON file and define translations for each key. For example:
{
"greeting": "Bonjour",
"welcome": "Bienvenue sur notre site !"
}
- Then, go to the /src/i18n.js file and import your JSON file.
- Add your new lenguage to the list, as you can see in this picture:
e.g. for French:
import fr from "./locales/fr.json";
const resources = {
en: {
translation: en,
},
es: {
translation: es,
},
fr: {
translation: fr,
},
};
- To add your new lenguage to the selector, I also build a component that you can find and edit in /src/Components/LenguageSelector , You have to create a new button with an onClick prop that run changeLanguage() function:
e.g. for french:
<button type="button" onClick={() => changeLanguage("fr")}>
<img
src="https://wprock.fr/ezoimgfmt/assets.wprock.fr/emoji/joypixels/512/1f1eb-1f1f7.png"
className=" h-10 "
alt="FR"
/>
Fr
</button>
Important
For i18n to work, the keys of all language json must be the same!
Easy peasy! I have created a template for that too ♥ Just copy this:
import React from 'react'
import "../../i18n";
import { useTranslation } from "react-i18next";
const ComponentTemplate = () => {
const { t, i18n } = useTranslation();
const textList = {
test: t("test")
}
return (
<h1>{textList.test}</h1>
)
}
export default ComponentTemplate
Important
REMEMBER YOU HAVE TO USE IT IN ANOTHER FILE! HOW?
Import the new component:
import ComponentTemplate from "./Components/{yourComponent}";
Call it in your JSX:
<ComponentTemplate/>
or you can use the Component Template I've included in your /src/Components folder ♥
To learn more about Vite, you can check out this documentation
To learn about tailwind you can checkout Tailwind documentation.
If you need to learn more about it don't forget to visit their documentation
yarn build
# or `npm run build`As a passionate Frontend Developer who truly values the open-source community, I'm thrilled to provide you with this project and grants you the freedom to use this boilerplate in both personal and commercial projects, encouraging a wide range of creative applications.
You can show your appreciation and support by ☕buying me a coffee☕.
Every coffee you buy is a small token of encouragement and helps me allocate more time and resources to this project. Your support is immensely valued and helps ensure the longevity and quality of this open-source endeavor.
Thank you for being a part of this community and for considering supporting my work. Together, we can continue to build and innovate in the world of web development.
Your contributions are invaluable! If you have ideas for improvements or encounter issues, please don't hesitate to:
I greatly appreciate your support in making this project even better.
Thank you for choosing the Vite+Tailwind+i18n Boilerplate. I hope it accelerates your web development journey and helps you build amazing projects. If you find it helpful, consider giving it a star ⭐️ on GitHub to show your support!
Happy coding! 🚀👨💻👩💻