How I structure my React /TS applications (2021)

import axios, { Method, AxiosResponse } from "axios";

const api = axios.create({
  // baseURL: process.env.REACT_APP_HOST_BACKEND,
  baseURL: "https://rickandmortyapi.com/api",
});

const request = <T>(
  method: Method,
  url: string,
  params: any
): Promise<AxiosResponse<T>> => {
  return api.request<T>({
    method,
    url,
    params,
  });
};

// Define a default query function that will receive the query key
export const defaultQueryFn = async ({ queryKey }: any): Promise<unknown> => {
  const data = await request(queryKey[0], queryKey[1], queryKey[2]);
  return data;
};

import React from "react";
import "../../styles/home.css";
import { useQuery } from "react-query";
import { Header } from "../../components";

const Home: React.FC = () => {
  const { data, error, isFetching } = useQuery(["GET", "/character", {}]);

  if (isFetching) return <p>Is loading...</p>;

  if (error) return <p>${error}</p>;

  console.log(data);

  return (
    <div className="App">
      <Header />
    </div>
  );
};

export default Home

describe('404 page', function() {
    it('should give the option to return to home', function() {
        cy.visit("/does-not-exists");
        cy.contains('Return to Home');
        cy.get('a')
          .click()
       cy.contains('Learn React', {timeout: 10000}) 
    });
});

FROM node:15-alpine AS builder

WORKDIR /app

COPY . .

RUN yarn install 

RUN yarn build

FROM nginx:stable-alpine

WORKDIR /usr/share/nginx/html

RUN rm -rf *

COPY --from=builder /app/build .

ENTRYPOINT ["nginx", "-g", "daemon off;"

$ docker build -t djam97/react-boilerplate-2021:prod -f docker/Dockerfile.prod .

apiVersion: apps/v1
kind: Deployment
metadata:
  name: react-boiler-plate
  labels:
    app: react-boiler-plate
spec:
  replicas: 1
  selector:
    matchLabels:
      app: react-boiler-plate
  template:
    metadata:
      labels:
        app: react-boiler-plate
    spec:
      containers:
        - name: react-boiler-plate
          image: djam97/react-boilerplate-2021:prod
          imagePullPolicy: Never
          ports:
            - containerPort: 3000
---
apiVersion: v1
kind: Service
metadata:
  name: react-boiler-plate-service
spec:
  selector:
    app: react-boiler-plate
  ports:
    - protocol: TCP
      port: 3000
      targetPort: 3000

$ kubectl apply -f k8s/

name: Deploy site

on:
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    continue-on-error: true
    strategy:
      matrix:
        node-version: [14.x]
    steps:
      - uses: actions/checkout@v2
      - name: Setup Node
        uses: actions/setup-node@v1
        with:
          node-version: "14.x"
      - name: Get yarn cache
        id: yarn-cache
        run: echo "::set-output name=dir::$(yarn cache dir)"
      - name: Cache dependencies
        uses: actions/cache@v1
        with:
          path: ${{ steps.yarn-cache.outputs.dir }}
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-
      - name: Yarn installation
        run: yarn install && CI='' yarn build
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.ACCESS_TOKEN }}
          publish_dir: ./buil

"homepage": "https://djamaile.github.io/react-boilerplate-2021",

"homepage": "https://<your username>.github.io/react-boilerplate-2021",