Hello 👋, Congratulations on developing your great shopify app using Remix. Now you want to deploy the app. Don’t worry, it is fairly easy process to deploy.

I will be focusing on deploying the app on own server, I will not be using the app platforms like fly.io or Heroku.

Get the project on the server

As a first step simply clone your project repository on the server or just copy the project files on to the desired folder.

Build the Remix Module

Firstly, you need to build the Remix module before it can be deployed onto the server. Open your terminal, change directory to the project directory and run following command.

npm run build

This command will set process.env.NODE_ENV to
production and minify the output for deployment.

The minified output will be stored in build directory.

Install Remix-Serve

The /build directory contains the module generated by remix which can be used with express, cloudflare workers, vercel, firebase and similar servers. Instead of configuring the server, I will use remix-run/express which is express based server. Install it with following command.

npm i express @remix-run/express

Now we can use serve our module, before we do that make sure you set up all the required environment variables.

Setting up env

You need to setup following env variables.
PORT
SHOPIFY_APP_URL
SCOPES
SHOPIFY_API_KEY
SHOPIFY_API_SECRET

You can specify the PORT & SHOPIFY_APP_URL as per your needs. You can get other environment variables by using following command.

npm run shopify app env show

This will list the remaining environment variables values which you need to setup.

Running the server

Once the environment variables are configured, we can create a server file. Create a new file named server.mjs

touch server.mjs

Add following code to the server.mjs

import { createRequestHandler } from "@remix-run/express";
import express from "express";

// notice that the result of `remix build` is "just a module"
import * as build from "./build/index.js";

const app = express();
app.use(express.static("public"));

// and your app is "just a request handler"
app.all("*", createRequestHandler({ build }));

app.listen(3000, () => {
  console.log("App listening on http://localhost:3000");
});

You can specify the port as per your need. Now we can serve the app with following command.

node server.mjs

Tada! Your shopify app is running now. You can use it as it is, or you can create reverse proxy via nginx and map a domain name to the app.