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:
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.
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:
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:
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'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.
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:
Now, at this point, the Netlify web interface should return you to the plugins page for the website. Minify HTML should be displayed.
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.
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'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.
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/.
To create a static web app using Azure, follow these steps in order:
The various Azure services are listed. As shown in Figure 14.6, Static Web Apps (Preview) is one of the options.
Following deployment of the static web app, the screen shown in Figure 14.12 is displayed:
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:
All the deployments are displayed in the preceding screenshot.
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:
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.
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.
35.173.125.112