Shopify / Shopify/shopify-app-template-node

Default Docker configuration does not work

Open
#1,169 3 comments 6 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
1k
Forks
434
PR merge metrics
No merged PRs in 30d

Description

Issue summary

Write a short description of the issue here ↓

The default node app template does not run in Docker container.

Expected behavior

What do you think should happen?

After installing the template using npm init @shopify/app@latest and successfully running it locally (including ngrok setup and connection to our development store), I built a Docker image to containerize the setup. Given that this app template includes a pre-built Dockerfile, expected behavior is that the app would run in a container without error.

Actual behavior

What actually happens?

Upon launching the container, it exits immediately with the following error:

file:///app/index.js:29
  SCOPES: process.env.SCOPES.split(","),
                             ^
TypeError: Cannot read properties of undefined (reading 'split')
    at file:///app/index.js:29:30
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
    at async loadESM (node:internal/process/esm_loader:91:5)
    at async handleMainPromise (node:internal/modules/run_main:65:12)
Node.js v18.12.1

The issue appears to be due to a missing file: process.env. I do not understand why the app runs locally without this file, or why it is not included if necessary for running in Docker. But after reading up on the issue, I used the command npm run shopify app env pull to get the environment variables:

SHOPIFY_API_KEY=00000000000000000000000000000000
SHOPIFY_API_SECRET=00000000000000000000000000000000
SCOPES=write_products

I saved this output in two files: process.env and .env because there seems to be confusion about which filename is required.

As a side note, I discovered that the env pull command does not generate all the necessary env values. I had to manually add HOST=<ngrok_address>.

After rebuilding my Docker image and running it, I still got the same TypeError. I then posted my question on StackOverflow, where I was advised to forget about the env files and just add ENV SCOPES=write_products to the Shopify-supplied default Dockerfile. So now my Dockerfile looks like this:

FROM node:18-alpine
ARG SHOPIFY_API_KEY
ENV SHOPIFY_API_KEY=$SHOPIFY_API_KEY
EXPOSE 8081
WORKDIR /app
COPY web .
RUN npm install
RUN cd frontend && npm install && npm run build
CMD ["npm", "run", "serve"]
ENV SCOPES=write_products
ENV HOST=https://a1b1-123-456-789-00.eu.ngrok.io

Again rebuilding and running the container, I got a new error:

/app/node_modules/@shopify/shopify-api/dist/context.js:37
        if (!params.API_SECRET_KEY.length) {
                                   ^
TypeError: Cannot read properties of undefined (reading 'length')
    at Object.initialize (/app/node_modules/@shopify/shopify-api/dist/context.js:37:36)
    at file:///app/index.js:26:17
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
    at async loadESM (node:internal/process/esm_loader:91:5)
    at async handleMainPromise (node:internal/modules/run_main:65:12)
Node.js v18.12.1

I then I tried adding ARG API_SECRET_KEY=<my_key> to the Dockerfile, but I still get the error.

I am unable to find any help regarding Docker configuration on the Shopify dev portal.

Steps to reproduce the problem

  1. Follow the documented process of creating a new app: https://shopify.dev/apps/getting-started/create
  2. docker build -t my-new-app .
  3. docker run -p 8081:8081 my-new-app

Reduced test case

It is easily replicated by the above three steps. Let me know if more info is needed.

Specifications

  • Browser: n/a
  • Device: macOS Montery (M1)
  • Operating System: 12.6.1

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the template's Dockerfile and web/index.js, then reproduce the documented docker build and docker run commands. Trace how the container receives the variables used by the app and compare that with the environment setup from the issue. Done means the default template starts in a container without the reported missing-variable errors.

Written by the indexing model from the issue text.

Assessment

Tech stack
docker, javascript
Domain
backend, devops
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.