Agora que temos esse .env no back, poderemos também criar aqui no front a nossa base de conexão, colocando o api.ts

Vamos começar importando o axios pois ele será a base para conexão.

import axios from "axios";

Vamos em seguida criar a baseUrl, que será a mesma url que colocamos em “APP_URL” lá no backend

import axios from "axios";

const baseURL = "<http://192.168.0.8:3001>";

E aí nós vamos criar a api com o axios e colocar também os status válidos do nosso backend, que serão necessários depois para verificação de erros e coisas do tipo

import axios from "axios";

const baseURL = "<http://192.168.0.8:3001>";

const api = axios.create({
  baseURL,
  validateStatus: (status) => status >= 200 && status < 500,
});

export default api;

Ao fazermos isso, já teremos a base de conexão para o nosso app. E iremos poder conectar tranquilamente os nossos serviços com o backend.