README.md

React Typescript Template

About   |    Packages   |    Getting started   |    Customize   |    Deploy

ℹ️ About

I recently started using React by creating my own Webpack and configuring the project as I think it looks best, so I created this initial template and I intend to keep it updated.

🖥 Packages

The project was started with the following packages:

• Dotenv
• React
• React DOM
• React Router Dom
• Styled Components
• Typescript

In the dev dependencies the Webpack, Jest, Fast Refresh, Eslint and Prettier are configured.

🚀 Getting started

First of all you need to have node and yarn(or npm) installed on your machine.

If you decide to use npm don't forget to delete yarn.lock in folders

Press the Use this template button on Github and create your own repository.

Clone your repo to your local machine.

1. git clone my-app
2. cd my-app
3. yarn or npm install
4. yarn start or npm run start

To run the tests, after the dependencies are installed, run yarn test.

yarn test:watch to keep testing observing changes.

yarn test:coverage to generate the test coverage report in the files.

✏️ Customize

You have the freedom to change everything in your project, from the settings of Webpack, Jest and even create new structures.

Example of a private route:

Route.tsx

import React from 'react';
import {
  Route as ReactDOMRoute,
  RouteProps as ReactDOMRouteProps,
  Redirect,
} from 'react-router-dom';

import { useAuth } from '../hooks/auth';

interface RouteProps extends ReactDOMRouteProps {
  isPrivate?: boolean;
  component: React.ComponentType;
}

const Route: React.FC<RouteProps> = ({
  isPrivate = false,
  component: Component,
  ...rest
}) => {
  const { user } = useAuth();
  // You can store user data in another way and only retrieve it here

  return (
    <ReactDOMRoute
      {...rest}
      render={({ location }) => {
        return isPrivate === !!user ? (
          <Component />
        ) : (
          <Redirect
            to={{
              pathname: isPrivate ? '/' : '/dashboard',
              state: { from: location },
            }}
          />
        );
      }}
    />
  );
};

export default Route;

✈️ Deploy

I recommend deploy using yarn build:server script, for this your VPS need to have installed docker and docker-compose. This script will up a machina with nginx. But you are able to run yarn build and make your own deploy.

---

Made with 💟 by André Zagatti 👋 Talk to me!