+ 
- 
+ 
+
+ 
+
+
+ 
+
+
+ 
+
-
Ordinary movie list rating built with react and bootstrap
+A platform where students can experiment with the possible combination of schedule options they can pick at the start of the semester
@@ -16,25 +25,112 @@ Made with :heart: by NIAEFEUP. # Installation -## Dependencies +In order to run this project, you need to have [Docker](https://www.docker.com/). -To run this project you must have installed: +# Brief explanation of used vite commands -- [`docker`](https://www.docker.com/) -- [`docker compose`](https://www.docker.com/) +## `npm run dev` -## How to run +This is the command that should be used if you do not want to use docker and want to run a development server. + +Before running this you should have previously ran `npm install`. + +## `npm run build` + +It builds the react application by generating static files that would be a lot like what a website would look like if no frameworks were used. + +It greatly minifies the files and reduces the number of them, making a way better experience for the user. + +Before running this you should have previously ran `npm install`. + +## `npm run preview` + +This allows us to preview what the production build will look like but `Vite` does not recommend at all using this in the production image at all. + +# Running the project + +In local development, after you run the project you can access it at `localhost:3100/tts`. If you just go to `localhost:3100/` you will be greeted by a blank screen. + +## Docker + +This is the recommended approach since it uniformizes the way the application behaves since the developers do not have the same computer hardware nor the same operating system. + +### Development + +Firstly, you have to create an `.env` file in order for the app to receive environment variables. + +```bash +cp .env.example .env +``` + +Then, to build the application run: + +```bash +./build.sh dev + +``` +Or directly with `Docker` (although `build.sh` also uses docker) + +```bash +docker compose build tts-frontend +``` + +After build, run to execute: + +```bash +./dev.sh +``` + +If the script is not able to be executed you may have to change its permissions in order for you to have execution permission (`x`). + +```bash +chmod u+x ./dev.sh +``` + +To stop the container: + +```bash +docker-compose down +``` + +After executing the application, open your browser at: `localhost:3100` + +### Production + +In order to run the production build, we need to use the `tts-frontend-prod` container instead of the `tts-frontend` one. + +In the production build we are serving a static page with minified html, css and javascript files, greatly reducing the load of the page. + +Firstly, you have to create an `.env` file in order for the app to receive environment variables. + +```bash +cp .env.example .env +``` + +Internally, when the production build runs with vite, it creates an `.env.production` file from the `.env` file to be used by the `vite build` command. This was done to ease the development process, since running `./dev.sh` complained that the `.env.production` was not found. To build the application run: ```bash -docker-compose build +./build.sh prod +``` + +Or directly with `Docker` (although `build.sh` also uses docker) + +```bash +docker compose build tts-frontend-prod ``` After build, run to execute: ```bash -docker-compose up +./prod.sh +``` + +If the script is not able to be executed you may have to change its permissions in order for you to have execution permission (`x`). + +```bash +chmod u+x ./prod.sh ``` To stop the container: @@ -42,5 +138,25 @@ To stop the container: ```bash docker-compose down ``` +## Baremetal with `npm` + + +```bash +npm install +npm run dev +``` -After executing the application, open your browser at: `localhost:3000` +In case you have problems with this commands you may run + +```bash +rm -rf node_modules +rm package-lock.json +``` + +And then try the previous commands (`npm install` and `npm run dev` again). + +In case you want to preview the production build you can run + +```bash +npm run preview +``` diff --git a/build.sh b/build.sh new file mode 100755 index 00000000..fc15e986 --- /dev/null +++ b/build.sh @@ -0,0 +1,10 @@ +#!/bin/bash + +case "$1" in +"dev") + docker compose build tts-frontend $2 + ;; +"prod") + docker compose build tts-frontend-prod $2 + ;; +esac diff --git a/dev.sh b/dev.sh new file mode 100755 index 00000000..35e7fa2e --- /dev/null +++ b/dev.sh @@ -0,0 +1,4 @@ +#!/bin/bash +set -e # abort script if any command fails + +docker compose up $1 tts-frontend diff --git a/docker-compose.yaml b/docker-compose.yaml index 0db4489b..f7304b1a 100644 --- a/docker-compose.yaml +++ b/docker-compose.yaml @@ -1,14 +1,27 @@ -version: '3' services: tts-frontend: container_name: tts_frontend build: context: . + target: dev volumes: - ./src:/usr/src/tts-fe/src - ./public:/usr/src/tts-fe/public ports: - - 3100:3000 + - 3100:3100 env_file: - .env + tts-frontend-prod: + container_name: tts_frontend_prod + build: + context: . + target: prod + args: + - TTS_FE_VARS_METHOD=dotenv + - TTS_FE_DOTENV_FILE=.env + volumes: + - ./src:/usr/src/tts-fe/src + - ./public:/usr/src/tts-fe/public + ports: + - 3100:80 diff --git a/public/index.html b/index.html similarity index 81% rename from public/index.html rename to index.html index b91a97c9..1e2ed58c 100644 --- a/public/index.html +++ b/index.html @@ -2,11 +2,11 @@ - + - + @@ -19,12 +19,15 @@ href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet" /> - + +