Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vitorsalgado/react-web-starter
React Starter Project
https://github.com/vitorsalgado/react-web-starter
archetype boilerplate clean-architechture frontend javascript playwright-demo react reactjs scaffolding template typescript
Last synced: 20 days ago
JSON representation
React Starter Project
- Host: GitHub
- URL: https://github.com/vitorsalgado/react-web-starter
- Owner: vitorsalgado
- License: mit
- Created: 2018-02-02T13:20:55.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-04-11T02:41:08.000Z (9 months ago)
- Last Synced: 2024-04-11T04:13:35.367Z (9 months ago)
- Topics: archetype, boilerplate, clean-architechture, frontend, javascript, playwright-demo, react, reactjs, scaffolding, template, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/create-react-ts-web-starter
- Size: 91.2 MB
- Stars: 2
- Watchers: 3
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
React Web Starter
Starter Project for React using TypeScript that allows customization of all components. Dedicated to my projects. Maybe it works for you as well :)
npm init react-ts-web-starter
This project goal is to learn and explore modern frontend technologies and serve as a base for my personal projects since I prefer to control mostly libs involved (for some reason 🙄).
create-react-app might be a better choice for most cases, but if you like the project, check below how to use it :)
www.npmjs.com/package/create-react-ts-web-starter
## Overview
A new React project can be bootstrapped using this repository as a template using the following command:
```
npm init react-ts-web-starter
```
Without parameters, the project will be created on a folder **my-app** in the same directory where you executed the command.
All parameters available:
```
--destination= Defaults to the current directory
--app= Defaults to my-app
```
The final folder will be the parameter `destination` concatenated with the parameter `app`.
## Getting Started
### Dependencies
**NPM** is the project package manager.
Run the following command to install dependencies and prepare the environment with Git hooks:
```
npm i
```
### Running the Dev Server
```
npm start
```
### Running With Docker Compose
```
make up
```
### Building
```
npm run build
```
### Serving Dist Content with Nginx
```
make dist
```
## Configurations
**WebPack** is the module bundler used here.
Some build configurations can be changed using **environment variables**. These variables can also be set using **DotEnv**. Just place a **.env** on project root dir and modify the
values
you want.
Check [this Joi schema](config/env.ts) to see all variables and their respective default and allowed values.
## Test
**Jest** and **Playwright** are the testing frameworks for this project.
Check the [jest.config.ts](jest.config.ts) and [playwright.config.ts](playwright.config.ts) configuration files.
## Linters and Code Style
The mix of tools used to ensure code and commit style and best practices:
- ESLint
- Prettier
- Stylelint
- Commitlint
- Lint Staged
- Husky
## CI
- **GitHub Actions** for continuous integration
- **Codecov** for test coverage reports
- **Codacy** and **CodeClimate** for code analysis
## Additional Tools
Check the [Makefile](Makefile) for some useful commands.
Execute `make` to show the _help_.