# Alley-HSBC-Frontend


## Build docker image from docker file
1. cd into the root of this repository.
2. On Windows
   * run `docker build --tag <image-name> .`

   On Linux
   * run `DOCKER_BUILDKIT=1 docker build --tag <image-name> .`

   Where `<image-name>` is the name you give to the image.
## Deploy in docker (docker-compose)
1. Deploy using [docker-compose](/docker/docker-compose.yml).
2. Make sure both docker and docker-compose are installed.
3. If you pull image teamalley/digital-walkaround from dockerhub
   * You need to first login to dockerhub by running `docker login` command. The Username and LoginToken are provided under files in docker directory

   If you built your own image
   * Please Replace the image name in "docker-compose.yml" with `<image-name>`

4. cd into the direct where you store the "docker-compose.yml" file.
5. * run `docker-compose up -d` to start the service.
   * run `docker-compose down` to stop the service
6. You can access it on port 3000 by default. To change the port number, edit docker-compose.yml. Under ports, replace `3000:3000` with `<the port number you want>:3000`. Then stop the service and start it again.
7. Node: you may exprience issues running the container in machines with limited ram. If the container restarts unexpectedly, try running `docker-compose up` without `-d` option to show the error messages.
   
## Deploy directly on a Server
If You prefer installing it directly or you are expriencing some issues with the docker container.
Follow the instructions bellow.

1. Make sure you have a server with node v16.14.0 and npm 8.3.1 installed (other versions may work but not guaranteed). A linux machine with `screen` installed is recommended.
2. clone the repository and `cd` into the root folder of the repository.
3. If you are installing it on a linux machine with `screen` installed, run `screen -S <name>` to create a new screen. where `<name>` can be any name you choose.
4. run `npm run start-prod`
5. if you followed step 3, press `CTRL ^A` then press `D` while holding `CTRL ^A`. The screen will detach.
6. You can then access it on port 3000

## Setup Reverse Proxy
You can use Apache, Ngnix or other tools to set up a reverse proxy and connect it to a hostname. [here](https://httpd.apache.org/docs/2.4/howto/reverse_proxy.html) is a guide on apache reverse proxy setup.

## Enable HTTPS
You might want to enable https to secure your webapp since it includes private information (such as your username and password). [here](https://www.digitalocean.com/community/tutorials/how-to-secure-apache-with-let-s-encrypt-on-ubuntu-20-04) is a guide on enabling https with Let's Entrypt on a Ubuntu server with apache.