This is a Next.js project bootstrapped with create-next-app
.
Install the following:
- Node.JS version - 18.12.1 LTS (would recommend that you install through nvm)
- npm - 8.19.2
Frontend production deployment
- Clone this repo.
cd usc-website-hackathon-frontend
npm install
- Copy the .env file from an existing person.
npm run dev
- Go to http://localhost:3001/admin --> the 'Users' tab --> add yourself as a new user.
At this stage, if you do not want the hassle of setting up the backend locally or you only intend to focuse on the UI, you can use the shared development backend at https://dev.nusc.club/ for dev purposes. Note that https://dev.nusc.club/ points to https://167.71.198.73/ (a DigitalOcean droplet).
To use shared development backend, you do not need to do anything. The .env file's NEXT_PUBLIC_BACKEND_URL
by default points to https://dev.nusc.club/.
You should run the backend locally if you do not want your changes to the database to be reflected to others.
- Clone the backend repo
- Set it up (instructions below).
- Point the frontend .env file's
NEXT_PUBLIC_BACKEND_URL
to the appropriate localhost URL. cd <backend repo> && npm run dev
cd <backend repo> && docker-compose up
Do run the linters before pushing to the remote:
npm run linter-prettier
npm run linter-eslint
npm run linter-next
If you are working on the certain components such as the bookings or the admin pages, you may need to login to test your changes.
- Go to admin page at https://nusc.club/admin, login to Telegram.
- Go to the 'Token' tab.
- Copy the token and paste it into
NEXT_PUBLIC_BACKEND_JWT_DEV
in the.env
file. Copy your userId from the "Users" table in the DB toNEXT_PUBLIC_BACKEND_TELEGRAM_USER_ID
as well. - Do add your Telegram ID to the database manually, otherwise you will not be able to make a booking
- Google on how to get your Telegram ID.
- Go to the Users table and find the entry containing your name.
- Add your ID to the
telegramId
field.
- Set-up to set up nginx as a proxy (should be roughly similar for Mac, not sure about Windows)
- Install
mkcert
from https://github.com/FiloSottile/mkcert and generate certs for a domain. I am usingfrontend.local.dev
. (run the commands incertgen.sh
in the nginx folder) - In your hosts file, add
127.0.0.1 frontend.local.dev
- Copy the
app.conf
in theconfig/To set up Telegram Auth
folder over to/etc/nginx/conf.d
or to a path that you have included in yournginx.conf
(see the samplenginx.conf
's line 17 to see how you can include theconf.d
directory on a Mac machine - Linux should have this by default) sudo nginx -t && sudo systemctl restart nginx
for Linux,sudo nginx -t && sudo nginx -s stop && sudo nginx
for MacOS- If you have
apache
running, need to deconflict it as pgadmin uses it as well. You can change the port it uses, or change nginx's port. Otherwise, you can justsudo service apache2 stop
and not use pgadmin. - You will have to update the Tele bot's BOT_TOKEN on the backend repo to '5980011686:AAHuxodOvlPYeftZTElSpC-13ybW5to9Y1M' if you used frontend.local.dev, or you can set up your own Tele login bot or let me know if you want to use another domain.
- Change NEXT_PUBLIC_NGINX_PROXY_ON in line 9 in Auth.tsx to true!
The second method should be Docker-ised if possible, view the Archive
folder in /config/To set up Telegram Auth
.
Add your Tele handle to the Users sheet in the Excel file, and your organisations you are a member of to the userOnOrg sheet in the file. Do add yourself to an admin organisation, such as the Management Committee. Otherwise, you can manually add it yourself (steps below)
- Install pgadmin (or your own preferrend software - I just use Intellij and the CLI for this) - https://www.pgadmin.org/download/
- Launch it - the default password is 'admin'
- Right-click on "Servers" and click on "Register"
- Ensure that you have launched the docker POSTGRESDB
- Put the "name" in the "General" tab as "nusc"
- In the "Connection" tab, "Host name" is "localhost" and "port" is 5433. The password is "1234" (you can leave the username as "postgres")
- Save it! Note that to save changes to pgadmin, need to use "F6" or click on the tiny save changes button after you add your new rows.
- Login to the Telegram via this link and add yourself as a user to the "Users" table in pgadmin.
- Add yourself to an IG/organisation in the "UserOnOrg" table
$ docker-compose up
$ npm install
$ npm run prisma:migrate
$ npm run prisma:seed
$ # update env files
$ git checkout frontend
$ npm install
$ npm run prisma:reset
- Add the backend .env file - get it from an existing person using the repo.