Chapter 7: Single-Page Application Deployment

In the previous chapter, we discussed software testing and how to write a test and apply it during the development process to prevent errors and improve the software quality.

The last step in the software development life cycle is deploying the application to online services. In this chapter, we'll create a simple mock server as your application's backend using the open source Mockachino service. You will learn how to build the application and the compiled source code files generated by Umi. You'll also learn how to deploy and configure your application on AWS Amplify.

In this chapter, we'll cover the following main topics:

• Creating a mock server with Mockachino
• Compiling the application and setting environment variables
• Hosting the application on AWS Amplify

By the end of this chapter, you'll have learned how to build the application and the compiled source code files generated by Umi...

Technical requirements

To complete this chapter's exercises, you only need a computer with any OS (I recommend Ubuntu 20.04 or higher) and the software installed in Chapter 1, Environment Setup and Introduction to UmiJS (VS Code, Node.js, and Yarn).

You can find the complete project in the Chapter07 folder in the GitHub repository available at https://github.com/PacktPublishing/Enterprise-React-Development-with-UmiJs.

Creating a mock server with Mockachino

In this section, we'll create a mock server using Mockachino to simulate the application's backend services.

Our application is only the presentation layer of the CRM system, where users can visualize and input data. Before deploying it, we need online backend services our application can connect with for processing, storing, and receiving data.

The backend services are APIs and microservices implemented by backend developers to securely and efficiently apply business logic and store information such as opportunities, activities, customers, and user information.

As the objective of this book is to teach React development with UmiJS, we won't build backend services. We'll use Mockachino to simulate the backend.

Mockachino is a straightforward service for creating a mock server. We only need to define an endpoint, and Mockachino will provide a space and a secret link to access the space whenever necessary.

Let...

Compiling the application and setting environment variables

In this section, you'll learn what files Umi will generate and how to compile the application. We'll also set an environment variable to configure the URL for sending HTTP requests.

We need to transform and compile our components and dependencies into a format that web browsers can interpret and render before deploying the application.

Run the yarn build command configured in our package scripts. This command will compile the application and place the compiled source code files in the dist folder.

Figure 7.2 – Compiled source code files

You will find three files in the dist folder:

• index.html: This is the HTML document containing the entry point for our application.
• umi.css: This is the compressed style sheet containing all the application styles generated by LESS files present in the project.
• umi.js: This is the compressed file containing all the JavaScript code...

Hosting the application on AWS Amplify

In this section, you'll learn how to deploy and configure single-page applications on Amazon Web Services (AWS) by hosting our application using Amplify Console.

AWS Amplify is a flexible set of tools for web and mobile frontend developers to create and deploy applications on AWS using various services. With Amplify, you can quickly build and deploy a full stack application without having to research and learn individual AWS services.

We'll use Amplify only to host our application, but you can create backend services and add authentication, artificial intelligence, machine learning, and more using the Amplify framework and Amplify Studio. If you want to know more, visit the framework's documentation page at https://docs.amplify.aws/.

Before proceeding to the following steps, you need to push the project to a new repository in your personal GitHub account.

Also, you need to create a free AWS account. Visit https://aws...

Summary

In this chapter, we created a mock server for our application using Mockachino, an open source project for quickly mocking servers. You also learned what files Umi generates during the build process for browsers to interpret and render the application. You created an environment variable to define the URL our application will use to send requests.

You learned how to push your application to a repository in your personal GitHub account and created a free AWS account. Next, you hosted your application on AWS by connecting AWS Amplify to your GitHub repository. You also learned how to configure rewrites and redirects, and manage your custom domains on the Amplify Console.

I hope this book has helped you learn how to use UmiJS combined with Ant Design to create robust and professional React applications that provide a great user experience. Keep practicing and exploring the techniques you've learned from this book.

Why subscribe?

• Spend less time learning and more time coding with practical eBooks and Videos from over 4,000 industry professionals
• Improve your learning with Skill Plans built especially for you
• Get a free eBook or video every month
• Fully searchable for easy access to vital information
• Copy and paste, print, and bookmark content

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at packt.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [e-mail] for more details.

At www.packt.com, you can also read a collection of free technical articles, sign up for a range of free newsletters, and receive exclusive discounts and offers on Packt books and eBooks.