Defining Our Core Frontend Stack
Here's the core stack we'll be using:
- React - as the view library
- Zustand - for global state management
- Vite - as the bundler
- Tailwind CSS - for styling
Setting Up the Frontend App
Let's get started with the frontend setup. Begin by creating the project folder and initializing a Vite project:
cd ./project
npm create vite@latest
✔ Project name: … ./
✔ Select a framework: › React
✔ Select a variant: › TypeScript + SWC
npm install
Cool! We have App with the following structure (or similar one if in the future templae changes)
project-root/
│
├── node_modules/
│
├── public/
│
├── src/
│ ├── assets/
│ │ ├── App.css
│ │ ├── App.tsx
│ │ ├── index.css
│ │ ├── main.tsx
│ │ └── vite-env.d.ts
│
├── .gitignore
│
├── README.md
│
├── eslint.config.js
│
├── index.html
│
├── package-lock.json
│
├── package.json
│
├── tsconfig.app.json
│
├── tsconfig.json
│
├── tsconfig.node.json
│
├── vite.config.ts
Let’s add port config so our app runs every time with the same
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
// https://vitejs.dev/config/
export default defineConfig({
server: {
port: 3000,
},
plugins: [react()],
});
Tweaking ESLint
Firstly, we need to tweak ESLint. The default template sets recommended settings, which do not enforce a specific code style strictly. So let's improve this by updating the eslint.config.js file with:
import js from "@eslint/js";
import globals from "globals";
import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";
import tseslint from "typescript-eslint";
export default tseslint.config(
{ ignores: ["dist"] },
{
extends: [js.configs.recommended, ...tseslint.configs.recommended],
files: ["**/*.{ts,tsx}"],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
},
plugins: {
"react-hooks": reactHooks,
"react-refresh": reactRefresh,
},
rules: {
...reactHooks.configs.recommended.rules,
"react-refresh/only-export-components": [
"warn",
{ allowConstantExport: true },
],
"@typescript-eslint/no-explicit-any": "error"
},
}
);
Adding Prettier
To ensure a consistent code style, let's add prettier. Create a .prettierrc file with the following contents:
{
"tabWidth": 4,
"useTabs": false,
"jsxSingleQuote": false,
"bracketSpacing": true,
"jsxBracketSameLine": false
}
Now after you run the project npm run dev you should see starting screen like this one
Configuring Tailwind CSS
Here comes tailwind configurations. Firstly Install tailwind:
npm install -D tailwindcss postcss autoprefixer
npm install @heroicons/react
npx tailwindcss init -p
You should see a couple new configurational files in the root not
tailwind.config.js
postcss.config.js
to the index.html we will add link to tailwind font:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Money manager</title>
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
Secondly, add configurations inside tailwind.config.js so that the library knows where is our code place
const defaultTheme = require('tailwindcss/defaultTheme')
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
fontFamily: {
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [],
}
Thirdly, import tailwind library in index.css to have styles availiable in our bundle
@tailwind base;
@tailwind components;
@tailwind utilities;
Finally we are going to test our changes. Inside of the App.tsx write a hello world with tailwind classes
function App() {
return (
<>
<h1 className="text-3xl font-bold underline">Hello world!</h1>
</>
);
}
export default App;
If you see screen like this after reloading the project you’ve done everything right!
Clean Up
Delete any predefined template files and folders you don't need. Your final folder structure should look like this:
node_modules
public
src
├─ App.tsx
├─ index.css
├─ main.tsx
├─ vite-env.d.ts
.gitignore
.prettierignore
.prettierrc
README.md
eslint.config.js
index.html
package-lock.json
package.json
postcss config.js
tailwind.config.js
tsconfig.app.json
tsconfig.json
tsconfig.node.json
vite.config.ts
In case you face some issues or bugs you can copy code for this first lessong from this link:
This concludes the setup for our frontend app.
Happy coding!
Top comments (0)