This page explains how to deploy a front-end application to Netlify. The front-end will serve the user interface that your users interact with and communicate to your Gadget backend app via your app's API.
First, we need to make sure that Netlify's build process can find the
@gadget-client package for your application. If you haven't already, ensure that you have a
.npmrc file in your repo next to the
package.json that manages the
@gadget-client dependency. For example, if your frontend resides in the
web/frontend folder of your repo, create the file
web/frontend/.npmrc with these contents:
.npmrc next to your frontend package.json@gadget-client:registry=https://registry.gadget.dev/npm
This configuration ensures that
npm install or
yarn install will correctly fetch your Gadget API client package from the Gadget registry.
Next, we need to log in to Netlify and add a new site. To do so, click on the "Add new site" dropdown on the right side of the sites section and select "Import an existing project".
From here we can click on "GitHub" and search for the repository we want to deploy from.
Clicking on the repository name will bring you to the next page where we can configure the project. From here you can modify Build settings and add environment variables to your site.
To deploy Shopify applications to Netlify, some more set-up is required.
Add the environment variable
SHOPIFY_API_KEY by clicking on Show advanced and New variable. You can find the value for
SHOPIFY_API_KEY either on the "Overview" or "Client credentials" pages of your Shopify Partners Dashboard under the Client ID header.
If you forget to add environment variables or need to modify the build settings, you can do so again on the "Site settings" page later on.
Once this is complete you can click on "Deploy site" and watch the logs, by clicking on the yellow 'Site deploy in progress' link, to make sure that the deployment was successful.
Once deployment is successful, you should see the text "Site is live" at the bottom of the build logs and a site preview on the "Site overview" page next to your site's domain.
For your application to be accessed by users, you must first change the app URL on the Shopify Partner Dashboard and the Gadget Connections page. In the Netlify "Site overview" page for your deployed site, copy the URL beside the site preview.
In Gadget navigate to your active Shopify connection. From here we can click on the pencil icon to the right of the Shopify Apps section. Replace the App URL with your deployed application's domain.
On the Partners Dashboard in Shopify, navigate to the App setup page, then to the URLs section. From here replace the current URL with your deployed application's domain and click save to confirm your changes.
Before submitting your app to Shopify for review, you will need to add a couple of files to conform with Shopify's Content Security Policy (CSP) header requirements. You can follow the Shopify iFrame protection example to test that you are setting the CSP header correctly.
You need to create a Netlify Edge function. Edge functions are serverless functions that are hosted on AWS Lambda.
Create a new folder at the root of your project,
netlify/edge-functions, and add a file named
csp.ts. In this file, add the following code snippet:
To make sure that this Netlify Edge function deploys, you will need to add a
netlify.toml at the root directory with the following configurations:
netlify.tomltoml[[edge_functions]]path = "/*"function = "csp"
You also need to navigate to the build settings and change the Publish directory input field to
Once a new deployment is triggered, you're all finished.
Congrats, your app should now be deployed on Netlify! You can now install your app on a store or view your app in a store admin on which it has previously been installed.