Use a Waypoint template

Developers use a Waypoint template to create their application in HCP Waypoint. The template abstracts away the infrastructure management and allows the developers to focus on application development. They don't need to know anything about Terraform or log in to HCP Terraform and instead, only interface with HCP Waypoint.

In this tutorial, you will create a Waypoint application from the template created in the previous tutorial. The application consists of a new GitHub repo, populated with the code for a static website and actions that deploy the site.

Prerequisites

For this tutorial, you will need:

• A HashiCorp Cloud Platform (HCP) account
• A GitHub account
• Create a Waypoint template tutorial completed

Create a Waypoint application

Log in to HCP and navigate to the Waypoint page. Click on the Applications option from the left navigation and then click on the Create an application button.

Choose the static-webapp template option. This is the template that you created in the previous tutorial. Click the Next button to continue.

Click on the View details link in the Selected template area to see the template summaries.

In the Application name field under the Configure settings area, enter mywebapp and click on the Create application button to start the creation process.

HCP Waypoint begins the application initialization process and communicates with HCP Terraform to create the application infrastructure. This process takes a few minutes.

Once the process is complete, the Infrastructure status value will update, indicating that the Terraform workspace and infrastructure are set up and ready. You can click on the link under Template workspace to see the HCP Terraform workspace that HCP Waypoint created for the application.

Review the created code repository

The template creates a GitHub repository with GitHub Pages enabled and a GitHub Actions workflow.

Click on the code repository link in the Developer instructions section.

The repository includes a .github/workflows directory for the GitHub Action workflow, an app directory that contains the source code for the webapp, and a README.md file with instructions on how to update the webapp as well as the GitHub Pages URL for the deployment. Click on the URL to preview the webapp.

Update the webapp

Open the main.css stylesheet and update the background-color and color attributes in the body element to match what is below.

body {
    background-color: #570f8a;
    margin-top: 5%;
    color: #e9cdff;
}

Save the file, commit the changes, and push it to the repository.

Navigate back to the repository in GitHub and click on the Actions button in the top navigation. On the Actions page, notice that another workflow run has started that contains the code changes.

Once it completes, refresh the GitHub Pages URL in your browser to check that the changes have been applied.

Next steps

In this tutorial, you learned how to create a Waypoint application from a template.

Continue on to the next tutorial to learn how to create an add-on for the Waypoint application.