How to set custom port for node.js Shopify App development environment?

[zk-ant]

Hi!

The app is based on the node app boilerplate, so it uses vite. I basically want for my app to have a static port on localhost when I launch `npm run dev`. Currently it always generates a random port in the range 3xxxx, but I'd like to set it to let's say 3000. How do I achieve this?

I tried playing around with the vite config and *.toml  files, but it isn't evident to me what should be changed. So I was wondering if anyone has an easy fix.

Thanks!

[Anonymous]

@zk-ant ,

For npm run start...

Look for .env file, if it doesn't exist I pasted an example below. 

Add the following variable to your .env file:

PORT=3000

SHOPIFY_API_KEY="YOUR_SHOPIFY_API_KEY"
SHOPIFY_API_SECRET="YOUR_SHOPIFY_SECRET"
HOST="YOUR_TUNNEL_URL"
SHOP="my-shop-name.myshopify.com"
SCOPES=write_products

For npm run dev

Look for package.json and add PORT=3000 to dev script:

  "scripts": {
    "build": "npm run build:client",
    "build:client": "vite build --outDir dist/client",
    "debug": "node --inspect-brk server/index.js",
    "dev": "cross-env PORT=3000 NODE_ENV=development nodemon server/index.js --watch ./server",

Best,

Sam

[zk-ant]

The PORT is set in the .env alright, just that the env var gets overwritten somehow I guess. Not just PORT, but BACKEND_PORT and FRONTEND_PORT too.

[zk-ant]

ok, got it. I set BACKEND_PORT=3000 in the dev command, and now vite still serves it on a random port, but now the express app is listening on 3000

[zk-ant]

Now I see that in the current version of the template your solution should work, but my template was generated by the shopify cli, so it uses this template. Which overrides the PORT with the BACKEND_PORT if it's set.

[Anonymous]

@zk-ant ,

Sounds like you should set FRONTEND_PORT and BACKEND_PORT = 3000, see if that works.

[PlusApps]

It didn't work.

[Szymek]

as I found in README.md, we need to set up cloudflare. 😞