Need Help: Node.js Shopify App Setup on Replit (HTTPS + CSP Issues)

I already have a Node.js/Express project running on Replit, but I am struggling with the setup for Shopify integration. The app builds fine, but inside Shopify admin it only shows as a static frame (like an image) and JavaScript does not run.

Here are the issues I am facing:

  1. HTTPS setup → I set HTTPS=true in .env, but I am not sure if additional SSL configuration is required on Replit.

  2. Port binding → I want to confirm the correct way to use process.env.PORT so the app binds to Replit’s assigned port.

  3. Content-Security-Policy (CSP) → Shopify requires frame-ancestors ``https://admin.shopify.com`` https://*.myshopify.com, but I am not sure how to properly add my Replit public URL to CSP headers.

  4. NGINX config → On VDS I used NGINX, but on Replit I assume it’s not needed. Should I remove it completely?

:backhand_index_pointing_right: My goal: Run the app fully on Replit with HTTPS enabled and make it load correctly inside Shopify iframe.

If anyone has experience with Shopify apps on Replit, I would really appreciate guidance on the correct .env setup, CSP headers, and whether NGINX is required or not.

Thanks in advance!
Kasım

Hey Kasım, welcome!

You don’t need NGINX or custom SSL on Replit. Replit already gives you HTTPS on your public URL, so just run a normal Express server.​

  1. Make sure your app listens on Replit’s port and on 0.0.0.0:
const PORT = process.env.PORT || 3000;

app.listen(PORT, '0.0.0.0', () => {
  console.log(`App running on port ${PORT}`);
});

  1. You don’t need to create an HTTPS server or add cert files in Node. Just use the normal app.listen as above and access the app via your Replit URL, which is already https://....​

3.CSP / frame-ancestors for Shopify

For an embedded Shopify app, you must allow Shopify to frame your app with frame-ancestors https://admin.shopify.com https://{shop}.myshopify.com

Check this Set up iframe protection

4.On Replit, you can remove NGINX completely. Just run Node/Express directly. Replit acts like a reverse proxy for you

1 Like

Hi thanks mate replit ai done all himself but i think i need help about an thing