Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
m-avagyan committed Nov 24, 2023
2 parents 3d1fc39 + 4b9c844 commit 8e8b901
Show file tree
Hide file tree
Showing 26 changed files with 3,753 additions and 1,958 deletions.
3 changes: 0 additions & 3 deletions .babelrc

This file was deleted.

2 changes: 1 addition & 1 deletion .eslintignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
/node_modules
/build
/coverage
/dist
3 changes: 2 additions & 1 deletion .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,13 @@ module.exports = {
rules: {
'no-console': ['error', { allow: ['info', 'groupCollapsed', 'groupEnd', 'error'] }],
'prettier/prettier': ['error', { endOfLine: 'auto' }],
'react/react-in-jsx-scope': 0,
'react/react-in-jsx-scope': ['off'],
'no-use-before-define': ['error', 'nofunc'],
'@typescript-eslint/no-use-before-define': ['error', 'nofunc'],
'@typescript-eslint/explicit-module-boundary-types': ['off'],
'@typescript-eslint/no-var-requires': 0,
'@typescript-eslint/no-explicit-any': 0,
'@typescript-eslint/no-non-null-assertion': 0,
},
settings: {
react: {
Expand Down
27 changes: 17 additions & 10 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,17 +1,24 @@
/node_modules
/build
/coverage
node_modules/
dist/
coverage/

.eslintcache
.firebase/
.env

.DS_Store
.idea
.vscode
*.history
*.sublime-project
*.sublime-workspace

.module-cache
.DS_STORE
*.log*
*.iml
*.swp
*.swo

logs
*.log
npm-debug.log*
npm-error.log*
yarn-debug.log*
yarn-error.log*

logs
*.log
2 changes: 1 addition & 1 deletion .prettierignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
/node_modules
/build
/coverage
/dist
3 changes: 1 addition & 2 deletions .prettierrc.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
module.exports = {
jsxBracketSameLine: false,
jsxSingleQuote: false,
proseWrap: 'always',
quoteProps: 'as-needed',
Expand All @@ -11,6 +10,6 @@ module.exports = {
bracketSpacing: true,
printWidth: 120,
arrowParens: 'always',
importOrder: ['^(react)', '<THIRD_PARTY_MODULES>', '@/(.*)', '^[./]'],
importOrderSeparation: true,
experimentalBabelParserPluginsList: ['jsx', 'tsx'],
};
90 changes: 43 additions & 47 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,69 +1,65 @@
## webpack-react-typescript
# webpack-react-typescript

Template for create react app using webpack and typescript.
Modern template to start creating react app using webpack and typescript 🚀

###
## Getting Started

<img src="https://i.morioh.com/bffbbd66ea.png" alt="webpack-react-typescript" />
Installing

###
- `git clone https://github.com/m-avagyan/webpack-react-typescript-template.git`
- `cd webpack-react-typescript-template`
- `yarn install --frozen-lockfile`

## Quick Start
Run Locally

**Start the development**
- `yarn dev` - server started at [localhost:3000](https://localhost:3000/) in local mode
- `yarn start` - server started at [localhost:3000](https://localhost:3000/) in development mode
- `yarn watch` - server started at [localhost:3000](https://localhost:3000/) in production mode

- `git clone https://github.com/m-avagyan/webpack-react-typescript-template.git`
- `yarn install` or `npm install`
- `yarn start` or `npm start`
- open [localhost:3000](http://localhost:3000) in your favorite browser
Build Project

**Build project**
- `yarn clean` - clean the `dist/` directory
- `yarn build` - we can see the output in `dist/` directory

- `yarn build` or `npm run build`
Analyze

**Lint project**
- `yarn analyze` - build project to `/dist` and analyze your bundle size in [localhost:3006](http://localhost:3006)

- `yarn lint` or `npm run lint`
Codebase

**Fix autofixable eslint errors**
- `yarn lint` - lint the codebase
- `yarn format` - format the codebase using prettier

- `yarn lint:fix` or `npm run lint:fix`
### Tools and Technologies

If `husky` pre-commit hook willn't work, please run `npx husky-init` command with cli (in project directory)<br /> and replace new `.husky/pre-commit` file with our. <br />Also I created `release.yml` file in `.github/workflows/`. This is for automation our releases with github bot,<br />so you need to add your script after `yarn build` command.
- [ReactJS](https://reactjs.org/)
- [React Router](https://reactrouter.com/en/main/)
- [TypeScript](https://www.typescriptlang.org/)
- [Webpack](https://webpack.js.org/)
- [Styled Components](https://styled-components.com/)

## Used technologies
## Contributing

- [React 17](https://reactjs.org/blog/2020/10/20/react-v17.html) as a front-end library.
- [Webpack 5](https://webpack.js.org/) as a bundler.
- [TypeScript](https://www.typescriptlang.org/) for type checking.
- [React Router v6](https://v5.reactrouter.com/web/guides/quick-start) for application routing.
- [i18next](https://www.i18next.com/) for localzation.
- [eslint](https://eslint.org/) for lint code.
- [prettier](https://prettier.io/) for format code.
- [husky](https://typicode.github.io/husky/#/) for run any script before commit.
- [commitlint](https://commitlint.js.org/#/) for conventional commit messages.
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

## Commit Rules
## Commits

We are use commitlint for lint our commit messages and it has several rules for commits. <br />
- We use the [conventional commit lint](https://commitlint.js.org/#/) for linting our commit messages
- Also before every commit we run the `lint` command using [husky](https://typicode.github.io/husky/#/) for lint our
codebase

**Commit types**
---

- `chore`: a commit of the type chore includes the most important commits.
- `docs`: a commit of the type docs includes the update of documentation.
- `feat`: a commit of the type feat introduces a new feature to the codebase.
- `fix`: a commit of the type fix patches a bug in your codebase.
- `style`: a commit of the type style includes a css styling commit.
- `refactor`: a commit of the type refactor includes a code refactoring to the codebase.
- `revert`: a commit of the type revert is used when a developer wants to revert an old commit.
- `unit`: a commit of the type unit includes a unit testing commit.
- `test`: a commit for a testing the app work at difference environments
- `wip`: work in process
## Author

**Examples**
**Martik Avagyan**

```
git commit -m "feat(readme): generate a readme file"
git commit -m "fix(header): show current banner"
git commit -m "chore(release): new release is ready"
```
- Website: [martikavagyan.com](https://martikavagyan.com)
- Twitter: [@martikavagyan](https://twitter.com/martikavagyan)
- GitHub: [@m-avagyan](https://github.com/m-avagyan)

---

## License

[MIT](https://choosealicense.com/licenses/mit/)
6 changes: 1 addition & 5 deletions commitlint.config.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
module.exports = {
extends: ['@commitlint/config-conventional'],
rules: {
'type-enum': [
2,
'always',
['chore', 'docs', 'feat', 'fix', 'style', 'refactor', 'revert', 'unit', 'test', 'wip'],
],
'type-enum': [2, 'always', ['chore', 'docs', 'feat', 'fix', 'refactor', 'revert', 'unit', 'test', 'wip']],
},
};
108 changes: 59 additions & 49 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,19 +1,21 @@
{
"name": "webpack-react-typescript-template",
"version": "1.0.0",
"description": "Template for create react app using webpack and typescript",
"version": "2.0.0",
"license": "MIT",
"description": "Modern template to start creating react app using webpack and typescript.",
"keywords": [
"react",
"typescript",
"webpack",
"react-router",
"styled-components",
"i18next",
"eslint",
"prettier",
"husky",
"commitlint"
],
"author": "Martik Avagyan <martikavagyan1@gmail.com> (https://github.com/m-avagyan)",
"author": "Martik Avagyan <dev@martikavagyan.com> (https://github.com/m-avagyan)",
"homepage": "https://github.com/m-avagyan/webpack-react-typescript-template#readme",
"repository": {
"type": "git",
Expand All @@ -23,62 +25,70 @@
"url": "https://github.com/m-avagyan/webpack-react-typescript-template/issues"
},
"scripts": {
"start": "webpack serve --progress --mode development",
"clean": "rm -rf ./build",
"build": "yarn clean && webpack --progress --mode production",
"lint": "yarn eslint src --ext .js,.ts,.tsx --ignore-pattern '!.*.js' --no-error-on-unmatched-pattern",
"lint:fix": "yarn lint --fix"
"clean": "rm -rf ./dist",
"prepare-icons": "node prepare-icons.js",
"build": "webpack --progress --mode production",
"analyze": "webpack --progress --mode production --env analyze",
"dev": "yarn webpack serve --progress --mode none",
"start": "yarn webpack serve --progress --mode development",
"watch": "yarn webpack serve --progress --mode production",
"lint": "eslint src --ext .js,.ts,.tsx --ignore-pattern '!.*.js'",
"format": "yarn lint --fix",
"postinstall": "husky install"
},
"dependencies": {
"i18next": "^21.9.2",
"i18next-browser-languagedetector": "^6.1.5",
"i18next-resources-to-backend": "^1.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "5.3.3",
"styled-components": "^5.3.6"
},
"devDependencies": {
"@babel/core": "^7.19.1",
"@babel/preset-env": "^7.19.1",
"@babel/core": "^7.20.12",
"@babel/preset-env": "^7.20.2",
"@babel/preset-react": "^7.18.6",
"@babel/preset-typescript": "^7.18.6",
"@commitlint/cli": "^17.1.1",
"@commitlint/config-conventional": "^17.1.0",
"@svgr/webpack": "^6.3.1",
"@types/react": "^17.0.1",
"@types/react-dom": "^17.0.1",
"@typescript-eslint/eslint-plugin": "4.0.1",
"@typescript-eslint/parser": "4.0.1",
"babel-loader": "^8.2.5",
"css-loader": "^6.7.1",
"eslint": "^7.26.0",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react": "^7.23.2",
"eslint-plugin-react-hooks": "^4.2.0",
"@commitlint/cli": "^17.4.4",
"@commitlint/config-conventional": "^17.4.4",
"@svgr/webpack": "^6.5.1",
"@trivago/prettier-plugin-sort-imports": "^4.0.0",
"@types/node": "^18.11.18",
"@types/react": "^18.0.27",
"@types/react-dom": "^18.0.10",
"@types/react-i18next": "^8.1.0",
"@types/react-router-dom": "^5.3.3",
"@types/styled-components": "^5.1.26",
"@typescript-eslint/eslint-plugin": "^5.49.0",
"@typescript-eslint/parser": "^5.49.0",
"babel-loader": "^9.1.2",
"babel-plugin-styled-components": "^2.0.7",
"copy-webpack-plugin": "^11.0.0",
"css-loader": "^6.7.3",
"dotenv-webpack": "^8.0.1",
"esbuild-loader": "^2.21.0",
"eslint": "^8.32.0",
"eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.32.1",
"eslint-plugin-react-hooks": "^4.6.0",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.0",
"husky": "^8.0.0",
"lint-staged": "^13.0.3",
"prettier": "^2.3.0",
"mini-css-extract-plugin": "^2.7.2",
"postcss": "^8.4.31",
"postcss-loader": "^7.0.2",
"postcss-preset-env": "^7.8.3",
"prettier": "^2.8.3",
"style-loader": "^3.3.1",
"ts-loader": "^9.4.1",
"typescript": "^4.8.2",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"ts-loader": "^9.4.2",
"typescript": "^4.9.4",
"webpack": "^5.76.0",
"webpack-bundle-analyzer": "^4.8.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1"
},
"dependencies": {
"i18next": "^21.9.2",
"i18next-browser-languagedetector": "^6.1.5",
"i18next-resources-to-backend": "^1.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-i18next": "^11.18.6",
"react-router-dom": "^6.4.1"
},
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"eslint --quiet --cache --fix"
],
"*.{json,js,ts,jsx,tsx,html}": [
"prettier --write"
]
},
"license": "MIT",
"private": true,
"engines": {
"node": ">=8.0.0",
"npm": ">=6.0.0",
Expand Down
Empty file added public/ads.txt
Empty file.
File renamed without changes.
6 changes: 4 additions & 2 deletions src/index.html → public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,12 @@
<meta name="description" content="Template for create react app using webpack and typescript." />
<meta
name="keywords"
content="react, typescript, webpack, react-router, i18next, eslint, prettier, husky, commitlint"
content="react, typescript, webpack, react-router, styled-components, i18next, eslint, prettier, husky, commitlint"
/>
<meta name="author" content="Martik Avagyan <martikavagyan1@gmail.com> (https://github.com/m-avagyan)" />
<meta name="robots" content="index, follow" />
<meta name="author" content="Martik Avagyan <dev@martikavagyan.com> (https://github.com/m-avagyan)" />
<title>Webpack React TypeScript Template</title>
<link rel="sitemap" type="application/xml" href="/sitemap.xml" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand Down
4 changes: 4 additions & 0 deletions public/robots.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
User-agent: *
Allow: /

Sitemap: https://www.<your-domain>/sitemap.xml
9 changes: 9 additions & 0 deletions public/sitemap.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://www.your-domain.com/</loc>
<lastmod>2023-08-06</lastmod>
<changefreq>weekly</changefreq>
<priority>1</priority>
</url>
</urlset>
Loading

0 comments on commit 8e8b901

Please sign in to comment.