File serve in shopify app dev not working

user_11478858 0
Viewed 109

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

shopify-app shopify vite node.js
1 Answers

It seems there's another way (built in) to serve static files within the shopify app node template.

Create a public dir inside the frontend dir, then put your assets files & directories in it.

Example : if you have a structure like below

web/
└── frontend/
    └── public/
        └── css/
            ├── bootstrap.min.css
            └── bootstrap-theme.css

Then to get the file bootstrap.min.css, use the url /css/bootstrap.min.css.

More generally the file url will be the file path without /public.

user_146489970
Related