Static Website
The static website provides a user interface (UI) for interacting with the backend service. In this project, we have created a simple Vue.js web app that allows users to login via Amazon Cognito and then makes requests to the backend REST API.
The web application is hosted in an S3 bucket created by the web app CloudFormation template. To find the website URL:
- Login to your AWS account that you deployed the project to. If you have not deployed the project, check Quick Start.
- Go to the CloudFormation console and find the stack that was created during the Quick Start.
- Click the Outputs tab, copy the WebsiteUrl output, and paste it into your browser.
You will be able to sign up a new user and then create/update/delete applications using the UI.
Security Note: The website uses http without SSL encryption (unsecure) for all requests, so you should create a unique password for testing. Do NOT use a password that you have used for other systems when testing this website.
User authentication for this application is handled by Amazon Cognito. The backend service creates a Cognito user pool, which is a user directory in Amazon Cognito. The web app's CloudFormation template creates a Cognito user pool client that the web app uses to make calls to Cognito to handle user sign up and sign in.
Native Vue.js components provided by the Amplify framework are used to render the UI for common user flows like sign in, sign up, and password reset.
The Vue.js app is built into static html, css, and javascript asset files. These assets are uploaded to an S3 bucket as part of the CloudFormation deployment using the deploy-to-s3 serverless app from the AWS Serverless Application Repository.
- The serverless app is nested into the static website template.
- The Lambda Layer generated by the app is added to a Lambda function containing the static assets to upload to the S3 bucket.
- The Lambda function is setup as the target for a CloudFormation custom resource, which invokes the Lambda function to upload the assets to the S3 bucket.
- The deploy-to-s3 app also supports string substitution, which allows us to pass references like the backend endpoint into the web app's javascript code.
The static website integration tests use Nightwatch.js to test the web app using Chrome and Firefox browsers. The integration tests are run by AWS CodeBuild as part of the CD pipeline. AWS CodeBuild runs the commands defined in buildspec-integ-test.yaml, which deploys an instance of the backend, deploys an instance of the website, and runs end-to-end tests in Chrome and Firefox. Once the tests are finished, it best-effort deletes the test stacks that were created.