Setting HOST environment variable with anything other than a legitimate host prevents the server from running

[neverstew]

What version of Remix are you using?

1.4.0

Steps to Reproduce

1. Set HOST envrionment variable to anything that is an invalid hostname. An example: http://localhost:3000
2. Run the server

Expected Behavior

The server to run as usual.

Actual Behavior

Error: getaddrinfo ENOTFOUND http://localhost:3000
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (node:dns:71:26) {
  errno: -3008,
  code: 'ENOTFOUND',
  syscall: 'getaddrinfo',
  hostname: 'http://localhost:3000'
}

[neverstew]

FWIW - I think this is just a documentation issue. There's nothing about reserved environment variables that the server runtime relies on etc.

[TheRealFlyingCoder]

I have hit this as well, and there might be a work around but just wanted to mention:

I require the dev server to run on localhost:3000 but have the HOST=https://my-ngrok-url, because any of my OAUTH callbacks need to go via the https tunnel address.

Previously HOST wasn't used by remix dev but PORT was, which meant you could change the dev port freely while still sitting on localhost.

Not sure what the solution here is, or if it is just documentation / workarounds

[TheRealFlyingCoder]

So just an update on my comment here, I think @mcansh commented then retracted as well.

My use of HOST wasn't necessary, just the default word you'd pick to set your environments HOST... I can bypass my problems by simply switching to INSTANCE_URL or something similar.

I think HOST and PORT make sense as they are, as long as there aren't any actual use cases where HOST is required elsewhere.

Maybe just add a regex check on the HOST variable first to throw a readable error 'Please set a valid hostname in the HOST variable (link to doc)` and then include mention of HOST and PORT specifically in the docs like @matt-l-w said?

[ElMatella]

Hey, I'm running on the exact same problem as @TheRealFlyingCoder while building a Shopify APP.

The shopify CLI rewrites the HOST variable into the .env file when running with an ngrok generated URL. I'm not saying that this is a good move from the shopify team. However, it could be cool if we could just add a parameter into remix.config.js to override this environment variable like:

module.exports = {
  serverConfiguration: {
    port: 3000, // default: process.env.PORT || 3000
    host: 'localhost', // default: process.env.HOST || 'localhost'
  }
}

This way, we could keep the current way of how it's working while enabling to use a different value than the HOST environment variable.

Currently, the workaround I found was to overwrite the process.env.HOST variable directly into remix.config.js:

process.env.HOST = '0.0.0.0'
module.exports = {
  ...
};

[edlaver]

Following up on @ElMatella's comment, I'm trying to get a basic Remix app working with the new Shopify v3.0 CLI.

After moving the standard Remix template beneath a 'web' subdirectory (as detailed at: https://shopify.dev/apps/tools/cli/migrate#step-1-migrate-your-embedded-app), and adding the process.env.HOST change to remix.config.js identified by @ElMatella, I also had to change the shopify.web.toml file that was in the ./web folder to be type="frontend" instead of type="backend".

The yarn dev command from the root folder then worked for calling the v3.0 CLI shopify app dev command and doing the ngrok setup to expose the Remix app with the correct port. 🚀

I'm in the process of porting this starter app (https://github.com/WillsonSmith/shopify-remix-app) over to match the default Shopify node app template (in terms of functionality), and will then add to GitHub. Hopefully can make it a Remix stack as well!

[tylerhellner]

Hey @edlaver, did you ever figure out a solution beyond rewriting process.env.HOST in remix.config? I too am porting a Remix app into Shopify v3.0 CLI now that they bought the framework. Have there been any developments in this area in the last 5 months?

[edlaver]

Hey @edlaver, did you ever figure out a solution beyond rewriting process.env.HOST in remix.config? I too am porting a Remix app into Shopify v3.0 CLI now that they bought the framework. Have there been any developments in this area in the last 5 months?

Hi @tylerhellner, not as far as I know. I just added:

process.env.HOST = "localhost";

before the module.exports section in the remix.config.js file and it seemed to work fine.

I think there have been some improvements in the CLI which may make life easier around this now, as I think you can do a lot more dev just on localhost without requiring an ngrok tunnel.

I made a fair amount of progress with my remix based Shopify app, but ended up parking it and moving over to a React Router 6.4 based app instead, using Gadget.dev as my backend.

The reason for this was the session auth stuff where Shopify want you to get a fresh token for each and every request to the Shopify API, and this felt a bit hacky with Remix as I ended up having to implement a service worker to fetch a token from the AppBridgeContext. (see also: https://github.com/remix-run/remix/discussions/2422#discussioncomment-3291913)

It was kind of working and I learnt a lot, but I couldn't keep up with Shopify changing their template and was just wasting time trying to showhorn Remix in instead of working on my app!

With the latest React Router you get most of what I like from Remix anyway, and Gadget gives you a nice serverless backend so I could just get on focus on building my app. But your milage may vary.

Hopefully with the Remix team integrating with Remix we'll get a first class Remix based app template! There are some decent sounding Next based templates coming out in the community as well from what I've seen on Twitter.

[brophdawg11]

I agree this is just a docs issue since http://localhost:3000 is not a valid hostname. I added a section on this in https://github.com/remix-run/remix/pull/7065.

I know Shopify released a bunch of updates for the app template in the recent Editions, so if there are still issues with hostnames in a Remix + Shopify app, please open new issues for those. Thank you!

[owlyowl]

Following up on @ElMatella's comment, I'm trying to get a basic Remix app working with the new Shopify v3.0 CLI.

After moving the standard Remix template beneath a 'web' subdirectory (as detailed at: https://shopify.dev/apps/tools/cli/migrate#step-1-migrate-your-embedded-app), and adding the process.env.HOST change to remix.config.js identified by @ElMatella, I also had to change the shopify.web.toml file that was in the ./web folder to be type="frontend" instead of type="backend".

The yarn dev command from the root folder then worked for calling the v3.0 CLI shopify app dev command and doing the ngrok setup to expose the Remix app with the correct port. 🚀

I'm in the process of porting this starter app (https://github.com/WillsonSmith/shopify-remix-app) over to match the default Shopify node app template (in terms of functionality), and will then add to GitHub. Hopefully can make it a Remix stack as well!

Hi Ed, Did you ever get client/server working with ngrok?

I'm running up my first remix app template and trying to understand how the dev experience might work. I've based it on Shopify's Remix App template and the grunge stack in that I deploy in to AWS for the server.

I'm trying to think of a better dev experience than bundling a lambda and deploying it each time a server change is needed.

[jainml151170]

Hi Developers,

I have create a shopify app. and setup on AWS server but when i test my app then getting me this error. 403 Forbidden nginx/1.18.0 (Ubuntu)

Can any body help me how can i fix this.

[DominickMuniz]

I'm getting the same errors as @jainml151170 on my app. This seems like an issue with the app template and lacks documentation on how to correct it. Anyone solve this server issue when deploying shopify apps recently?