node.js - Can't get react app created with Shopify CLI to run locally (on Heroku)

Solution:

After much troubleshooting, I finally was able to get the app create from the new Shopify CLI to run on a Heroku server (this was the initial intent of getting it to run locally). I will post the process in case anybody else runs into the same issue.

Instead of creating a Docker container per the instructions in the Heroku.md file, I made a Heroku app based on the Heroku documentation. The steps goes as follows:

Step 1: Create the Heroku App cd into the app/project folder (this would be the web folder for the template) git init heroku git:remote -a myheroku-app-name

git add . git commit -am "initialize app" git push heroku master

Note: Make sure you are only pushing the web folder and not the app in its entirety.

Note: My first time around this did not work because I had already created a container in Heroku for the Docker image. This will onlly work in a Heroku application, not a container.

Step 2: Setup the package.json scripts in the web directory

"start":"npm run serve",
"heroku-postbuild": "cd frontend && npm install && npm run build",
"serve": "cross-env NODE_ENV=production node -r dotenv/config index.js"
Copy code

Step 3: Update variables (if applicable) My app had these variables set as follows:

const DEV_INDEX_PATH = ${process.cwd()}/public/;
const PROD__INDEX_PATH = ${process.cwd()}/public/dist/;
Copy code

The actual values need to be:

const DEV_INDEX_PATH = ${process.cwd()}/frontend/;
const PROD_INDEX_PATH = ${process.cwd()}/frontend/dist/;
Copy code

Step 4: Allow Heroku to configure PORT In my package.json I deleted

"engines": {
"node": ">=16.13.0"
}
Copy code

from both the web directory and the frontend directory after getting this error: https://github.com/keystonejs/keystone-classic/issues/3994 (https://github.com/keystonejs/keystone-classic/issues/3994)

You also need to change the PORT variable in

app.listen(PORT)
Copy code

to

app.listen(process.env.PORT)
Copy code

since Heroku dynamically creates the PORT. Do not put in a PORT value in your config vars.

Of course, this is all in addition to setting your environmental variables in Heroku i.e. HOST, SCOPES, SHOPIFY_API_KEY, SHOPIFY_API_SERET. You may also need to npm i cross-env and dotenv.

Didn't find the answer?

Our community is visited by hundreds of Shopify development professionals every day. Ask your question and get a quick answer for free.