Setup 2023‐2024 - Developer-DUCS/MirrorApp-2324 GitHub Wiki
- 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.
- 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.
- 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.
- We're using v21.0.1 I'd recommend installing the latest version, but it could cause errors due to changes between versions.
- 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.
- 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.
This is the environment you will be using to make local changes to be pushed back to the GitHub repository.
- First, create a local connection in MySQL Workbench
- Second, build the local database by running
mirror.sqlin MySQL Workbench. - Third, input test values by running
testvalues.sqlin 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 simpleSELECTquery to ensure the test values have been inputted.
- To start the web app, you'll need to first clone the repo and begin using the
main-backendbranch. - 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 --forceto install the files necessary to run the app. - Finally, type
npm run devin that same terminal or another terminal using that folder to start the app.
- 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:
(The user and password will be the username and password to your MySQL server with the database schema)
"du_mirror_dev": [ { "host": "127.0.0.1", "user": "user", "password": "password", "database": "du_mirror", "port": "3306" } ] - Make sure the conn variable under the getStaticPaths function in [slug].js looks like this:
(The user and password will be the username and password to your MySQL server with the database schema)
{ "host": "127.0.0.1", "user": "user", "password": "password", "database": "du_mirror", "port": "3306" }
- After that start your local server in MySQL workbench
- 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.
- We used a pixel 4 API 33 running Android 13.
- Enter these three commands into a terminal that is in the project directory.
npm install --forcenpm install @capacitor/android --force
- If you're using Android Studio enter these two commands. Otherwise, you can skip this step.
npx cap add androidnpx 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
- In the first, enter
- Open 3 Terminals
- In the first,
- In the second,
- In the third,
- 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 buildto 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 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 install --force- Will install all project dependencies -
npm run build- Will build the project to be deployed
- The env file must be altered slightly for production
- The env file MUST be named
.env.localto 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 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
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: false,
swcMinify: true,
//basePath: "/mirror",
assetPrefix: "https://mcs.drury.edu/mirror/",
};
module.exports = nextConfig;
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.