In this article, we will introduce you to the process of building a site as an Azure Web App with Shifter Headless that will support a wide range of platforms, languages, and content management systems. For this implementation,we will be using Gatsby for our front-end, Shifter Headless running WordPress for our backend data source, and Azure Web App for hosting.
Before we begin, take some time to sign up and familiarize yourself with the following services.
Official support documents are also very helpful for educating yourself on these services.
If you haven’t yet, install Gatsby CLI and its dependencies in your local environment.
$ npm install -g gatsby-cli
Please note that NodeJS is required to install Gatsby.
Choose an existing Shifter Headless site or create a new one. If you need to create a new site, you can find instructions for how to do so by using our official support guide.
Next, log in to the launched WordPress dashboard and prepare your cNext, log in to the WordPress dashboard and prepare your content. We’ll be using sample data from WordPress theme unit test project.
Make note of the admin, WordPress URLs, and credentials for your Shifter Headless WordPress site. You’ll need this for setting up Gatsby.
After logging in to the dashboard, use the navigation menu to go to your Plugins page and activate the WordPress Importer plugin.
Return to the Shifter dashboard and copy your WordPress URL, you’ll need it for the next step.
We’ve prepared both Azure and Gatsby starter templates in advance.
You can also fork these templates to your own repo through the UI or cline them with the following commands.
$ git clone email@example.com:YOUR-GITHUB-USERNAME/Shifter-Headless-Azure.git Shifter-Headless-Azure
$ git clone https://github.com/YOUR-GITHUB-USERNAME/gatsby-starter-wordpress -typescript.git
After you have cloned these repositories, switch to your new project’s location.
$ cd Created file name
The files will now be saved locally where you can continue to edit them.
In your Gatsby files, you will find a file called gatsby-config.js.
Go ahead and open this file and make the following changes.
First replace the baseURL with your WordPress URL that you copied in the previous step.
baseURL baseUrl: "YOUR-WORDPRESS-URL.getshifter.co",
Next, update the
searchAndReplaceContentUrls section with your WordPress URL
// Search and Replace Urls across WordPress content.
// replacementUrl: "https://localhost:8000",
Commit your changes and check them.
$ git add .
$ git commit -m "update gatsby-config.js
"$git push origin / master
Sign in to your Microsoft Azure account or create a new account if needed.
From the Azure Portal, search for Static Web App, and select it from the list of options and create a static web app.
If you don’t already have an Azure subscription, you will be asked to select how to proceed. The free trial is a good option and If you register a payment method, Azure allows you to continue to use their service for up to 12 months. Please note that Azure’s terms are dictated by Microsoft and are subject to change.
For full instructions for setting up your Azure account, be sure to check our official support document.
Run the following command to start the server
$ gatsby develop
You can now visit view gatsby-starter-wordpress-typescript at
://localhost:8000/ in your browser.
And, you can explore your site’s data and schema at
Note that the development build is not optimized for production. To create a production build, check your local version for errors and use Gatsby build to put your site into production.
Store the static files created by executing the Gatsby build command in the public directory.
$ gatsby build
Access your project’s Github repository and confirm that the action is complete.
Return Portal.Azure and click the Azure Web App URL.
If you’re able to see your site, congratulations! Enjoy the results of your hard work. Next steps include setting up a custom domain on Microsoft Azure which is done through their portal.
What we’ve covered in this tutorial has introduced a basic Jamstack configuration with Shifter Headless as the data source, Gatsby controlling our front end, and Microsoft Azure as our host. This is a setup that’s not only useful for creating websites with a headless CMS, but also for creating headless sites at scale.
If you decide to give this tutorial a try, contact us through social media or support chat and let us know how it goes. Your feedback drives our development, so we look forward to hearing from you.