This boilerplate is massively copied from [email protected]
's ejected initial app. It has/supports:
- Webpack configuration files (without and with
swc
). - Vite configuration.
- Babel and TypeScript.
- React, Redux (thunk, saga, and observable - keep what you choose, uninstall others, or use them all, it is OK).
- Zustand (another state management solution).
- ESLint and Prettier.
- SASS/SCSS/CSS modules and Tailwindcss.
- EditorConfig.
- Testing.
- Docker (for development and deployment).
I also created notes on deploying static website to various cloud services:
- Amazon Web Services (S3, Lightsail, ECS)
- Azure (Azure App Service, Azure Storage)
- Google Cloud Platform (Google Cloud Storage, Google Cloud Run, Google Kubernetes Engine)
However, I focus on writing guideline. To have better understanding of cloud services, I recommend reading from the cloud providers' documentation.
I created this repository for study purposes:
- Customize Webpack configuration.
- Construct a boilerplate which contains commonly-used libraries and configuration.
- Take notes on how to deploy a front-end web application (of course, doing so has almost nothing to do with fancy libraries). By doing these, I can gain some experience along the way, since I will try as much platform as possible.
- Node 16.19.0
- Yarn v2 (Berry)
To use this locally, firstly, clone this repository, then you can run it with or without Docker.
- Install Node.js (>=14), you might want to install specific versions of Node.js via nvm
- Install dependencies by running the command
yarn
oryarn install
. - To use Webpack, run
yarn start
and openhttp://localhost:3000
in your browser of choice. - To use Vite, run
yarn vite
and openhttp://localhost:5173
.
- Install Docker and Docker Compose.
- Run
docker-compose up -d
.
In this option, the configuration file has already used Docker volume, which allow live reloading when you save changes to source code (of course, this is possible also due to webpack-dev-server
). In other words, you don't have to docker-compose restart
to update the running react app.
- Routing
react-router-dom
- HTTP request
axios
@tanstack/react-query
- Internationalization
i18next
react-i18next
- State management
zustand
redux
react-redux
@reduxjs/toolkit
redux-saga
redux-observable
- Form
react-hook-form
zod
@hookform/resolvers
- CSS
@emotion/react
@emotion/styled
clsx
polished
tailwindcss
sass
autoprefixer
postcss
- Date and Time
dayjs
- Devtools
- Webpack
- TypeScript
- Babel
- Commitlint
- SWC
lint-staged
husky
- ESLint
- Prettier
- Testing
- Jest
@testing-library/react
msw