Skip to content

A Webpack + React + Tailwind CSS project setup from scratch

License

Notifications You must be signed in to change notification settings

erincones/react-app-template

Repository files navigation

React App Template

This template is ready to develop modern React single page applications using Tailwind CSS as CSS framework, like Create React App but manually setup from scratch. Just clone it and start to develop a new amazing app.

git clone https://github.com/erincones/react-app-template new-app-name # For HTTPS
git clone git@github.com:erincones/react-app-template.git new-app-name # For SSH

Main features

Webpack is setup for TypeScript and Sass trough Tailwind CSS, with "Fast Refresh" enabled, ESLint and Stylelint support for a better develop experience. However, only the minimal dependencies have been added, so you can do exactly what you want to do as add a router like @reach/router.

SEO

A basic SEO setup with Facebook Open Graph and Twitter cards meta tags is already setup too, customize it through HtmlWebpackPlugin in the webpack.config.json file. Also, you can adapt the public/manifest.json file to your needs.

Static resources

The static resources should be placed in the public directory. Feel free to add so many sub directories as you need. For example, the icons (except for favicon.ico) and the cover image for the Open Graph and Twitter cards can be found in the public/img directory, but new images can be placed here if you need.

Scripts

Once the template is cloned, you can run several commands.

  • npm start: Start the development server and watch files for hot reload.
  • npm run develop: Same that npm start
  • npm run build: Build the app into static files for production into the build directory.
  • npm run deploy: Run the build script and publish the result files into the gh-pages branch on GitHub.
  • npm run test: Starts the test runner.
  • npm run clean: Removes the build directory.

Notes

The "Fast Refresh" is achieved trough the React Refresh Webpack Plugin, so editing the src/components/app.tsx file always fires a full reload.

License

This project is licensed under the MIT License