Merge pull request #247 from NIAEFEUP/develop

Release refactor changes to main

.env.example

@@ -1,6 +1,8 @@
-REACT_APP_PROD=0
-REACT_APP_RELEASE_DATE=2023-01-27
+VITE_APP_PROD=0
+VITE_APP_RELEASE_DATE=2023-01-27
 PORT=3100
-REACT_APP_SEMESTER=
-REACT_APP_SITE_TITLE=
-REACT_APP_BACKEND_URL=
+VITE_APP_PLAUSIBLE_DOMAIN=
+VITE_APP_PLAUSIBLE_HOST=
+VITE_APP_SEMESTER=
+VITE_APP_SITE_TITLE=
+VITE_APP_BACKEND_URL=

.github/workflows/deploy.yaml

@@ -0,0 +1,16 @@
+on:
+  push:
+    branches: [develop]
+jobs:
+  deploy:
+    name: "Deploy to netlify"
+    runs-on: ubuntu-latest
+    steps:
+      - name: Wait for the Netlify Preview
+        uses: kamranayub/[email protected]
+        id: waitForNetlify
+        with:
+          site_name: 'tts-fe-preview'
+          max_timeout: 300 # 5 minutes
+        env:
+          NETLIFY_TOKEN: ${{ secrets.NETLIFY_TOKEN }}	

.github/workflows/niployments.yaml

@@ -0,0 +1,25 @@
+name: Deploy
+
+on:
+  push:
+    branches:
+      - main
+      - develop
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Upload to NIployments register
+      uses: NIAEFEUP/[email protected]
+      with:
+        docker_dockerfile: Dockerfile
+        docker_context: .
+        docker_target: prod
+        docker_build_args: |
+          TTS_FE_VARS_METHOD=content-var
+          TTS_FE_VARS_CONTENT=${{ secrets.TTS_FE_VARS_CONTENT }}
+        NIPLOYMENTS_REGISTRY_URL: ${{ vars.NIPLOYMENTS_REGISTRY_URL }}
+        NIPLOYMENTS_REGISTRY_USERNAME: ${{ vars.NIPLOYMENTS_REGISTRY_USERNAME }}
+        NIPLOYMENTS_REGISTRY_PASSWORD: ${{ secrets.NIPLOYMENTS_REGISTRY_PASSWORD }}

.gitignore

@@ -14,9 +14,11 @@
 # misc
 .DS_Store
 .env
+.env.production
+.vscode/
+
+dist/
 
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-
-.github/workflows/github-actions.yaml

Dockerfile

@@ -1,4 +1,7 @@
-FROM node:16-alpine3.12
+ARG TTS_FE_VARS_METHOD=dotenv
+
+# build
+FROM node:21-alpine3.19 AS build
 
 RUN mkdir -p /usr/src/tts-fe
 WORKDIR /usr/src/tts-fe
@@ -7,12 +10,40 @@ COPY .*rc ./
 COPY *.json ./
 COPY .prettier* ./
 COPY *.config.js ./
+COPY *.config.ts ./
 
-RUN npm install -g nodemon 
 RUN npm install
 
 COPY public/ public/
 COPY src/ src/
+COPY index.html ./
+
+# dev
+FROM build AS dev
 
 EXPOSE $PORT
-CMD ["nodemon", "start"]
+
+CMD ["npm", "run", "dev"]
+
+# prod-build-with-dotenv
+FROM build AS prod-build-with-dotenv
+
+ARG TTS_FE_DOTENV_FILE=.env.production
+COPY ${TTS_DOTENV_FILE} .env.production
+
+# prod-build-with-var
+FROM build AS prod-build-with-content-var
+
+ARG TTS_FE_VARS_CONTENT
+RUN echo "${TTS_FE_VARS_CONTENT}" | base64 -d > .env.production
+
+# prod-build
+FROM prod-build-with-${TTS_FE_VARS_METHOD} AS prod-build
+RUN npm run build
+
+# prod
+FROM nginx:alpine AS prod
+
+COPY --from=prod-build /usr/src/tts-fe/build /usr/share/nginx/html
+COPY nginx.tts.conf /etc/nginx/conf.d/default.conf
+

README.md

@@ -1,13 +1,22 @@
 <p align="center"> 
-  <h3 align="center"> TTS frontend </h3> 
-  <p align="center"> Ordinary movie list rating built with react and bootstrap </p> 
+  <h3 align="center"> TimeTableScheduler - Frontend </h3> 
+  <p align="center"> A platform where students can experiment with the possible combination of schedule options they can pick at the start of the semester  </p> 
   <p align="center"> 
     <a href="https://reactjs.org/"> 
-      <img src="https://img.shields.io/badge/react-v17.0.1-inactive&?style=for-the-badge&logo=react" alt="frontend-dev-react">
+      <img src="https://img.shields.io/badge/react-v18.2-inactive&?style=for-the-badge&logo=react" alt="frontend-dev-react">
     </a> 
     <a href="https://nodejs.com/"> 
-      <img src="https://img.shields.io/badge/nodejs-v16-red&?style=for-the-badge&logo=node.js" alt="nodejs"> 
+      <img src="https://img.shields.io/badge/nodejs-v21-red&?style=for-the-badge&logo=node.js" alt="nodejs"> 
     </a> 
+    <a href="https://tailwindcss.com"> 
+      <img src="https://img.shields.io/badge/tailwindcss-v3.4.1-red&?style=for-the-badge&logo=tailwindcss" alt="tailwindcss"> 
+    </a>
+    <a href="https://vitejs.dev"> 
+      <img src="https://img.shields.io/badge/vite-v4.3.1-red&?style=for-the-badge&logo=vite" alt="vite"> 
+    </a>
+    <a href="https://ui.shadcn.com/"> 
+      <img src="https://img.shields.io/badge/shadcn/ui--red&?style=for-the-badge&logo=shadcnui" alt="vite"> 
+    </a>
   </p>
 </p>
 
@@ -16,31 +25,138 @@ 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:
 
 ```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
+```

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

dev.sh

@@ -0,0 +1,4 @@
+#!/bin/bash
+set -e # abort script if any command fails
+
+docker compose up $1 tts-frontend

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

public/index.html → index.html

@@ -2,11 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#b33636" />
     <meta name="description" content="NIAEFEUP | TimeTableScheduler" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
 
     <!-- Fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -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"
     />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
+    <link rel="manifest" href="/manifest.json" />
     <title>NIAEFEUP | TimeTableScheduler</title>
   </head>
 
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+
+	  <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>

netlify.toml

@@ -0,0 +1,4 @@
+[[redirects]]
+from = "/*"
+to = "/index.html"
+status = 200