My Base

My personal and heavily biased project base. Use at your own risk.

A Minimalist production ready Webpack/React boilerplate for TypeScript Projects.

Features

Project

I use React.js for almost every front-end project I create. Here's a solid boilerplate I use for modern React TypeScript based projects.

My Base is a lean and imple alternative for CRA (Create React App);
We can eliminate all of its disadvantages by setting up dependencies and configs ourselves (add dependencies as needed) making it easier to add/modify build configs;
Minimal webpack and babel configs required to run a react application;
Production-ready build set up, with linters and pre-commit hooks.
Support for both TSX and JSX

Usage

Clone:

git clone https://github.com/moquette/my-base.git

Development

1: Change to project directory

cd my-base

2: Install dependencies

yarn

3: Start development server

yarn start

Pages served from http://localhost:3000.

NOTE: Auto type checking, linting and formatting performed on pre-commit.

Deployment

Build:

yarn build

The build will be placed in the build directory. You can change the build directory in the webpack config.

Universal Alias

(Absolute Path Importing)

File import can use either relative or absolute paths with the @/ universal alias:

Relative Importing

import { EmailJS } from '../../components/EmailJS'

Universal Alias Importing

import { EmailJS } from '@components/EmailJS'

Preconfigured Aliases: (src/tsconfig.json)

"@src/*" : ["src/*"],
"@images/*" : ["src/assets/images/*"],
"@styles/*" : ["src/assets/styles/*"],
"@views/*" : ["src/views/*"],
"@hooks/*" : ["src/hooks/*"],
"@components/*" : ["src/components/*"]

TailwindCSS / SASS

TailwindCSS / Sass and PostCSS support.

tailwind.config.js is located in the project's root an initialzed in styles/global.scss . Visit TailwindCSS for more information.

Scripts

yarn start:

Start development server and lanches default browser.

yarn build:

Builds and bundles resources for production.

yarn lint:

Lints, formats and typechecks all files in the src directory.

yarn profile:

Visualize size of webpack output files with an interactive zoomable treemap. Note: Make sure to build project (yarn build) prior to analyzing.

Yarn / NPM

This boilerplate uses Yarn 3 by default. Nonetheless, you may switch to npm by deleting the yarn.lock file, and installing dependencies with npm install. Remember to change any CI workflows, Husky Git hooks, and lint-staged steps to use npm commands.

License

This project is open source and available under the MIT License.