# Frontend Documentation ## Frontend Code | App | Repo | Production Branch | Staging Branch | Development Branch | | ------ | -------------------------------------------------------------- | ----------------- | -------------- | ------------------ | | Angular | [link](https://bitbucket.org/vista-rooms/vista_angular_combined/src/production/) | production | stage | dev | | NextJS | [link](https://bitbucket.org/vista-rooms/vista-ui-2/src/main/) | main | staging | dev | --- ### NextJS Application #### Development/Version Control Process ![](https://i.imgur.com/rlgPkEe.png) #### Deployment ##### Development Environments We use AWS Amplify to generate previews for the development environment. Everytime someone creates a pull request into the dev branch, a new preview link is created where the updates can be tested. You can see a list of all the previews [here](https://ap-south-1.console.aws.amazon.com/amplify/home?region=ap-south-1#/d3tuwddga42qtw/settings/previews) Previews have the following URL format - `https://pr-<PR-NUMBER>.d3tuwddga42qtw.amplifyapp.com/` >You can find the PR-NUMBER from the Bitbucket GUI after creating the PR ![](https://i.imgur.com/ILbuFhO.png) > in the above image, the PR-NUMBER is 378. Once code is merged into the dev branch, the environment is destroyed. ##### Staging and Production Environments Our staging and production versions are hosted on standalone EC2 instances using docker. We deploy two docker containers 1. **nginx** - used to manage the SSL certificates, proxies and prerender configs 2. **nextjs** - dockerized version of the nextjs application in the vista-ui-2 project. This container is only exposed to the nginx instance. ###### Deployment Environment Variables Configuration The environment variables are configured in the BitBucket Repository [here](https://bitbucket.org/vista-rooms/vista-ui-2/admin/addon/admin/pipelines/repository-variables). These variables are used by the `bitbucket-pipeline.yml` during deployments. ###### Runtime environment variables The runtime environment variables are currently stored in code [here](https://bitbucket.org/vista-rooms/vista-ui-2/src/main/envs/). These are used by the NextJS application while running. ###### Automated Deployments The staging and production (main) branches are deployed using Bitbucket pipelines. The overall process is as follows - 1. Code is merged into the staging/production branch 2. Bitbucket pipeline runs on the staging/production branch 1. We create two new images in the Elastic Container Registry (ECR). One for nginx and the other for nextjs with the `latest` tag 2. We run a script on the staging EC2 instance to pull the updated images and replace the current images that are live with the latest ones The process is defined in the [bitbucket-pipelines.yml](https://bitbucket.org/vista-rooms/vista-ui-2/src/main/bitbucket-pipelines.yml) in the root of the project. ###### Elastic Container Registry The docker images that are built during the deployment phase are stored in [Amazon Elastic Container Registry (ECR)](https://ap-south-1.console.aws.amazon.com/ecr/repositories?region=ap-south-1). ###### Manual Deployments Use the steps below to manually trigger the pipeline for either staging and production - 1. Go to the [pipelines](https://bitbucket.org/vista-rooms/vista-ui-2/pipelines/results/page/1) page for the `vista-ui-2` project 2. Hit the run pipeline button in the top right ![](https://i.imgur.com/6tHUhEC.png) 3. Select either `staging` or `main` as your Branch (other branches are deployed using AWS Amplify). Also ensure that the pipeline you select corresponds to your branch. ![](https://i.imgur.com/UE0GHGY.png) 4. Monitor the deployment process here. It should take about 5-6 minutes. ![](https://i.imgur.com/j4poKGy.png) ##### Notes 1. Sometimes the content doesn't get updated as expected even though the content has been published properly in the CMS. This could be because of a stale cache not getting updated during the build process. This can be rectified by clearing the build cache by using the button below. You can clear the next and node caches safely ![](https://i.imgur.com/zFlhUWi.png) --- ### Angular Application #### Development/Version Control Process The process is the same as that for the [NextJS application](#DevelopmentVersion-Control-Process), except that in step 4 and 5 we use "SQUASH AND MERGE" instead of fast-forward #### Development, Staging and Production Environments ##### Development We use AWS Amplify to generate previews for the development environment. Everytime someone creates a pull request into the dev branch, a new preview link is created where the updates can be tested. You can see a list of all the previews [here](https://ap-south-1.console.aws.amazon.com/amplify/home?region=ap-south-1#/d2kr30p0zkedhw/settings/previews) Previews have the following URL format - `https://pr-<PR-NUMBER>.d2kr30p0zkedhw.amplifyapp.com/` You can find the PR-NUMBER from the Bitbucket GUI after creating the PR ![](https://i.imgur.com/ILbuFhO.png) > in the above image, the PR-NUMBER is 378. Once code is merged into the dev branch, the environment is destroyed. ##### Staging The link to the `stage` branch version is [here](https://stage.d2kr30p0zkedhw.amplifyapp.com) Everytime we merge or push code to the `stage` branch, this link is updated ##### Production The link to the `production` branch version is [here](https://production.d2kr30p0zkedhw.amplifyapp.com) Everytime we merge or push code to the `production` branch, this link is updated. --- ### Routing/Navigation Currently, our UI is split between the NextJS, Angular and some no/low code pages hosted on WordPress and Unbounce. NextJS contains all the pages that have been redesigned as per the new branding guidelines and supports the following pages - 1. landing page (https://www.stayvista.com) 2. all destinations page (https://www.stayvista.com/destinations) 3. collection pages (https://www.stayvista.com/collections/new-featured-properties) The blog is hosted using WordPress. This routing is managed at the nginx level using this [config](https://bitbucket.org/vista-rooms/vista-ui-2/src/main/nginx/prod.conf) 1. Blog (https://www.stayvista.com/blog) There are a few pages that are hosted on unbounce or similar low-code services. These are configured in NextJs [here](https://bitbucket.org/vista-rooms/vista-ui-2/src/main/next.config.js) 1. Offers (https://www.stayvista.com/offers) 2. Plan an offsite (https://www.stayvista.com/plan-an-offsite) 3. Guest Query Form (https://www.stayvista.com/guest-query-form) All other pages are redirected to the Angular application using the NextJS config [here](https://bitbucket.org/vista-rooms/vista-ui-2/src/main/next.config.js) The diagram below explains the routing at a high level ![](https://i.imgur.com/QSLbsLN.png) ## Checkly ### Dashboard ### Adding checks ## Prismic ### Previewing content ### Publishing content ### Deploying content (making content live)