This guide walks you through deploying your Shopify app on a custom domain using Nginx and pm2.

Prerequisites:

  • A server with Nginx installed
  • Node.js and npm installed
  • A Shopify app created and configured

Steps:

Configure Nginx:

  1. Add the provided code snippet to your Nginx configuration file. Replace <SUB_LOCATION_OF_YOUR_APP> with the actual sub-location where your app will be accessible on your domain (e.g., /app).
  2. This code block acts as a reverse proxy, forwarding requests to your app running on port 5000.
  3. Restart Nginx after making the configuration changes using sudo service nginx restart.
location /SUB_LOCATION_OF_YOUR_APP {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $host;
    proxy_pass http://127.0.0.1:5000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";

    #make sure the buffers are enough to handle session data
    proxy_buffers 8 256k;
    proxy_buffer_size 256k;
    proxy_busy_buffers_size 256k;
}


Install and Configure pm2:

  1. Install pm2 globally using npm install pm2 -g.
  2. Initialize pm2 with pm2 init.
  3. Update the generated pm2 configuration file (app.config.js) with the following details:
  4. Replace YOUR_APP_NAME with a descriptive name for your app.
  5. Set the script property to npm start to start your app using npm.
  6. Define environment variables under the env property:
  • NODE_ENV: Set to "production" for your production environment.
  • SHOPIFY_APP_URL: Replace with https://YOUR_DOMAIN/SUB_LOCATION_OF_YOUR_APP.
  • SHOPIFY_API_KEY: Replace with your Shopify API key.
  • SHOPIFY_API_SECRET: Replace with your Shopify API secret.
  • SCOPES: Replace with the required scopes for your app (found in shopify.app.toml).
  • PORT: Set to 5000 to match the port configured in Nginx.
module.exports = {
    apps: [
        {
            name: "YOUR_APP_NAME",
            script: "npm start",
            env: {
                NODE_ENV: "production",
                SHOPIFY_APP_URL: "https://YOUR_DOMAIN/SUB_LOCATION_OF_YOUR_APP",
                SHOPIFY_API_KEY: "CLIENT_ID",
                SHOPIFY_API_SECRET: "CLIENT_SECRET",
                SCOPES: "SCOPES", //from shopify.app.toml
                PORT: "5000",  //same port as configured in nginx
            },
        },
    ],
};


Start the Application:

Start your app using pm2 and restart nginx: pm2 start app.config.cjs

sudo service nginx restart

If you encounter errors about ESM modules, rename the configuration file to app.config.cjs.

Verify Functionality:

Check for errors in the pm2 logs using pm2 logs.

If everything works correctly, you should see your app's default page when you visit https://YOUR_DOMAIN/SUB_LOCATION_OF_YOUR_APP.

Update Shopify App Settings:

In your Shopify Partners Dashboard, update the App URL to https://YOUR_DOMAIN/SUB_LOCATION_OF_YOUR_APP.

Update your app's redirect URLs to https://YOUR_DOMAIN/SUB_LOCATION_OF_YOUR_APP/auth/callback and any other relevant paths.

Add basename to vite.config.ts file in remix config:

const isProduction = process.env.NODE_ENV === "production";
export default defineConfig({
    ...
    remix({
        basename: !isProduction ? "/" : "SUB_LOCATION_OF_YOUR_APP",
        ignoredRouteFiles: ["**/.*"],
    }),
    ...
}) satisfies UserConfig;


Add base to vite.config.ts file in main config:

export default defineConfig({
    ...
    base: !isProduction ? "/" : "SUB_LOCATION_OF_YOUR_APP/build/client/",
    ...
}) satisfies UserConfig;


Test the Integration:

Log in to your demo store and verify that the app loads from your custom domain (https://YOUR_DOMAIN/SUB_LOCATION_OF_YOUR_APP) instead of the Cloudflare tunnel.



Optional Nginx Configuration (for Large Headers):

If you encounter issues with large HTTP headers in Nginx, add the following lines to your server block:

http2_max_field_size 256k;
http2_max_header_size 256k;


This increases the allowed size for HTTP headers and fields.

By following these steps, you should successfully deploy your Shopify app on your custom domain using Nginx and pm2.

Take your Shopify store to the next level. Let our team develop custom apps that boost sales, automate tasks, and enhance the customer experience.

Contact Sales