https://github.com/mehradi-github/ref-react-devops-2406
Frontend project with CI/CD
https://github.com/mehradi-github/ref-react-devops-2406
docker docker-compose graphql jenkins react redux-thunk sass scss
Last synced: 2 months ago
JSON representation
Frontend project with CI/CD
- Host: GitHub
- URL: https://github.com/mehradi-github/ref-react-devops-2406
- Owner: mehradi-github
- License: mit
- Created: 2024-06-19T09:09:42.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-11T14:35:17.000Z (almost 2 years ago)
- Last Synced: 2025-02-05T07:12:04.423Z (over 1 year ago)
- Topics: docker, docker-compose, graphql, jenkins, react, redux-thunk, sass, scss
- Language: CSS
- Homepage:
- Size: 128 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Frontend project with React and CI/CD
- [Frontend project with React and CI/CD](#frontend-project-with-react-and-cicd)
- [Install React + TypeScript + Vite](#install-react--typescript--vite)
- [Expanding the ESLint configuration](#expanding-the-eslint-configuration)
- [integrating GraphQL with RTK-Query](#integrating-graphql-with-rtk-query)
## Install React + TypeScript + Vite
[Vite](https://vitejs.dev/guide/) is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts:
```sh
npm create vite@latest
```
### Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
- Configure the top-level `parserOptions` property like this:
```js
export default {
// other rules...
parserOptions: {
ecmaVersion: "latest",
sourceType: "module",
project: ["./tsconfig.json", "./tsconfig.node.json"],
tsconfigRootDir: __dirname,
},
};
```
- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
## integrating GraphQL with RTK-Query
**Redux Toolkit** is the official toolset for efficient Redux development. This makes life much easier for developers by reducing boilerplate code and incorporating many more advanced features built on top of Redux.
**RTK-Query** is an optional add-on that comes built-in with Redux Toolkit. To put simply, it is a powerful data fetching and caching tool that comes with many advanced features.
**GraphQL** is a querying language for APIs.
**Graphql-codegen** library is used to automatically generate our queries and types from our graphql schema and document files.
```sh
npm i graphql graphql-codegen --save
npm i @graphql-codegen/cli @graphql-codegen/client-preset @rtk-query/graphql-request-base-query @graphql-codegen/typescript-resolvers @graphql-codegen/typescript-rtk-query --save-dev
```