Deploying Your Application

This chapter will explain how to deploy your backend and frontend to a server. Successful deployment is a key part of the software development process, and it is important to learn how a modern deployment process works. There are a variety of cloud servers or PaaS (short for Platform-as-a-Service) providers available, such as Amazon Web Services (AWS), DigitalOcean, Microsoft Azure, Railway, and Heroku.

In this book, we are using AWS and Netlify, which support multiple programming languages that are used in web development. We will also show you how to use Docker containers in deployments.

In this chapter, we will cover the following topics:

• Deploying the backend with AWS
• Deploying the frontend with Netlify
• Using Docker containers

Technical requirements

The Spring Boot application that we created in Chapter 5, Securing Your Backend, is required (https://github.com/PacktPublishing/Full-Stack-Development-with-Spring-Boot-3-and-React-Fourth-Edition/tree/main/Chapter05), as is the React app that we used in Chapter 16, Securing Your Application (https://github.com/PacktPublishing/Full-Stack-Development-with-Spring-Boot-3-and-React-Fourth-Edition/tree/main/Chapter16).

A Docker installation is necessary for the final section of the chapter.

Deploying the backend with AWS

If you are going to use your own server, the easiest way to deploy a Spring Boot application is to use an executable Java ARchive (JAR) file. With Gradle, an executable JAR file can be created using the Spring Boot Gradle wrapper. You can build your project using the following Gradle wrapper command in your project folder:

./gradlew build

Alternatively, you can run a Gradle task in Eclipse by right-clicking Project in the Project Explorer, navigating to Window | Show View | Other, and selecting Gradle | Gradle Tasks from the list. This opens a list of Gradle tasks, and you can start the build process by double clicking the build task, as illustrated in the following screenshot. If the Gradle tasks window is empty, click the root folder of the project in Eclipse:

Figure 17.1: Gradle tasks

This creates a new build/libs folder to your project, where you will find JAR files. By default, two JAR files are created:

• The file...

Deploying the frontend with Netlify

Before we deploy with Netlify, we will learn how you can build your React project locally. Move to your frontend project folder and execute the following npm command:

npm run build

By default, your project is built in the /dist folder. You can change the folder by using the build.outDir property in your Vite configuration file.

First, the build process compiles your TypeScript code; therefore, you have to fix all TypeScript errors or warnings, if there are any. A commonly encountered error occurs when you forget to remove unused imports, as illustrated in the example error below:

src/components/AddCar.tsx:10:1 - error TS6133: 'Snackbar' is declared but its value is never read.
10 import Snackbar from '@mui/material/Snackbar';

This indicates that the AddCar.tsx file imports the Snackbar component, but the component isn’t actually utilized. Therefore, you should remove this unused import. Once all errors...

Using Docker containers

Docker (https://www.docker.com/) is a container platform that makes software development, deployment, and shipping easier. Containers are lightweight and executable software packages that include everything that is needed to run software. Containers can be deployed to cloud services, such as AWS, Azure, and Netlify, and they offer many benefits for deploying applications:

• Containers are isolated, which means each container runs independently of the host system and other containers.
• Containers are portable because they contain everything an application needs to run.
• Containers can also be used to ensure consistency between development and production environments.

Note! To run Docker containers on Windows, you need the Windows 10 or 11 Professional or Enterprise versions. You read more about this in the Docker installation documentation: https://docs.docker.com/desktop/install/windows-install/.

In this section,...

Summary

In this chapter, you learned how to deploy our application. We deployed the Spring Boot application to AWS Elastic Beanstalk. Next, we deployed our React frontend using Netlify. Finally, we used Docker to create containers for our Spring Boot application and the MariaDB database.

As we reach the final pages of this book, I hope you’ve had an exciting journey through the world of full-stack development with Spring Boot and React. As you continue your full-stack development journey, remember that technologies are evolving all the time. For a developer, life is constant learning and innovation – so stay curious and keep building.

Questions

1. How should you create a Spring Boot executable JAR file?
2. What AWS services you can use to deploy a database and Spring Boot application to AWS?
3. What command can you use to build your Vite React project?
4. What is Docker?
5. How should you create a Spring Boot application container?
6. How should you create a MariaDB container?

Further reading

Packt Publishing has other resources available for learning about React, Spring Boot, and Docker. A few of them are listed here:

• Docker Fundamentals for Beginners [Video], by Coding Gears | Train Your Brain (https://www.packtpub.com/product/docker-fundamentals-for-beginners-video/9781803237428)
• Docker for Developers, by Richard Bullington-McGuire, Andrew K. Dennis, andMichael Schwartz (https://www.packtpub.com/product/docker-for-developers/9781789536058)
• AWS, JavaScript, React - Deploy Web Apps on the Cloud [Video], by YouAccel Training (https://www.packtpub.com/product/aws-javascript-react-deploy-web-apps-on-the-cloud-video/9781837635801)

Learn more on Discord

To join the Discord community for this book – where you can share feedback, ask the author questions, and learn about new releases – follow the QR code below:

https://packt.link/FullStackSpringBootReact4e