DEV Community: Akshay Kamate

React boilerplate with Typescript and TDD

Akshay Kamate — Fri, 21 Oct 2022 11:51:52 +0000

TL;DR: Creating a ReactJS application with a boilerplate react-boilerplate. This post is regarding the tools used to built a good application

Integration

ViteJS: a rapid development tool for modern web projects ⚡
TailwindCSS: CSS framework 💄
Jest - TDD testing framework 🧪
Prettier - opinionated code formatter 🥰
Eslint - identifying problematic patterns found in JavaScript code 📃
Husky - improves your commits and more 🐶 woof!
Typescript - a strict syntactical superset of JavaScript 📝

Manual setup each tool

ViteJS

Official Docs get started with Vite

npm create vite@latest react-boilerplate -- --template react-ts
cd react-boilerplate
npm i
npm run dev # Run the react application

Prettier

Install dependency

npm i -D prettier

Create config file .prettierrc

{
 "printWidth": 80,
 "trailingComma": "none",
 "tabWidth": 2,
 "semi": false,
 "singleQuote": true,
 "jsxSingleQuote": true,
 "bracketSameLine": true
}

Ignore files to be modified by prettier .prettierignore

node_modules
dist
dist-ssr
*.local
.DS_Store

Eslint

Install dependencies

npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-simple-import-sort

Create config file .eslint.json

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "settings": {
    "react": {
      "version": "detect"
    },
    "import/resolver": {
      "node": {
        "paths": ["src"],
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  },
  "env": {
    "browser": true,
    "amd": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:prettier/recommended" // Make sure this is always the last element in the array.
  ],
  "plugins": ["simple-import-sort", "prettier"],
  "rules": {
    "prettier/prettier": ["error", {}, { "usePrettierrc": true }],
    "react/react-in-jsx-scope": "off",
    "jsx-a11y/accessible-emoji": "off",
    "react/prop-types": "off",
    "@typescript-eslint/explicit-function-return-type": "off",
    "simple-import-sort/imports": "error",
    "simple-import-sort/exports": "error",
    "jsx-a11y/anchor-is-valid": [
      "error",
      {
        "components": ["Link"],
        "specialLink": ["hrefLeft", "hrefRight"],
        "aspects": ["invalidHref", "preferButton"]
      }
    ]
  }
}

Ignore files to be lint by eslint .eslintignore

node_modules
.DS_Store
dist
dist-ssr
*.local
node_modules/*

TailwindCSS

Official Docs

Install dependencies

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

create postcss.config.cjs

module.exports = {
  plugins: {
    content: ['./src/**/*.{js,jsx,ts,tsx}'],
    tailwindcss: {},
    autoprefixer: {}
  }
}

create config file tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {}
  },
  plugins: []
}

update src/index.css

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

sample test for tailwindCSS component src/App.jsx

export default function App() {
  return (
    <div className='flex h-screen'>
      <div className='m-auto'>
        <h1 className='text-5xl'>Welcome to React Boilerplate</h1>
      </div>
    </div>
  )
}

Jest

Install dependencies

npm i -D @types/jest babel-jest jest jest-environment-jsdom ts-jest

create config file jest.config.cjs

import type { Config } from 'jest'

const config: Config = {
  verbose: true,
  rootDir: 'src',
  transform: {
    '^.+\\.tsx?$': 'ts-jest'
  },
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  testEnvironment: 'jsdom'
}

export default config

Husky

Install dependencies

npm i -D husky lint-staged

create pre commit checks via husky .husky/pre-commit

#!/bin/sh

npx lint-staged
npm test

update for linting package.json

{
  ...
  "lint-staged": {
    "*.{js,css,md,vue,json,ts,tsx,jsx}": "lint"
  }
}

Miscellaneous

npm i -D ts-node

create an editor config file .editorconfig

# http://editorconfig.org
root = true
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
max_line_length = 80
trim_trailing_whitespace = true

How to setup NuxtJS and TailwindCSS with variable Google Fonts

Akshay Kamate — Tue, 18 Oct 2022 14:07:54 +0000

A step-by-step guide

To have a quick setup frontend application using NuxtJS which is a framework built over VueJS and TailwindCSS

we will cover the initial setup and bootstrapping using Google Fonts.

Install NuxtJS

If you don't have NodeJs installed on your development machine please refer to docs.

$ yarn create nuxt-app myapp // yarn package manager 

$ npx create-nuxt-app myapp // node package manager
? Project name: myapp
? Programming language: JavaScript
? Package manager: Npm
? UI framework: Tailwind CSS
? Nuxt.js modules: Axios
? Linting tools: ESLint, Prettier
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Static (Static/JAMStack hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using
typescript)
? Continuous integration: None
? Version control system: Git

The above command will pull the necessary files to make the application up and running.

Cleanup scaffold generate code

Delete the Logo component from /components/Logo.vue as we do not need this for future use

Delete the <style> tag from the /layouts/default.vue the file remains with <template> tag only.

// layouts/default.vue

<template>
  <main>
    <Nuxt />
  </main>
</template>

List all the possible font types available in tailwind to use

Update the new code to the file which has the list of all the available font weights provided by the TailwindCSS.

// pages/index.vue

<template>
  <main class="container">
    <article v-for="w in weights" :key="w.class" class="mb-5">
      <h1 class="text-4xl">.{{ w.class }}</h1>
      <p class="text-3xl" :class="w.class">ABCDEFGHIJKLMNOPRSTUVWXYZ</p>
      <p class="text-3xl" :class="w.class">abcdefghijklmnopqrstuvwxyz</p>
      <p></p>
    </article>
  </main>
</template>
<script>
export default {
  data: () => ({
    weights: [
      { class: 'font-hairline' },
      { class: 'font-thin' },
      { class: 'font-light' },
      { class: 'font-normal' },
      { class: 'font-medium' },
      { class: 'font-semibold' },
      { class: 'font-bold' },
      { class: 'font-extrabold' },
      { class: 'font-black' },
    ],
  }),
}
</script>

Create CSS file and import Google Font

Add a main.css to the assets directory with the font import code from Google Font.

$ touch assets/css/main.css

To choose a Google Font you need to visit the site.
Goto Font properties dropdown and check Number of styles to maximum i.e, 18+ Styles so that you do get all the possible styles provided by the Tailwind CSS.

Choose a font from the grid and under select style choose the styles you wish to have in your application. in my case, I will choose Raleway with all the different styles provided by the provider.

After you have selected all the appropriate styles for your application you can see all the selected styles under the selected family or chick on the right to corner grid icon to toggle view.

now to use them copy the code which is present under Use on the web, instead of copying the <link> code switch to @import and copy the code present inside the <style> tag. which you will paste this code in your main.css file.

/*
 * /assets/css/main.css
 *
 * Raleway from Google Fonts
 */
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.container {
  @apply mx-auto
}

Generate the scaffolding for the TailwindCSS config file

$ npx tailwindcss init

Add the custom font to tailwind.config.js

// ...
theme: {
    extend: {
      fontFamily: {
        sans: ['Raleway', ...defaultTheme.fontFamily.sans],
      },
    },
        // ...
  },
// ...

Happy Coding!!