https://github.com/paalamugan/vite-ts-react-tailwind-graphql-boilerplate

A Vite + React + TypeScript + TailwindCSS + GraphQL boilerplate with codegen, linting, formatting, testing, and CI/CD
https://github.com/paalamugan/vite-ts-react-tailwind-graphql-boilerplate

commitlint docker-compose dockerfile eslint graphql graphql-codegen husky react tailwindcss typescript vite vitest vitest-ui

Last synced: about 5 hours ago
JSON representation

A Vite + React + TypeScript + TailwindCSS + GraphQL boilerplate with codegen, linting, formatting, testing, and CI/CD

• Host: GitHub
• URL: https://github.com/paalamugan/vite-ts-react-tailwind-graphql-boilerplate
• Owner: paalamugan
• Created: 2023-08-01T09:36:39.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-09-27T06:06:12.000Z (about 1 year ago)
• Last Synced: 2024-05-17T20:53:51.958Z (6 months ago)
• Topics: commitlint, docker-compose, dockerfile, eslint, graphql, graphql-codegen, husky, react, tailwindcss, typescript, vite, vitest, vitest-ui
• Language: TypeScript
• Homepage:
• Size: 275 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Vite + TS + React + Tailwind Graphql + Boilerplate

## Node Engine

- If you are using nvm, run `nvm use` to use the correct node version.

- If you are not using nvm, make sure you are using node version `v16.17.1`. You can check your node version by running `node -v`.

## Installation

- Run `yarn install` to install all the dependencies.

## Running the app

- Run `yarn start` to start the app in development mode.

- Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

## Running the app in production mode

- Run `yarn build` to build the app for production.

- Run `yarn preview` to serve the app in production mode.

- Open [http://localhost:8080](http://localhost:8080) to view it in the browser.

## Running the app in docker

- Run `docker build -t vite-ts-react-app .` to build the docker image.

- Run `docker run -p 3000:3000 vite-ts-react-app` to run the docker image.

- Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

## Running the app in docker-compose

- Run `docker-compose up` to run the docker image.

- Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

## Running the app in docker-compose in production mode

- Run `export ENV=prod && docker compose up` to run the docker image.

- Run with tag `export ENV=prod TAG=1.0 && docker compose up` to run the docker image.

- Open [http://localhost:8080](http://localhost:8080) to view it in the browser.

## Generate the code coverage report

- Run `yarn test:coverage` to generate the code coverage report.

## Running the tests

- Run `yarn test` to run the tests.

## Running the tests in watch mode

- Run `yarn test:watch` to run the tests in watch mode.

## Generate GraphQL types

- Run `yarn codegen` to generate the GraphQL types.

## Generate GraphQL types in watch mode

- Run `yarn codegen:watch` to generate the GraphQL types in watch mode.

## Committing the code

- Run `yarn commit` to commit the code.

### Re-Usable Components

`QueryFetchTemplate` - The QueryFetchTemplate component is used to handle render the loading, error and no data states for a query fetcher.

**Example 1:** Benefit of using with `loadingContent` props is we don't need to worry about handle the `null/undefined` check for the data.

```tsx

const NoDataContent = () => 
No Data
;


const LoadingContent = () => 
Loading...
;


const DataContent = ({ listItems }: { listItems: any[] }) => (

  


    {listItems.map(item => (

      
{item.name}

    ))}

  

);


const ExampleComponent = () => {

  const { loading, data, error } = useGraphQLQuery(graphqlQuery, {

    id: '1',

  });

  return (

    }

      loadingContent={}

    >

      {({ data }) => }

    

  );

};

```

**Example 2:** Benefit of using without `loadingContent` props is we can pass `isLoading` value to all the children components while loading for the data.

```tsx

const NoDataContent = () => 
No Data
;


const Child1 = ({ isLoading, listItems }) => (isLoading ? 
Loading..
 : 
{listItems[0]}
);

const Child2 = ({ isLoading, listItems }) => (isLoading ? 
Loading..
 : 
{listItems[1]}
);


const DataContent = ({ isLoading, listItems }: { isLoading: boolean; listItems: any[] }) => (

  


    

    

  

);


const ExampleComponent = () => {

  const { loading, data, error } = useGraphQLQuery(graphqlQuery, {

    id: '1',

  });

  return (

    }>

      {({ data, isLoading }) => }

    

  );

};

```