DEV Community: Xuanming L.

How to make boilerplate for React + Typescript + TailwindCSS + Auth + Vite

Xuanming L. — Tue, 11 Jun 2024 08:48:58 +0000

I have seen many posts that explains how to make React application using Typescript, or using TailwindCSS, or using Authenication, or using Vite.
But I realized that there is no post that explains all in one.
Today I am going to explain how we can build up a boilerplate that uses React, TailwindCSS, Authenication and Vite.
The full source code in on Github repository
Now let's go.

Prerequisites

Node version ≥ 18.
NPM version 8.

Vite requires Node.js version ≥ 18. and npm version 8. However, some templates require a higher Node.js version to work.

Create a Vite React application

Open the terminal and run the following command.



npm create vite@latest

Give a project name here. I am going to name it vite-react-boilerplate

Next select React using keyboard arrow key, then press Enter.

Then select Typescript or Typescript + SWC.

Finally install dependencies for the project.
Now navigate your project folder and then run following command.



cd vite-react-boilerplate
npm i

Done.
Now you can test your project by running following command.



npm run dev

Add TailwindCSS to your project

Now it's time to add TailwindCSS to your project
Run following command.



npm i -D tailwindcss postcss autoprefixer

This command will install dependencies as dev-dependencies.
After installation, create TailwindCSS configuration by running following command.



npm tailwind init -p

Then you will get 2 files: tailwind.config.js and postcss.config.js.
Now open tailwindcss.config.js file, and add following chanages.



/** @type {import('tailwindcss').Config} */
export default {
  content: [
    // You will add this 2 lines.
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

And then add TailwindCSS directives to index.css file.



@tailwind base;
@tailwind components;
@tailwind utilities;

...

Done.
Now you can use any TailwindCSS functionality.

Authenticate

Now it's time to implement authentication.
To do it, I will use the React Router DOM and create an Authentication Provider.
For the preparing, run following command in terminal.



npm i react-router-dom js-base64
npm i -D @types/node

And then edit vite.config.ts to enable import path alias.



import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    }
  }
})

First though, I will create Authenticate Provider.
Create a file under src/lib, then name it auth-util.tsx. Then input following code into it.



import React, {createContext, useContext, useState} from "react";

interface AuthContextProps {
  isAuthenticated: boolean;
  loginUser: () => void;
  logoutUser: () => void;
}

const AuthContext = createContext<AuthContextProps | undefined>(undefined);

export const AuthProvider = (
  {
    children,
  } : {
    children: React.ReactNode,
  }
) => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  const loginUser = () => setIsAuthenticated(true);
  const logoutUser = () => setIsAuthenticated(false);

  return (
    <AuthContext.Provider 
      value={{isAuthenticated, loginUser, logoutUser}}>
      {children}
    </AuthContext.Provider>
  )
}

export const useAuth = (): AuthContextProps => {
  const context = useContext(AuthContext);

  if (!context) {
    throw new Error("useAuth muse be used within an AuthProvider");
  }

  return context;
}

Next, create a file under src/components, name it PrivateRoute.tsx. Then input following code into it.



import {Outlet, Navigate, type Path, useLocation} from "react-router-dom";
import {encode} from "js-base64";

import {useAuth} from "@/lib/auth-util";

export default function PrivateRoute(
  {
    loginUrl,
  } : {
    loginUrl: string | Partial<Path>
  }
) {
  const {isAuthenticated} = useAuth();
  const {pathname} = useLocation();

  return isAuthenticated ? <Outlet /> : <Navigate to={`${loginUrl}?redirect=${encode(pathname)}`} replace />;
}

And then, create a file under src/pages/LoginPage.tsx, and input following code into it.



import {MouseEvent, useState} from "react";
import {useAuth} from "@/lib/auth-util";
import {useNavigate, useLocation} from "react-router-dom";
import {decode} from "js-base64";

const loginData = {
  email: "admin@example.com",
  password: "password",
};

export default function LoginPage() {
  const {loginUser} = useAuth();
  const navigate = useNavigate();
  const {search} = useLocation();

  const [email, setEmail] = useState(loginData.email);
  const [password, setPassword] = useState(loginData.password);

  const login = (e: MouseEvent) => {
    e.preventDefault();

    if (email === loginData.email && password === loginData.password) {
      loginUser();
      const queryParameters = new URLSearchParams(search);
      const redirect = queryParameters.get("redirect");
      navigate(redirect ? decode(redirect) : "/");
    }
  }

  return (
    <>
      <div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
        <div className="sm:mx-auto sm:w-full sm:max-w-sm">
          <h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
            Sign in to your account
          </h2>
        </div>

        <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
          <form className="space-y-6" action="#" method="POST">
            <div>
              <div className="flex items-center justify-between">
                <label htmlFor="password" className="block text-sm font-medium leading-6 text-gray-900">
                  Email address
                </label>
              </div>
              <div className="mt-2">
                <input id="email" name="email" type="email"
                       autoComplete="email" required
                       className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                       value={email}
                       onChange={e => setEmail(e.target.value)}
                />
              </div>
            </div>

            <div>
              <div className="flex items-center justify-between">
                <label htmlFor="password" className="block text-sm font-medium leading-6 text-gray-900">
                  Password
                </label>
              </div>
              <div className="mt-2">
                <input id="password" name="password" type="password"
                       autoComplete="current-password" required
                       className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                       value={password}
                       onChange={e => setPassword(e.target.value)}
                />
              </div>
            </div>

            <div>
              <button
                type="submit"
                className="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
                onClick={login}
              >
                Sign in
              </button>
            </div>
          </form>
        </div>
      </div>
    </>
  )
}

And then add Homepage and AccountPage.



// src/pages/HomePage.tsx
export default function HomePage() {
  return (
    <>HomePage</>
  )
}



// src/pages/AccountPage.tsx
export default function AccountPage() {
  return (
    <div>Account Page</div>
  )
}

Now we have all pages to required for app, so let's create Navbar component.



// src/components/Navbar.tsx
import {Link, useNavigate} from "react-router-dom";
import {Disclosure} from "@headlessui/react";
import {ArrowLeftEndOnRectangleIcon, ArrowLeftStartOnRectangleIcon } from "@heroicons/react/24/outline";

import {useAuth} from "@/lib/auth-util";

const navigation = [
  { name: "Home", href: "/" },
  { name: "Account", href: "/account" },
];

export default function Example() {
  const {isAuthenticated, logoutUser} = useAuth();
  const navigate = useNavigate();

  return (
    <Disclosure as="nav" className="bg-gray-800">
      <div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
        <div className="relative flex h-16 items-center justify-between">
          <div className="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
            <div className="hidden sm:ml-6 sm:block">
              <div className="flex space-x-4">
                {navigation.map((item) => (
                  <Link
                    key={item.name}
                    to={item.href}
                    className="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium"
                  >
                    {item.name}
                  </Link>
                ))}
              </div>
            </div>
          </div>
          <div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
            <button
              type="button"
              className="relative rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800" onClick={() => isAuthenticated ? logoutUser() : navigate("/login")} >
              <span className="absolute -inset-1.5" />
              <span className="sr-only">View notifications</span>
              {isAuthenticated && <ArrowLeftStartOnRectangleIcon className="h-6 w-6" aria-hidden="true" />}
              {!isAuthenticated && <ArrowLeftEndOnRectangleIcon className="h-6 w-6" aria-hidden="true" />}
            </button>
          </div>
        </div>
      </div>
    </Disclosure>
  )
}

Finally, change App.tsx file as follows.



import {BrowserRouter as Router, Routes, Route} from "react-router-dom";

import LoginPage from "@/pages/LoginPage.tsx";
import HomePage from "@/pages/HomePage.tsx";
import AccountPage from "@/pages/AccountPage.tsx";

import Navbar from "@/components/Navbar";
import PrivateRoute from "@/components/PrivateRoute.tsx";
import {AuthProvider} from "@/lib/auth-util.tsx";

import "./App.css";

function App() {

  return (
    <AuthProvider>
      <Router>
        <Navbar />
        <Routes>
          <Route path="/login" element={<LoginPage />} />
          <Route path="/" element={<HomePage />} />
          <Route path="/" element={<PrivateRoute loginUrl={"/login"}/>} >
            <Route path="/account" element={<AccountPage />} />
          </Route>
        </Routes>
      </Router>
    </AuthProvider>
  )
}

export default App

Done.

Now we have the boilerplate for React + Typescript + TailwindCSS + Auth + Vite

What is the difference between type vs interface in Typescript

Xuanming L. — Sat, 08 Jun 2024 05:25:35 +0000

Common

Both can define a data type.
Types aliases in Typescript mean "a new for any type".

type MyNumber = number;

type StringOrNumber = string | number;

type User = {
  id: number;
  name: string;
  email: string;
}

An interface defines a contract that an object must adhere to.

interface Person { 
  name: string; 
  address: string;
}

Difference

1. Primitive Type

Primitive types are inbuilt types in TypeScripts. They include number, string, boolean, null, and undefined types.
Type alias can be used to define a alias for a primitive type as below.

type MyString = string;
type NullOrUndefined = null | undefined;

But, interface can not be used to define a alias for a primitive type.

2. Union types

Union types can describe values that can be one of several constant and create unions of various primitive, literal or complex types.

type Computer = 'Desktop' | 'Laptop' | 'Tablet';

Union type can only be defined using type. Interface cannot define a union type. But it is possible to create a new union type from several interfaces:

interface Laptop {
  cpu: string;
  ram: number;
  storage: number;
}

interface SmartPhone {
  number: string;
}

type Mobile = Laptop | Phone;

3. Function types

In Typescript, a function type represents a function's prototype. Type alias defines function prototype like this:

type Add = (num1: number, num2: number) => number;

You can also use an interface to do samething:

interface IAdd {
  (num: number, num2: number): number;
}

As you can see both type and interface are similar except for a syntax difference. And type is preferred to define a function prototype.
It is also because type has more capability to define function type. Here's an example:

type Watch = 'Mechanical' | 'Electrical';

type WindUp = (cycle: number) => void;
type Recharge = () => void;

type RefillWatch<W extends Watch> = 
  W extends 'Mechanical' ? 
  WindUp : W extends 'Electrical' ? 
    Recharge : never;

const windUp: RefillWatch<'Mechanical'> = (watch, cycle) => {
  // Something to wind up the spring of the watch
}

const recharge: RefillWatch<'Electrical'> = (watch) => {
  // Something to charge the watch
}

4. Merging of declarations

Merging of declarations is a feature for only interface.

interface Computer {
  cpu: string;
}
interface Computer {
  ram: string;
}

const mine: Computer = {
  cpu: 'Core i-9 9900',
  ram: '32GB',
};

5. Extends and intersection

An interface can extend original interface:

interface Computer {
  cpu: string;
  ram: string;
}

interface Laptop extends Computer {
  battery: string;
}

You can also get same result with type alias:

type Computer = {
  cpu: string;
  ram: string;
}

type Laptop = Computer & {
  battery: string;
}

You can also extends an interface from a type alias:

type Computer = {
  cpu: string;
  ram: string;
}
interface Laptop extends Computer {
  battery: string;
}

But you cannot extend an interface from a union type:

type Watch = 'Mechanical' | 'Electrical';
interface MoreWatch extends Watch {
  brand: string;
}

Type aliases can extend interfaces using the intersection like this:

interface Watch {
  brand: string;
}
Type ElectricWatch = Watch & {
  battery: string;
}

6. Handling conflicts

You cannot extend an interface with same property key like this:

interface Watch {
  refill: () => void;
}
interface Watch {
  refill: (cycle: number) => void;
}

But you can extend a type alias with same property key like this:

type Person = {
  getPermission: (id: string) => string;
};
type Staff = Person & {
   getPermission: (id: string[]) => string[];
};
const AdminStaff: Staff = {
  getPermission: (id: string | string[]) => {
    return (typeof id === 'string' ? 
      'admin' : ['admin']) as string[] & string;
  }
}

If you extend a type alias like this, the model property type would not be determined because it can't be both string and number at the same time:

type Computer = {
  model: string;
};
type Laptop = Computer & {
  model: number;
};
// error: Type 'string' is not assignable to type 'never'.(2322)
const mine: Laptop = { model: 'Dell' };

7. Implementing class

In Typescript, you can implement a class using either an interface or a type alias:

interface Person {
  name: string;
  greet(): void;
}
class Student implements Person {
  name: string;
  greet() {
    console.log('Hello');
  }
}
type Pet = {
  name: string;
  greet(): void;
};
class Cat implements Pet {
  name: string;
  greet() {
    console.log('Mew');
  }
}

But you cannot implement a class that extends a union type:

type Key = { key: number; } | { key: string; };
// can not implement a union type
class PrimaryKey implements Key {
  key = 1
}

8. Tuple type

In Typescript, the tuple type can express an array with a fixed number of elements, while each element has its data type:

type State: [name: string; setter: (value: string) => void];

If you want to declare a tuple type with an interface, you can do it like this:

interface IState extends Array<string | (value: string) => void> {
  0: string;
  1: (value: string) => void;
}

9. Benefits of the type alias than the interface

Here's an example of the advanced type feature that the interface cannot achieve:

type Person = {
    name: string;
    address: string;
}
type Getters<T> = {
    [K in keyof T as `get${Capitalize<string & K>}`]:  () => T[K];
};
type PersonType = Getters<Perso>;
// type PersonType = {
//     getName: () => string;
//     getAddress: () => string;
// }

Conclusion

In this post, I have explained the features of the type alias and the interface in Typescript.
As above the type alias has more powerful features than the interface. So I recommend to use the type alias when coding.

Chrome Extensions for React Developers

Xuanming L. — Fri, 07 Jun 2024 01:09:48 +0000

Google developed Google Chrome (or just Chrome), a popular internet browser. One of the reasons Chrome browser is the most popular browser for web development is that it has Chrome developer tools out of the box and allows third-party dev tools to be installed to the browser, to provide more capabilities for web development aka React Chrome extension.

1. React Developers Tools

You will get two new tabs in your Chrome DevTools: “⚛️ Components” and “⚛️ Profiler”.

The Components tab shows you the root React components that were rendered on the page, as well as the subcomponents that they ended up rendering.

By selecting one of the components in the tree, you can inspect and edit its current props and state in the panel on the right. In the breadcrumbs, you can inspect the selected component, the component that created it, the component that created that one, and so on.

2. Lorem Ipsum Generator

Quickly generate Lorem Ipsum placeholder text. Select a desired length and choose between paragraphs, words, bytes or lists.

Elegantly designed and easy to use. The values you enter are stored so that your preferred option will always be immediately available.

3. Redux DevTools

The extension provides power-ups for your Redux development workflow. Apart from Redux, it can be used with any other architectures which handle the state.

4. What Font - font finder

What Font allows you to know the font name, its family, color, style, size, position. Such a great tool to create designed web pages fastly. Now you can simply identify a liked font and select exactly the same for your needs without a long search for a suitable one. This extension supports Google API as a font finder, so you will have info about all popular Google Fonts.

5. ColorZilla

With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. And it can do so much more...