A React template built with Create React App (CRA), featuring TypeScript, TailwindCSS, ESLint, Prettier, Docker, PWA (Workbox), and GitHub Pages deployment configured to support BrowserRouter.
MIT License
This is a React template created with Create React App (CRA) and configured with TypeScript, TailwindCSS, ESLint, Prettier, Docker, and PWA support using Workbox. It is ready to be deployed on GitHub Pages and is compatible with BrowserRouter, allowing seamless URL routing.
Clone the repository:
git clone https://github.com/discontinuedlabs/react-template.git
cd react-template
Install dependencies:
npm install
# or
yarn install
npm start
# or
yarn start
# or if you prefer to run it inside a Docker container
docker build -t react-template .
docker run -p 3000:3000 react-template
This will start the development server at http://localhost:3000/react-template/
.
This template uses TypeScript for static type-checking and ensuring type safety. You can find the configuration in the tsconfig.json
file.
[!CAUTION]
Removing TypeScript
- Convert all
.tsx
files to.jsx
and.ts
files to.js
.- Delete the
tsconfig.json
file.- Uninstall TypeScript and its related packages:
npm uninstall typescript @types/react @types/react-dom @types/jest @types/node @typescript-eslint/eslint-plugin @typescript-eslint/parser
- Remove TypeScript from the
"overrides"
field inpackage.json
:"overrides": { "typescript": "^5.5.3" }
- Remove TypeScript references from the
"plugins"
and"extends"
fields in the.eslintrc
configuration:"plugins": ["@typescript-eslint"], "extends": ["plugin:@typescript-eslint/recommended"]
TailwindCSS is used for utility-first styling. It is configured with Just-in-Time (JIT) mode for optimized builds. You can find the configuration in the tailwind.config.js
file.
[!CAUTION]
Removing TailwindCSS
Delete the
tailwind.config.js
andpostcss.config.js
files.Uninstall TailwindCSS and related packages:
npm uninstall tailwindcss postcss autoprefixer prettier-plugin-tailwindcss
Remove any usage of
@tailwind
,@apply
, and@layer
from yourindex.css
:@tailwind base; @tailwind components; @tailwind utilities; @layer base { * { @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500; } }
Remove
prettier-plugin-tailwind
from the"plugins"
field in.prettierrc
:"plugins": ["prettier-plugin-tailwindcss"]
Update your JSX components to use standard CSS classes.
This project uses the following ESLint configurations:
eslint:recommended
plugin:react/recommended
plugin:@typescript-eslint/recommended
airbnb
plugin:import/errors
plugin:jsx-a11y/recommended
plugin:prettier/recommended
You can find the ESLint configuration in the .eslintrc
file.
[!CAUTION]
Removing ESLint
- Delete the
.eslintrc
and.eslintignore
files.- Uninstall ESLint and associated plugins:
npm uninstall eslint @eslint/js @typescript-eslint/parser eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks
- Remove the
"lint"
and"lint:fix"
scripts, along with the"eslintConfig"
field frompackage.json
:"scripts": { "lint": "eslint .", "lint:fix": "eslint --fix ." }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }
Prettier is used for code formatting. You can find the configuration in the .prettierrc
file.
[!CAUTION]
Removing Prettier
- Delete the
.prettierrc
and.prettierignore
files.- Uninstall Prettier and related plugins:
npm uninstall prettier eslint-plugin-prettier
- Remove the
"format"
script frompackage.json
:"scripts": { "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,json,html,css,md}'" }
- Remove Prettier references from the
"plugins"
and"extends"
fields in the.eslintrc
configuration:"plugins": ["prettier"], "extends": ["plugin:prettier/recommended"]
This project includes a Dockerfile
for containerizing the application. The Dockerfile uses node:18-alpine
as the base image. To build and run the Docker container, use the following commands:
docker build -t react-template .
docker run -p 3000:3000 react-template
[!CAUTION]
Removing Docker
- Delete the
Dockerfile
and.dockerignore
files.
This project is configured as a Progressive Web App using Workbox. The service worker is generated during the build process.
[!CAUTION]
Removing PWA Support
Delete
service-worker.js
,serviceWorkerRegistration.js
,manifest.json
,favicon.ico
, and thepublic/images/favicons
folder.Remove the service worker registration code from
index.tsx
:import * as serviceWorkerRegistration from "./serviceWorkerRegistration"; serviceWorkerRegistration.unregister();
Remove favicon link tags from
index.html
:<link rel="apple-touch-icon" sizes="180x180" href="/react-template/images/favicons/apple-touch-icon.png" />
This project is configured to be deployed to GitHub Pages. To deploy, run:
npm run deploy
# or
yarn deploy
Unlike many GitHub Pages setups that require the use of HashRouter
due to URL routing limitations, this template is compatible with BrowserRouter
thanks to the configuration provided by rafgraph's Single Page Apps for GitHub Pages. It uses a custom 404.html
file and a redirect script to handle URL routing correctly and avoid 404 errors on page reloads. Be sure to update the homepage
field in package.json
to match your repository URL.
[!CAUTION]
Removing GitHub Pages Deployment
- Uninstall the
gh-pages
package:npm uninstall gh-pages
- Remove the
"deploy"
and"predeploy"
scripts frompackage.json
:"scripts": { "predeploy": "npm run build", "deploy": "gh-pages -d build" }
- Update the
Router
component'sbasename
property inindex.tsx
:<Router basename="/react-template/">
- Remove or update all
href
attributes inindex.html
:<link rel="canonical" href="https://discontinuedlabs.github.io/react-template/" /> <link rel="apple-touch-icon" sizes="180x180" href="/react-template/images/favicons/apple-touch-icon.png" />
- If your deployment platform supports
BrowserRouter
without special configuration, delete404.html
and remove the "Single Page Apps for GitHub Pages" script fromindex.html
:<script type="text/javascript"> (function (l) { if (l.search[1] === "/") { var decoded = l.search .slice(1) .split("&") .map(function (s) { return s.replace(/~and~/g, "&"); }) .join("?"); window.history.replaceState(null, null, l.pathname.slice(0, -1) + decoded + l.hash); } })(window.location); </script>
To make this template work for your repository, you need to update a few configuration files:
package.json
homepage
URL to the GitHub Pages URL of your repository."homepage": "https://your-username.github.io/your-repo-name/"
src/index.tsx
basename
value of <Router basename="/react-template/">
to the name of your repository.<Router basename="/your-repo-name/">
public/manifest.json
"react-template"
to the name of your repository. If your GitHub Pages URL is https://your-username.github.io/
, leave the "react-template"
string as "/"
."icons": [
{
"src": "/your-repo-name/favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": "/your-repo-name/",
"scope": "/your-repo-name/",
public/index.html
href
value of <link rel="canonical" href="https://discontinuedlabs.github.io/react-template/" />
to the URL of your GitHub Pages.<link rel="canonical" href="https://your-username.github.io/your-repo-name/" />
"react-template"
in href
values to your repository name. If your GitHub Pages URL is https://your-username.github.io/
, leave the "react-template"
string as "/"
.<link rel="manifest" href="/your-repo-name/manifest.json" />
<link rel="apple-touch-icon" sizes="180x180" href="/your-repo-name/images/favicons/apple-touch-icon.png" />
Additionally, while not required for the template to work, it's a good idea to change the following parts in the package.json
as needed:
"name": "react-template",
"author": "discontinuedlabs",
"description": "This is a React template created with Create React App (CRA) and configured with TypeScript, TailwindCSS, ESLint, Prettier, Docker, and PWA support using Workbox. It is ready to be deployed on GitHub Pages and is set up to enforce code quality and styling guidelines.",
"license": "MIT",
"version": "1.0.0",
"private": true,
"repository": {
"type": "git",
"url": "https://github.com/discontinuedlabs/react-template.git"
},
"keywords": [
"PWA",
"Progressive Web App",
"Open Source",
"MIT",
"React",
"Create React App",
"TypeScript",
"GitHub Pages",
"BrowserRouter",
"Docker",
"Tailwind CSS",
"ESLint",
"Prettier",
"Template"
],
"bugs": {
"url": "https://github.com/discontinuedlabs/react-template/issues"
}
This project is licensed under the MIT License. See the LICENSE file for details.