The finance-tracker-frontend from salismt

finance-tracker-frontend's Introduction

About

This is a financial tracker website made with simple HTML, CSS, and Javascript connecting to Node.js Backend. It's a SPA (Single Page Application), since it's running on barebone html and plain js, it won't have same feature like modern framework such as React / Vue. For example, if you do manually type the url and load it will return not found. All the redirection is need to be done by interraction with the content.

How to run this locally

This have config.js that manage the environment variable, so we can switch between environment /js/config.js
if you want to use local data (other than the sign in & sign up), just change the value of NODE_ENV to something else then development
make sure port 8080 & 3000 are available
make sure to run the backend, otherwise you won't be able to sign in (instruction in backend Readme.md)
then run npm run start it will automatically open browser

How to run against backend on cloud

you just need to change the API_URL the same as production one

API_URL: https://finance-tracker-backend-zbxuhg7gpq-as.a.run.app

This website is hosted in github pages under this domain

FRONTEND_URL: https://salismt.github.io/finance-tracker-frontend

How to develop

make sure to commit and push your code in the main branch

git add -- .
git commit -m "add feature"
git push origin main

then build the dist build, this will create the distribution files

npm run predeploy

upload this to github-pages

npm run deploy

How to deploy

Commit the changes

git add -- .
git commit -m "commit"

Then build the image

npm run build
gcloud builds submit --tag gcr.io/edinburgh-finance-tracker/finance-tracker-frontend .

Run the deployment

gcloud run deploy finance-tracker-frontend \
    --image gcr.io/edinburgh-finance-tracker/finance-tracker-frontend \
    --platform managed \
    --allow-unauthenticated

Then select asia-southeast1 when the prompt comes

Recommend Projects