Deploying a JSS site to Azure
There are many considerations and possible topologies involved in deploying a JSS site to Azure. This guide is designed to be the simplest way to get up and running with a JSS site using integrated mode in Azure, using a version of Sitecore deployed from the Azure Marketplace. In practice a more advanced deployment toolkit would be appropriate that involves source control, automated builds, testing, etc.
Step 1: Provision Sitecore
Using the Azure Marketplace, provision a Sitecore XP instance. You will need a JSS-enabled license file. For the purposes of simplicity, choose an XP Developer installation. In production, a more repeatable deployment methodology such as ARM templates and the Sitecore Azure Toolkit should be used, but the Marketplace installation is the simplest to get started with. Consult the Sitecore documentation for help with production Azure setup.
After provisioning, ensure to increase the
masterdatabase sizes to at least S2 (50 DTU). Lower scaled databases will cause slow UI and may fail the package installation.
Step 2: Install the JSS server components
- Follow the Server Components Installation instructions on this page on your Azure instance.
- Configure Azure Node version: In Azure, the app services come with a very old Node.js version enabled by default. This will cause issues rendering your JSS apps. Configure the
WEBSITE_NODE_DEFAULT_VERSIONsetting on your app service, per this article. The same Node version should be used on Azure as is used during development, normally the latest LTS Node release. As of the writing of this documentation, that is 8.9.4.
Step 3: Configure the Sitecore server
The steps to configure an Azure server to accept a JSS app are mostly the same as for on-premise. Consult the app deployment documentation for details, and read on for the differences.
When in Azure, the config deployment step must be performed manually (in production, it should be performed by an automated build step). For our purposes, we can use our FTPS client to deploy the JSS app's
/sitecore/config/*files to the Azure website's
NOTE: If your JSS apps are relying on custom
hostNamesettings, which the default configs are (i.e.
hostName="jssreactweb"), you will need to alter this before deploying to Azure. Either the hostName will need to be cleared, making the JSS site the default site, or the hostName will need to be something resolvable in DNS and registered to the Custom Domains of the Azure App Service instance. For simplicity, start by clearing the
When deploying the app to Azure, instead of
jss deploy app, use
jss deploy itemswith the same parameters. Because JSS deployment service does not deploy files, we must deploy the files separately to the App Service instance.
Step 4: Deploy the app's files
In production, deployment of the JSS app's build artifacts should be done via an automated build setup. For simplicity, we can use FTPS to deploy our build artifacts.
Build your JSS app using
jss build, and collect its artifacts.
- For the React app, artifacts are in
- For the Angular and Vue apps, artifacts are in
- For the React app, artifacts are in
Collect the artifacts and deploy them using FTPS to the App Service under the relative path listed in the
sitecoreDistPathsetting in your app's
package.json. In most cases, this would be
/dist/YourAppName, which translates to deploying the build to
/site/wwwroot/dist/YourAppNameon the app service
Download your App Service's
publishsettingsfile from the Azure portal
Locate the FTP connection information within, i.e.
<publishProfile profileName="sitecorejss-999-single - FTP" publishUrl="ftp://waws-prod-mwh-015.ftp.azurewebsites.windows.net/site/wwwroot" userName="sitecorejss-999-single\$sitecorejss-999-single" userPWD="long random pw here"...
Using an FTPS client, such as WinSCP, connect to the app service and edit the Web.config file. Ensure to select explicit encryption when connecting.
That's it! Visiting your app's URL should now operate correctly.