Template Bhai is an OS initiative that allows beginner web developers create their first contributions to Open Source. Basically, we are collecting and maintaining simple html/css/tailwindcss templates.
Create your own or help maintaining the existing templates. We can get everyone involved!
If you are interested in getting started join our Discord community where we'll help you get involved https://discord.gg/5G9ZXft2SV
This project is a monorepo created using Turborepo. Monorepo is a collection of different projects that are built using the same codebase. This allows us to have reusable components and packages that can be used by all projects.
If you are working on a template that doesn't have any dependencies in the monorepo, you can simply
treat it as a normal project. CD into the project and run yarn dev
as usual.
yarn install
yarn dev
yarn dev
yarn build
cd static
yarn create vite
vanilla
as the frameworkcd {your_project_name}
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
module.exports = {
content: ["./**/*.{html,js,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
};
@tailwind base;
@tailwind components;
@tailwind utilities;
vite.config.js
file and put the below codeimport { defineConfig } from "vite";
export default defineConfig({
base: "",
});
yarn install
in the root project directory, then cd into your project and run yarn dev
cd apps
yarn create next-app
/apps/{your_project_name}
and open package.jsonname: "{your_project_name}"
and version: "0.0.0"
to package.json. The name must be unique in the project.yarn install
Your project is ready.
Because we are working with monorepo, we need to use yarn workspace
to run commands in the selected project.
To start Next.js project run
yarn workspace {your_project_name} dev
To add dependencies run
yarn workspace {your_project_name} add {dependency_name}
To add dev dependencies run
yarn workspace {your_project_name} add {dependency_name} -D
This turborepo uses Yarn as a package manager. It includes the following packages/apps:
web
: a stub Next.js appui
: a stub React component library shared by both web
and docs
applicationseslint-config-custom
: eslint
configurations (includes eslint-config-next
and eslint-config-prettier
)tsconfig
: tsconfig.json
s used throughout the monorepotemplate
: a stub Tailwind CSS & Vite templateTurborepo can use a technique known as Remote Caching to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.
By default, Turborepo will cache locally. To enable Remote Caching you will need an account with Vercel. If you don't have an account you can create one, then enter the following commands:
npx turbo login
This will authenticate the Turborepo CLI with your Vercel account.
Next, you can link your Turborepo to your Remote Cache by running the following command from the root of your turborepo:
npx turbo link