Dockerizing your Shopify app
Tags: docker, shopify
Published: 2023-03-02 08:23:24



When you generate a Shopify app, using their CLI tool, the generated app comes with  a Docker file, you can use when developing or on production.
In this blog, we will explore what's required to develop a Shopify app in Docker, and later translate the same to  a Docker instance on a production server with a real domain (URL).

When you run 'yarn dev (--reset)', after the app is generated, Shopify CLI takes care of the initial setup:
* like connecting your local app to the Shopify app you created on your [partners dashboard](https://partners.shopify.com) (in this example walk through it's `docker-inshop`; see image below) and
* Automatically updates your app's URL in order to create `the preview experience`
* Sets your app with a development store to associate with the app during testing/dev, according to your answers in each promt after `yarn dev --reset`






Initial setup with Shopify cli after `yarn dev --reset`

![yarn dev --reset prompts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ugqfy6h8zocmfghzgs7.png)



Auto updated App URL
![Auto updated app urls](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dyleq8ycv04smjdmi10g.png)

With Docker  you will have to do this manually, but it's as easy as ABC now that we understand what we miss when we trade Shopify CLI for Docker during development.
With Docker, you only need the web folder 📂, as you will not be relying on Shopify CLI to serve your app in dev or in production.  

### The Plan:
* Serve the app via https using ngrok
* Manually update your App URL
* Identify your application with Shopify via credentials

The Docker file exposes your app via port `8081`, and so, to expose the app via https, run `ngrok http 8081`.
Then copy that ngrok url and replace your app's URL under "ALL APPS" > "your app id ||`docker-inshop`" > "App setup" > "URLs" under, your Shopify partners dashboard.


Updating App URLs
![Updating App URLs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zor2q6vca3m6q01fzomt.png)

Next, to identify this application with Shopify, on the same dashboard under "Overview", note down the "Client ID" and the "Client secret".

App Credentials
![App Overview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7nj5ggbyrfa983s1edwv.png)

Copy the `example.env` as `dev.env`, then replace the values of;
* `SHOPIFY_API_KEY` with the "Client ID" and `SHOPIFY_API_SECRET` with the "Client secret" from the "Overview" tab above.
*  `SCOPES` with the "scopes" in the `shopify.app.toml`, you can add more and request access as required, from your app's setup dashboard pane.

* `HOST` with the ngrok URL you got after exposing port 8081, same in the image 'Updating App URLs' above, and `PORT` with the same port defined in the `Dockerfile`.

### Testing the setup:
Run `docker build --build-arg SHOPIFY_API_KEY=<shopify client id> -t demos .` to build an image
  based on the default Dockerfile generated when scaffolding the starter app with Shopify CLI. The `SHOPIFY_API_KEY` is required to bundle the front end application, done when building this image.

Then run  `docker run -p 8081:8081 --rm --env-file dev.env demos`,to create and start a new container based on a specified Docker image (demos), while including the environment variables defined in the `dev.env` file.

To install the app into your Shopify store visit the `<HOST>/auth?shop=<store_name>.myshopify.com` URL in your browser; OR same as `https://<ngrok_url>/auth?shop=<store_name>.myshopify.com`, 


![Installing the app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hkbwnlacmwqc6wtm212t.png)

### CONCLUSION
To move this to production, replace the `HOST` value with your domain URL, and also update the URLs under  "ALL APPS" > "<Your app>" > "App setup" > "URLs", with the same value.

If required, to publish your app in the Shopify App Store, follow the guide @ [Shopify](https://shopify.dev/docs/apps/store/review/app-submission).

You can find the code for this blog on [Github](https://github.com/flaircore/docker-shopify)