Chapter 14: Deployment Using Netlify and Azure

In the last chapter, we prepared our website for deployment. We added style to the components using Tailwind CSS. Lastly, we cleaned up the layout and refactored the code to components. Now, we can look more closely at the last component of the Jamstack used in this book: Netlify. Netlify is used as the default platform for the Blog with Gatsby example that was created at https://sanity.io/create. At the time of writing this book, Microsoft has added the Static Web Apps service, providing yet another option for deployment. Since GitHub and Azure are both owned by Microsoft, there is an excellent integration between the Static Web Apps service and GitHub.

This chapter first introduces the Netlify serverless continuous deployment hosting service, which automates many of the tasks that previously either needed to be developed or performed manually, and then demonstrates Azure Static Web Apps as an alternative for developers who may already be using Azure or who want to try this new service.

The main topics that we will cover in this chapter are the following:

  • Introduction to Netlify
  • Netlify plugins
  • Advanced configuration through the netlify.toml file
  • Netlify deployment via the command line
  • Azure Static Web Apps deployment

Technical requirements

To deploy the project on Netlify, you must have an account at https://www.netlify.com/. To deploy the project on Azure, you must create an account at https://azure.microsoft.com/en-us/.

Additionally, a Terminal program is needed.

Introduction to Netlify

Netlify, to someone who is new to web development, initially looks like a deployment and hosting platform.

In fact, a Netlify website can be a simple static file web host. Using Netlify's drag and drop feature, a folder of web files can be deployed as a real, functional, and hosted website in seconds, as shown:

Figure 14.1 – Netlify's drag and drop deployment interface

Figure 14.1 – Netlify's drag and drop deployment interface

However, while it is a place to host your website, it is so much more than that.

Firstly, behind the scenes, when we initially created our Sanity and Gatsby-generated website, the code provided by Sanity and Gatsby Blog Template automatically runs it, thereby creating an integration between Sanity and Netlify.

Both Sanity Studio and the Gatsby-generated website were immediately built and hosted on Netlify's server, and new versions of the website could be easily and automatically deployed as often as we wish. Through integration connecting Sanity's management tool and Netlify, a new version of the website can be built when we change the contents within Sanity. Also, there is a hook or a trigger set up through GitHub that will automatically deploy a new version of the website whenever the Gatsby source code is pushed to GitHub.

Secondly, Netlify is a serverless continuous delivery service built on top of Amazon Web Services (AWS). This means that all the infrastructure provided by AWS is automatically built into Netlify's hosting ability. This means that there are servers located throughout the world, also referred to as the cloud, that deliver content in the fastest way possible to all website users.

However, these two aspects are just the beginning of the story. Netlify can run many different types of code together through scripts, in several languages, during the build process to enhance your website, as shown in the following screenshot:

Figure 14.2 – An excerpt of Netlify's build output

Figure 14.2 – An excerpt of Netlify's build output

This is useful when there are pre-built pieces of code that are needed to build the static pages. For example, the PHP programming language can be used to extract or preprocess format data or even generate websites statically. Hence, the JavaScript programming language is not the only option during deployment.

It is important to remember that code can only be run on Netlify at the time of deployment. Hence, a traditional content management system such as WordPress cannot run on Netlify since it requires server-side code to run on each page request.

One nice feature is the ability to do an A/B test. This is accomplished by using two branches in GitHub. Let's imagine that you would like to test the effect a particular color has on the performance of a button that website visitors need to click. You could have two different branches in GitHub configuring Netlify to randomly select one or the other.

Another feature that Netlify provides is an easy way to insert code snippets into the header or body of a page. One example of this usage would be pasting the code snippet required for Google Analytics to work properly in the page.

Next, let's learn about ways to take advantage of what Netlify has to offer though their plugins.

Netlify plugins

Netlify's plugin library automates many manual processes and saves developers the effort of having to develop in-house solutions. This growing library includes many plugins. For example, one plugin can fetch and incorporate external resources such as RSS feeds. Another plugin can also generate a sitemap or even index the website content to create a search functionality.

HTML Minify

The plugin that we'll examine for the purpose of this book compresses the HTML, reducing the file size by removing unnecessary page or code contents, or substituting variable names with single-character replacements. This process is called minification.

We would like to Minify the HTML code as much as possible, so we could use Netlify's plugin called netlify-plugin-minify-html to compress the file contents. When Gatsby builds the static pages, it minimizes the content of the HTML files.

The following is an example of how the readable source code would appear prior to minification:

<h1 hidden="">

  Welcome to <!-- -->My new blog

</h1>

<div class="blog-post-preview-list-module--root--2LgdR">

   <h2 class="blog-post-preview-list-module--headline--3j8kB">

  Latest blog posts

</h2>

....

Once minification is performed, the total file size is reduced. Here is how the HTML code appears following minification:

<h1 hidden="">Welcome to <!-- -->My new blog</h1><div class="blog-post-preview-list-module--root--2LgdR"><h2 class="blog-post-preview-list-module--headline--3j8kB">Latest blog posts</h2>

Extra spaces have been removed, but the netlify-plugin-minify-html file is able to make the file size even smaller. Every character counts toward the total amount of data on the page that needs to be transferred over the internet, so this is a wonderful feature.

The following steps will activate the Netlify Minify plugin:

  1. Log in to https://netlify.com. In the horizontal menu underneath the website name, click on the Plugins link:
    Figure 14.3 – The horizontal menu

    Figure 14.3 – The horizontal menu

  2. Locate the Minify HTML plugin and click on the gray Install button.
  3. Then, choose the project website (the name usually ends in –web):
    Figure 14.4 – The Netlify Minify plugin installation screen

    Figure 14.4 – The Netlify Minify plugin installation screen

  4. When asked Are you sure you want to install Minify HTML, click the green Install button.

    Now, at this point, the Netlify web interface should return you to the plugins page for the website. Minify HTML should be displayed.

  5. Next, in the horizontal menu underneath the website name, click on the Deploys link.
  6. On the right side of the interface, click on the gray Trigger deploy button, which will display a menu, and then the Deploy site menu item, as shown in Figure 14.5:
Figure 14.5 – The Trigger deploy menu

Figure 14.5 – The Trigger deploy menu

This will build and deploy a new version of the website. The Deploy in Progress page will display a log where the output will be displayed.

The log output is extremely useful for learning about what is performed during deployment and whether there are any warnings or errors. The Netlify deployment will be stopped if there are any errors to ensure that no website will be deployed.

The following is the code once Netlify Minify HTML is executed:

<h1 hidden>Welcome to My new blog</h1><div class=blog-post-preview-list-module--root--2LgdR><h2 class=blog-post-preview-list-module--headline--3j8kB>Latest blog posts</h2>

Compare this to the minified code earlier in this chapter. Netlify Minify HTML removes the quotation marks when the HTML tag attribute is a continuous string (without spaces) and also removes comments, so <!-- --> is removed. The final result is a smaller file. This is just one example of the many ways whereby, as a result of using Netlify plugins, we can improve the resultant static content and enhance its functionality. Exploring the plugins will open up many new possibilities.

Next, we will begin to explore, more deeply, the configuration options available for Netlify's features.

Advanced configuration through the netlify.toml file

While the Netlify web interface is easy to use, for more control over the deployment process, a netlify.toml file can be used, which uses Tom's Obvious, Minimal Language format.

Let's now learn how to create and use this configuration file to access the advanced features of Netlify.

Create a file in the project's root directory named netlify.toml. Here is an example of the file contents:

[[plugins]]

  package = "netlify-plugin-minify-html"

  # Specify which deploy contexts we'll minify HTML in.

  # Supports any Deploy Contexts available in Netlify.

  # https://docs.netlify.com/site-deploys/overview/#deploy-contexts

  [plugins.inputs]

    contexts = [

      'production',

      'branch-deploy',

      'deploy-preview'

    ]

  [plugins.inputs.minifierOptions]

    removeComments = false

    collapseInlineTagWhitespace = false

The [[plugins]] annotation is used for each plugin. Next, [plugins.inputs] is used to determine the contexts for which the plugin will be activated. For example, when developing locally, Minify is usually not required, so the plugin will only be triggered in just the production and preview contexts.

Next, the [plugins.inputs.minifierOptions] section of the plugin configuration allows us to customize the plugin even more. Since, by default, removeComments is set to true, this option can be set to false by using the removeComments = false option.

We may use the Netlify command-line tool once again, but this time by typing the following command in the project's root directory:

netlify build

The preceding command triggers the build locally, combining the netlify.toml configuration and the plugins that are configured in Netlify's plugin list for the website.

Here is the relevant excerpt from the output of netlify build:

┌──────────────────────────────────────────────────────┐

│ 2. onSuccess command from netlify-plugin-minify-html │

└──────────────────────────────────────────────────────┘

Minifiying HTML in the deploy context: production

Minifiying HTML with these options: { removeComments: false }

(netlify-plugin-minify-html onSuccess completed in 259ms)

┌─────────────────────────────┐

│   Netlify Build Complete    │

└─────────────────────────────┘

(Netlify Build completed in 19.8s)

In this section, we've learned how to use the Netlify configuration file. Next, we will learn how to build and deploy Netlify using the command line.

Netlify deployment via the command line

Netlify's command-line tool also provides a nice way to preview the site without deploying it once the netlify build command is run.

In the Terminal, type the following command:

netlify deploy

The output will be similar to the following:

Deploy path:        /home/chris/jumpstart-jamstack/web/public

Configuration path: /home/chris/jumpstart-jamstack /netlify.toml

Deploying to draft URL...

Finished hashing 49 files

CDN requesting 0 files

Finished uploading 0 assets

Draft deploy is live!

Logs:              https://app.netlify.com/sites/jumpstart-jamstack-web/deploys/5f3cad51bdd06713f5250887

Website Draft URL: https://5f3cad51bdd06713f5250887--jumpstart-jamstack-web.netlify.app

If everything looks good on your draft URL, deploy it to your main site URL with the --prod flag.

netlify deploy --prod

As the command's output reveals, a Draft deploy preview URL is made available so that the production website may be viewed without deploying it. In the example, this is https://5f3cad51bdd06713f5250887--jumpstart-jamstack-web.netlify.app.

--open is another useful flag that can be added. This will open the URL in the default browser. The relevant command would be as follows:

netlify deploy --open

Finally, as the output also states, by adding the --prod flag, deploy will be deployed and replace the current version in production if the deployment succeeds.

netlify deploy --prod

Additionally, in order to open the URL in the browser, add the --open flag as before:

netlify deploy --prod –open

The output from this command will be similar to the following:

Deploy path:        /home/chris/jumpstart-jamstack/hands-on-jamstack/web/public

Configuration path: /home/chris/jumpstart-jamstack/hands-on-jamstack/netlify.toml

Deploying to main site URL...

Finished hashing 1 files

CDN requesting 0 files

Finished uploading 0 assets

Deploy is live!

Logs:              https://app.netlify.com/sites/jumpstart-jamstack-web/deploys/5f3cb84fbdd067963e250875

Unique Deploy URL: https://5f3cb84fbdd067963e250875--jumpstart-jamstack-web.netlify.app

Website URL:       https://jumpstart-jamstack-web.netlify.app

Unique Deploy URL provides a way to rollback to this particular deployment in the future, while Website URL, as expected, is the newly deployed version of the website.

In this section, we have learned how to build and deploy on Netlify using the command line. Next, we will learn another way to deploy Jamstack websites using Azure.

Azure Static Web Apps deployment

A preview of the Azure Static Web Apps service was introduced, placing yet another competitor in the Jamstack hosting and deployment space. The URL to try out this service can be found at https://azure.microsoft.com/en-us/services/app-service/static/.

Static web app creation

To create a static web app using Azure, follow these steps in order:

  1. Start by creating an Azure account. The steps for creating a free Azure account may vary depending on the country. The following URL may take you to the signup page for your country: https://azure.microsoft.com/free/.
  2. After signup, you should eventually arrive at the Azure portal location (https://portal.azure.com/). Here is a screenshot of the top navigation of this screen:
    Figure 14.6 – The Azure portal top navigation

    Figure 14.6 – The Azure portal top navigation

    The various Azure services are listed. As shown in Figure 14.6, Static Web Apps (Preview) is one of the options.

  3. Placing the mouse on the Static Web Apps (Preview) button, the following menu will be displayed:
    Figure 14.7 – Static Web Apps creation

    Figure 14.7 – Static Web Apps creation

  4. Click on Create to create the Jamstack app.
  5. Next, we will fill in the project details, Static Web App details, and Source Control Details fields:
    Figure 14.8 – Resource Group creation

    Figure 14.8 – Resource Group creation

  6. Create a new resource group, enter a name for the static app, and then select an appropriate region.
  7. Next, for Source Control Details, click the blue Sign in with GitHub button to sign in to your GitHub account. Authorize Azure to access your GitHub account.
  8. In Source Control Details, choose your GitHub account name for Organization, and the appropriate Branch, which is usually the master:
    Figure 14.9 – Organization, Repository, and Branch selection on the configuration form

    Figure 14.9 – Organization, Repository, and Branch selection on the configuration form

  9. Finally, in the Build Details section, for the Build Presets option, select Gatsby in the Static site generator section:
    Figure 14.10 – Build Details and Build Presets selection on the configuration form

    Figure 14.10 – Build Details and Build Presets selection on the configuration form

  10. Lastly, and most importantly, set the App location to /web/ since that is where the Gatsby application is located in our project. Api location is to be left blank (delete api).
  11. At the bottom, click the Review + create button, followed by the blue Create button. If everything is correct, the static website should be deployed. The deployment begins as queued and then begins building, so the entire process requires a few minutes:
Figure 14.11 – A completed Azure Static Web Apps service configuration form

Figure 14.11 – A completed Azure Static Web Apps service configuration form

Static web app continuous deployment

Following deployment of the static web app, the screen shown in Figure 14.12 is displayed:

  1. Clicking on the blue Go to resource button takes us to the Essentials screen:
    Figure 14.12 – The Azure Static Web Apps service deployment confirmation screen

    Figure 14.12 – The Azure Static Web Apps service deployment confirmation screen

  2. The Essentials screen, which is accessed from the Overview menu item on the left-hand menu, displays the following information:

    Resource group

    Location (region)

    Subscription and Subscription ID

    Tags, if applicable

    URL, which can be clicked to access the static web app

    Source, which is the deployed GitHub branch, schema in this case

    Deployment history, which is used to access the deployments from GitHub

    Edit workflow, which is used to edit the text-based workflow file in .yml format:

    Figure 14.13 – The Azure Static Web Apps service Essentials screen

    Figure 14.13 – The Azure Static Web Apps service Essentials screen

  3. Clicking on the URL or, alternatively, the Browse button in the top menu will launch the web application in the browser.
  4. Clicking on GitHub Action runs will lead us to the Workflows screen, as shown in Figure 14.14:
    Figure 14.14 – The Azure Static Web Apps CI/CD screen

    Figure 14.14 – The Azure Static Web Apps CI/CD screen

    All the deployments are displayed in the preceding screenshot.

  5. Clicking on the Azure Static Web Apps CI/CD link (beginning with ci:) will bring us to the management screen to view the deployment details for that workflow:
Figure 14.15 – A collapsed view of the Build and Deploy job screen

Figure 14.15 – A collapsed view of the Build and Deploy job screen

In the left menu, by clicking on the Build and Deploy job link, the details of the deployment may be viewed as shown in Figure 14.16:

The following screenshot shows what an expanded view looks like:

Figure 14.16 – Excerpt of the expanded view of the Build and Deploy job screen

Figure 14.16 – Excerpt of the expanded view of the Build and Deploy job screen

In the expanded view of the Build and Deploy tab, the actual output of the deployment is shown. The text is nicely colored red, yellow, and green to show warnings and success messages.

While, at time of writing, the Static Web Apps service on Azure is still a preview release, it definitely demonstrates a viable alternative to Netlify.

Summary

In this chapter, we learned how to deploy websites through Netlify. We also learned how to install and use Netlify plugins, as well as how to use the netlify.toml configuration file and command-line utilities.

Additionally, we learned how to create and manage a Jamstack web application through the Static Web Apps service on Azure and also how to manage app redeployments through GitHub.

Having multiple options for Jamstack deployment demonstrates its decoupled nature. Multiple services can be easily leveraged for the same application, as needed.

In the next chapter, we will conclude our journey into the world of Jamstack and discuss the present and future state of the Jamstack community, other tools and alternative components of the ecosystem, and upcoming technologies and companies that are writing the future.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset