fix: api url env

.gitignore

@@ -4,3 +4,4 @@ stats.html
 dist
 dist-ssr
 *.local
+.env

constants.ts

@@ -1,2 +0,0 @@
-export const BACKEND_URL = 'http://localhost:3333';
-export const WS_URL = 'ws://localhost:3333';

nginx/default.conf

@@ -1,5 +1,5 @@
 server {
-  listen 80;
+  listen 5000;
   location / {
     root /usr/share/nginx/html;
     index index.html index.htm;

src/api.config.ts

@@ -1,5 +1,5 @@
 import { AxiosRequestConfig } from 'axios';
-import * as constants from '../constants';
+import * as constants from '@educt/constants';
 
 const apiConfig: AxiosRequestConfig = {
   baseURL: `${constants.BACKEND_URL}/api/`,

src/components/Forms/LessonForm/LessonForm.tsx

@@ -13,6 +13,7 @@ import {
   Flex,
   Divider,
 } from '@chakra-ui/react';
+import * as constants from '@educt/constants';
 import { Controller, UseFormReturn } from 'react-hook-form';
 import VideoUploader from '@educt/components/VideoUploader';
 import FilesUploader from '@educt/components/FilesUploader';
@@ -80,7 +81,11 @@ const LessonForm: React.FC<LessonFormPropsType> = ({
             control={control}
             name='video'
             render={({ field: { onChange, value: file } }) => (
-              <VideoUploader onChange={file => onChange(file)} file={file} preloadedVideoUrl={preloadedVideo?.url} />
+              <VideoUploader
+                onChange={file => onChange(file)}
+                file={file}
+                preloadedVideoUrl={constants.BACKEND_URL + preloadedVideo?.url}
+              />
             )}
           />
           <Text as='small' color='red.500'>

src/constants.ts

@@ -0,0 +1,2 @@
+export const BACKEND_URL = import.meta.env.VITE_API_URL || 'http://localhost:3333';
+export const WS_URL = 'ws://localhost:3333';

src/env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_URL?: string | undefined;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

src/pages/course/course.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import * as helpres from '@educt/helpers';
+import * as constants from '@educt/constants';
 import { Redirect } from 'react-router-dom';
 import { Flex, Box, Text, Heading, Button, Grid, GridItem, Divider, AvatarGroup, Avatar } from '@chakra-ui/react';
 import { MdPlayCircleOutline } from 'react-icons/md';
@@ -83,7 +84,10 @@ const CoursePage: React.FC<IPageProps> = () => {
                   </Button>
                 </Box>
               </Flex>
-              <CourseBackgroundImage bg={course.color?.hex} src={course.image?.url} />
+              <CourseBackgroundImage
+                bg={course.color?.hex}
+                src={course.image ? `${constants.BACKEND_URL + course.image.url}` : undefined}
+              />
             </Box>
             <Box mt='4'>
               <Tabs>

src/pages/courses/components/CourseList/CourseItem.tsx

@@ -7,6 +7,7 @@ import { Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/menu';
 import { MdMoreHoriz, MdGroup, MdThumbUp, MdVideoLibrary } from 'react-icons/md';
 import { AiOutlineEye, AiOutlineEyeInvisible } from 'react-icons/ai';
 import { DeleteIcon, EditIcon } from '@chakra-ui/icons';
+import * as constants from '@educt/constants';
 
 /**
  * Types
@@ -128,7 +129,7 @@ const CourseItem: React.FC<CourseItemPropsType> = ({ course, onDelete, onSetStat
               w='100%'
               borderTopLeftRadius='lg'
               borderTopRightRadius='lg'
-              src={course.image.url}
+              src={course.image ? `${constants.BACKEND_URL + course.image.url}` : undefined}
             />
           )}
         </Box>

src/pages/lesson/lesson.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import moment from 'moment';
+import * as constants from '@educt/constants';
 import * as helpres from '@educt/helpers';
 import { Link as ReactRouterLink, Redirect } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
@@ -153,7 +154,7 @@ const LessonPage: React.FC<IPageProps> = () => {
           <GridItem>
             <Box>
               {lesson.video ? (
-                <ReactPlayer width={'100%'} height={'100%'} controls url={lesson.video?.url} />
+                <ReactPlayer width={'100%'} height={'100%'} controls url={constants.BACKEND_URL + lesson.video.url} />
               ) : (
                 <Flex h='500px' justifyContent={'center'} alignItems={'center'}>
                   <Text color='gray.500' userSelect={'none'}>

src/providers/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState, ReactNode } from 'react';
-import * as constants from '../../constants';
+import * as constants from '@educt/constants';
 import {
   ChangeEmailPageContext,
   CoursesPageContext,

vite.config.ts

@@ -1,5 +1,4 @@
 import { defineConfig } from 'vite';
-import * as constants from './constants';
 import path from 'path';
 import react from '@vitejs/plugin-react';
 import { visualizer } from 'rollup-plugin-visualizer';
@@ -21,20 +20,6 @@ export default defineConfig({
   plugins: [react()],
   server: {
     port: 5000,
-    proxy: {
-      '/api': {
-        target: constants.BACKEND_URL,
-        changeOrigin: true,
-      },
-      '/uploads': {
-        target: constants.BACKEND_URL,
-        changeOrigin: true,
-      },
-      '/video': {
-        target: constants.BACKEND_URL,
-        changeOrigin: true,
-      },
-    },
   },
   resolve: {
     alias: [{ find: '@educt', replacement: path.resolve(__dirname, 'src') }],