Setup 2023‐2024 - Developer-DUCS/MirrorApp-2324 GitHub Wiki

Initial downloads

Node

  • Make sure you have Node installed.
    • We're using v20.9.0 I'd recommend installing the latest version, but it could cause errors due to changes between versions.

MySQL

  • You most likely already have MySQL and Workbench installed, but if you don't you'll need to install it to set up a local database used for development and to see the server-level database.

Java

  • Make sure you have Java installed.
    • We're using v21.0.1 I'd recommend installing the latest version, but it could cause errors due to changes between versions.
      • Having a version of Java that is out of date can cause problems with starting the Android version of the app.

Visual Studio Code

  • The editor that our team is using is Visual Studio Code, you don't need it to edit and run the apps, but it has almost everything that you'd need to edit and run the code.

Android Studio

  • To emulate the mobile application you'll need to have Android Studio installed.
    • You can also use your device instead of Android Studio if you own an Android by changing a few settings.

Development

This is the environment you will be using to make local changes to be pushed back to the GitHub repository.

Database

  • First, create a local connection in MySQL Workbench
  • Second, build the local database by running mirror.sql in MySQL Workbench.
  • Third, input test values by running testvalues.sql in MySQL Workbench. These files can be found in the main-backend' branch under /drury_mirror_portal/mySQL/ Your local database is now set up. You can test to make sure everything is correct by running a simple SELECT query to ensure the test values have been inputted.

Web App

  • To start the web app, you'll need to first clone the repo and begin using the main-backend branch.
  • Next you'll need to add a .env file to your "drury_mirror_portal" folder
    • The env file should look like this:
NEXTAUTH_URL=http://localhost:3000/
NEXT_PUBLIC_API_PATH=
SENDGRID_API_KEY= sendgrid api key
JWT_SECRET= the secret key
MYSQL_HOST= 127.0.0.1
MYSQL_USER= root
MYSQL_PASS=your MySQL workbench password
MYSQL_DB= du_mirror
MYSQL_PORT= 3306
MY_ENVIRONMENT=development 
* The SENDGRID_API_KEY and JWT_SECRET will be given by Dr. Sigman or Dr. Branton
* The MYSQL_PASSWORD should be changed to your root password for MySQL
  • Then, you need to open a terminal under the "drury_mirror_portal" folder and type npm install --force to install the files necessary to run the app.
  • Finally, type npm run dev in that same terminal or another terminal using that folder to start the app.

Mobile App

Initial setup

  • To start the mobile app you'll need to first clone the repo.
  • Next you'll have to change some of the files so that they can be used for development.
    • Update the capacitor.config.json file to match your laptop's IP address.
    • Make sure that in mysqldb.js line 10 points to "./mysqlconfig.json" and line 22 points to "du_mirror_dev"
    • Make sure the dictionary in mysqlconfig.json looks like this:
      "du_mirror_dev": [
          {
              "host": "127.0.0.1",
              "user": "user",
              "password": "password",
              "database": "du_mirror",
              "port": "3306"
          }
      ]
      (The user and password will be the username and password to your MySQL server with the database schema)
    • Make sure the conn variable under the getStaticPaths function in [slug].js looks like this:
      {
        "host": "127.0.0.1",
        "user": "user",
        "password": "password",
        "database": "du_mirror",
        "port": "3306"
      }
      (The user and password will be the username and password to your MySQL server with the database schema)
  • After that start your local server in MySQL workbench

Android

  • Open Android studio
    • Navigate to the device manager
    • Create a new device
      • We used a pixel 4 API 33 running Android 13.
        • You can choose a different model and version, but there may be errors.
  • Enter these three commands into a terminal that is in the project directory.
    • npm install --force
    • npm install @capacitor/android --force
  • If you're using Android Studio enter these two commands. Otherwise, you can skip this step.
    • npx cap add android
    • npx cap open Android
  • Open 3 Terminals
    • In the first, enter npm run dev
    • In the second, npx cap run android
    • In the third, make sure it is in the backend directory of the project and enter node mysqldb.js

IOS

  • Open 3 Terminals
    • In the first,
    • In the second,
    • In the third,

Production

Server

  • Navigate down the directories until you are inside the drury_mirror_portal directory
  • Check which branch you are in and update the branch if needed
  • Branch off main branch to make local changes
  • Merge into main when you are ready to pull the branch, do not include:
    • _app.js, line 57
    • index.js, line 21
    • next.config.js, line 6
    • [...nextauth].js, line 55
  • When you are ready to deploy, merge into prod-backend
  • Install dependencies
  • Run npm run build to build the project
  • Start the project using PM2 or reload the project
  • Go to your favorite browser and navigate to https://mcs.drury.edu/mirror/ to verify a successful and working build

Git commands

  • git branch - To check which branch is the current working branch as well as the branches available
  • git fetch - Fetches the current branches from GitHub to make them available
  • git pull - Will update the current branch you are in to match the most recent commit on GitHub for that branch
  • git switch <branch name> - Switch branches

Npm commands

  • npm install --force - Will install all project dependencies
  • npm run build - Will build the project to be deployed

Env file

  • The env file must be altered slightly for production
  • The env file MUST be named .env.local to work correctly
  • Notice the NEXTAUTH_URL, NEXT_PUBLIC_API_PATH, and MY_ENVIRONMENT values have changed.
NEXTAUTH_URL=https://mcs.drury.edu/mirror
NEXT_PUBLIC_API_PATH=mirror
SENDGRID_API_KEY= sendgrid api key
JWT_SECRET= the secret key
MYSQL_HOST= mcs.drury.edu
MYSQL_USER= du_mirror
MYSQL_PASS=Letmein!22
MYSQL_DB= du_mirror
MYSQL_PORT= 3306
MY_ENVIRONMENT=production 

PM2 Commands

  • pm2 status - Shows the current status of the PM2 application and all processes
  • pm2 restart <process id> - Will reload the application should you need to rebuild the project to apply any updates (fetch process id using pm2 status, usually zero)
  • pm2 start npm --name my-project -- run start - Will start the process from scratch (replace "my-project" with desired name)
  • pm2 delete <process id> - Will delete the process using its pid. Useful for keeping PM2 organized and keep the number of processes down should you have to restart the process from scratch

Next.config.js

/** @type {import('next').NextConfig} */
     const nextConfig = {
        reactStrictMode: false,
        swcMinify: true,
        //basePath: "/mirror",
        assetPrefix: "https://mcs.drury.edu/mirror/",
};

module.exports = nextConfig;

Branch Management Strategy

image

Note: best practice is to leave basePath references commented out when merging main-backend into prod-backend, then going into prod-backend branch after merge and uncommenting the references from the four files listed before deploying the prod-backend branch to the server.

⚠️ **GitHub.com Fallback** ⚠️