BASE

A Minimalistic Webpack/React Boilerplate for TypeScript projects.

View Demo Report Bug Request Feature
Explore the docs »

About The 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.

• Base is a lean and simple 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

(back to top)

Built With

• React / React Router
• Webpack / Bundle Analyzer
• TailwindCSS / Automatic Class Sorting
• Sass / Less / PostCSS
• TypeScript / Babel
• Prettier / ESLint / Airbnb
• Husky / Lint-staged

(back to top)

Usage

Clone:

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

Development

1: Change to project directory

cd 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.

Production

Build:

yarn build

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

(back to top)

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.

(back to top)

Extras

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/*"],
"@pages/*" : ["src/pages/*"],
"@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.

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.

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

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

(back to top)