Introduction
In the previous blog, I covered the backend configuration for the Serverless Fileserver solution. In this blog, we will continue on, to deploy the frontend.
If you haven’t read my previous blog, I would recommend that you do so before continuing. The blog is available at https://nivleshc.wordpress.com/2022/07/10/create-a-serverless-fileserver-using-amazon-efs-amazon-api-gateway-amazon-cognito-and-aws-lambda-the-backend/
How it will look
Just as a teaser, below is a screenshot of how the Serverless FileServer frontend will look. I have kept the design clean and simple.
Implementation
This blog assumes that the backend already exists. If it doesn’t, please deploy it using the instructions outlined in https://nivleshc.wordpress.com/2022/07/10/create-a-serverless-fileserver-using-amazon-efs-amazon-api-gateway-amazon-cognito-and-aws-lambda-the-backend/ before continuing.
There are quite a few tasks that need to be done to deploy the frontend, so lets get started.
- Download the latest updates from my GitHub repo. To do this, change into the folder where you had previously cloned the repository and then run the following commands.
cd blog-serverless-fileservergit pull
Note:
For those that have an existing backend (that wasn’t created recently), I have released a few updates since when I first posted the previous blog. Please use the instructions below to update your deployment before continuing.
cd blog-serverless-fileserver/backend
make update
2. Install npm using brew (or any other installer that you are comfortable with)
brew install npm
3. Install the AWS Amplify CLI using the following command.
npm install -g @aws-amplify/cli
4. Make sure you are in the blog-serverless-fileserver root folder. Run the following command to create the React JS AWS Amplify application.
npx create-react-app frontend
This will create a folder called frontend with all the code for an AWS Amplify application.
5. Next, use the following command to initialise the AWS Amplify application.
cd frontend
amplify init
At the prompt, answer the questions as per below.
a. Enter a name for the project (frontend) Type ServerlessFileServer and press enter
b. Initialize the project with the above configuration? (Y/n) Press Enter (this accepts the default Yes)
c. Select the authentication method you want to use: Assuming you have already setup some AWS profiles on your local computer, use the arrow keys to select AWS profile and then press Enter.
d. At the next prompt, use the arrow keys to select the AWS profile that AWS Amplify CLI will use to access your AWS Account and then press Enter.
e. AWS Amplify CLI will now start provisioning your AWS Account with an AWS Amplify application. You will see a similar output to below.
f. Once the setup is finished, you should see an output similar to below.
g. You might recall that as part of the previous blog, an Amazon Cognito User Pool had been created. Next, we will import this into the AWS Amplify application. The AWS Amplify application will use it for authentication. To do this, type the following command.
amplify import auth
At the prompt What type of auth resource do you want to import? use the arrow keys to select Cognito User Pool only and then press Enter.
Next, all the Amazon Cognito User Pools that currently exist in your AWS Account will be displayed. Use the arrow keys to choose the one that was created as part of the backend deployment and press Enter.
If you are unsure, open the AWS CloudFormation stack that was created by AWS SAM when the backend was deployed. In the Resources tab, look for CognitoUserPoolDomain. I have also updated the backend code to show this as part of the Outputs. So, if you update your backend or deploy the backend with the latest code, it will be shown both in the AWS SAM outputs and in the AWS CloudFormation Outputs tab.
h. If everything went as planned, you would see a message saying that the Cognito User pool was successfully imported.
i. Next, check the status of your AWS Amplify deployment by using the following command.
amplify status
You should see an output similar to below. It will show that when you push the changes to your AWS environment, Auth will be imported into your AWS Amplify application via the awscloudformation plugin.
j. To push the changes to your AWS Account run the following command.
amplify push
At the prompt Are you sure you want to continue? (Y/n)? press Enter to accept the default Yes.
k. I found that after importing Auth, I could readily use Amazon Cognito Signin and Signout screens in my AWS Amplify application, however the UI looked broken. Below is a screenshot of what it looked like.
The fix for the UI is to install the AWS Amplify React JS UI components using yarn. Run the following steps to do this.
Install yarn using brew (or using any other installation tool)
brew install yarn
Make sure you are in the frontend folder. Run the following command to install the additional UI components.
yarn add aws-amplify @aws-amplify/ui-react
Once done, the Amazon Cognito Sigin and SignOut screens will look much better (screenshot below). Now, isn’t that a massive difference!
l. Next, copy the following files from the cloned GitHub repository to your frontend folder at the specified locations
- copy extrafiles/frontend-files/src/App.js to frontend/src/. Replace the App.js file that already exists in the destination folder.
- copy extrafiles/frontend-files/public/disklogo.ico to frontend/public.
- copy extrafiles/frontend-files/public/index.html to frontend/public/. Replace the index.html file that already exists in the destination folder.
m. Open the file frontend/src/App.js using your favourite text editor. Update the constant apiEndpoint (line 19) with the Amazon API Gateway URL that corresponds to your backend deployment. This would have been part of the AWS SAM output when you deployed your backend. You can also get it by opening the AWS CloudFormation stack that AWS SAM created and then in the Outputs tab, look for APIGatewayURL.
n. Next, we need to add a hosting solution for the AWS Amplify application. Run the following command.
amplify add hosting
Use the arrow keys to choose Hosting with Amplify Console (Managed hosting with custom domains. Continuous deployment) and press Enter.
At the next prompt, choose Manual deployment and press Enter.
o. With all the hard work done, we can now publish all the changes to the AWS Account. Use the following commands to do that.
amplify publish
At the prompt Are you sure you want to continue? (Y/n) press Enter to accept the default Yes.
Wait for the publishing to complete. Once this has finished successfully, the last line of the output will display the URL corresponding to your hosted AWS Amplify application’s website. Note this down as it will be required in the next few steps.
The URL will have the format https://<environment>.<random-digits>.amplifyapp.com.
p. Next, we need to make some changes to the backend.
Open frontend/Makefile in your favourite text editor and update the AMPLIFY_PORTAL_URL variable with your AWS Amplify website’s URL that you noted above.
Once done, to deploy the updates to your backend, change directory to the backend folder and then run the following command.
make update
q. The Amazon Cognito User Pool also needs to be updated. Login to your AWS Management Console and open the Amazon Cognito Portal. Click Manage User Pools and then click on the User Pool that was created as part of the backend.
Once the User Pool is open, in the left-hand side menu, under General settings click on Message customisations. Then in the right-hand side screen, under Do you want to customize your user invitation messages? do the following changes.
Email Subject – change this to Welcome to Serverless FileServer
Open the file cognito_customisations.html that is located in the folder extrafiles in your favourite text editor. Replace https://serverlessfileserver.amplifyapp.com with the URL of your AWS Amplify applications website URL, which you had noted down above.
Return to the Amazon Cognito Portal. In the text box under Email message, paste the updated contents of the file cognito_customisations.html.
Click Save changes.
r. Next, follow the instructions below to create your first Amazon Cognito user. This will be used to access the Serverless FileServer portal.
While still in the Amazon Cognito User Pool portal, in the left hand side menu, under General settings click on Users and groups. Then in the right hand side screen, under Users click Create user. We
- Enter your email address under Username (Required).
- Ensure Send an invitation to this new user? is ticked and tick Email
- Leave the Temporary password blank. Amazon Cognito will generate a random password.
- For now, leave the Phone Number blank and untick Mark phone number as verified.
- Under Email, enter your email address. You can tick Mark email as verified?
- Click Create user.
- Check your email inbox for a verification email from Amazon Cognito. It will be sent from no-reply@verificationemail.com. If you don’t see it in your inbox, check your spam folder.
- Open the email, it should contain the same message as you had entered in the Message customizations section above, with the anchor variables filled in. It will look similar to the screenshot below.
9. Note down the username and password that the email contains. Then click the Portal URL link
10. Your AWS Amplify application’s webpage should open with a username password screen, similar to below.
Enter the username and password that was in the verification email. Note that you will be asked to change the password on first login.
You should now be logged into the Serverless FileServer portal. This is a fresh install, so there won’t be any files or folders.
The Interface
To access the Serverless FileServer Portal, use the AWS Amplify application’s website URL that you had previously noted down. The URL is also included in the verification email that Amazon Cognito sends when a new account is created.
Let me give you a quick tour of the user interface.
Explanations for each of the elements referred to by a number in the screenshot above is listed below.
1 – this shows the current folder path. As you traverse the folders, this will be automatically updated. When you are not in the root folder (denoted by a slash / ), a Back button will also be visible, to enable you to climb up the folder hierarchy.
2 – use this button to create new folders. When you click it, you will be asked to provide the name for the new folder to create. On confirmation, this folder will be created in the backend and the screen refreshed to show the new folder.
3 – use this button to upload new files from your local computer. Before you can upload, you will need to choose a file (button pointed by 4). If you haven’t chosen a file, an error message will be displayed, asking you to do so.
4 – use this button to choose the file to upload. Do this before clicking button 3 to upload. The name of the currently chosen file is displayed beside this button (showing as No file chosen in the screenshot above)
5 – this shows the username of the currently logged in user.
6 – click this to log out of the Serverless FileServer portal.
The main area of the screen shows the files and folders, as they exist in the backend. The folders are shown with a blue folder icon in front of their names. Along with the names, the sizes and owner details are also displayed.
Something to note
As the Serverless FileServer uses Amazon API Gateway, one of the limitations is that the payload cannot be more than 10 MB. This means that the maximum size of the file that can be uploaded/downloaded to/from the Serverless FileServer is 10MB. Point to note here is that Amazon EFS still allows files of sizes more than 10MB.
A possible workaround is to use Amazon Simple Storage Service (S3) as an intermediary storage location when dealing with such large files.
Once you are finished with the Serverless FileServer, do not forget to delete both the frontend and the backend, to save on unnecessary costs.
To delete the frontend, use the following command from within the frontend folder.
amplify delete
After the frontend has been deleted, use the following command from within the backend folder to delete the backend.
make delete
The above command deletes the AWS CloudFormation stack that AWS SAM provisioned. You will need to monitor its progress using the AWS CloudFormation portal.
I hope you found this solution interesting and useful.
Till the next time, stay safe!
Nivlesh's Blog 
You must be logged in to post a comment.