Search code examples
node.jsshopifyviteshopify-app

File serve in shopify app dev not working

I've created shopify app with node.js app template

npm init @shopify/app@latest

Folder structure is at the bottom

And run npm run dev It's ok for api endpoints.

What I wanna do is to serve static files. In fact, this is an express.js server and I created a static folder in web folder

app.use(serveStatic('static'));

But I can't access static files. I tried app.use(serveStatic("${process.cwd()}/static")). The above stuff is working on a normal express.js project. But it does not work with shopify cli and vite config.

Vite config is

const config = {
  test: {
    globals: true,
    exclude: ["./frontend/**", "./node_modules/**"],
  },
};

export default config;

enter image description here

Solution

  • I finally got it.

    I noticed that:

    1. It works if you were to load using localhost:PORT/path/to/static.file. You can print out PORT in your web/index.js.
    2. This simple middleware doesn't get triggered when requesting your static file through ngrok but it does get triggered by number 1 above.
    app.use((req, res, next) => {
  console.log("Backend hit!");
  next();
});

    That means the backend never got the static file request. My understanding is vite receives all the requests then proxies some of them to the backend using a config.

    The config Shopify gave is not proxying the static file request so you'll need to modify the proxy config.

    vite.config

    ...
export default defineConfig({
  ...
  server: {
    host: "localhost",
    port: process.env.FRONTEND_PORT,
    hmr: hmrConfig,
    proxy: {
      "^/(\\?.*)?$": proxyOptions,
      "^/api(/|(\\?.*)?$)": proxyOptions,

      // The next line is what I added
      "^/static/.*$": proxyOptions,
    },
  },
});

    web/index.js

    app.use("/static", express.static(`${process.cwd()}/public`));

    I'm mounting my static files on "/static" but feel free to modify the proxy line to suit your needs.