I have an Express JS server, and have included a Vue.js 3 application in a separate folder.
After I've built the VueJS app, I'm trying to statically serve it. This works fine locally. However, when I was testing the static side on Render or on Ngrok, I can't view the UI, it fails to load the type="module" JS file and I get a 400 response.
It's odd since it works fine locally, and when I host it over Render / Ngrok, the CSS file seems to load fine, but just the JS file which causes the error
The Express is as follows:
// Using node-version 18
import express from 'express';
import path from 'path';
import { fileURLToPath } from 'url';
const app = express();
const PORT = process.env.PORT || 5000;
const dirname = path.dirname(fileURLToPath(import.meta.url));
const vueStaticMiddleware = express.static(path.join(dirname, 'client/dist'));
app.use(vueStaticMiddleware);
app.use('*', (req, res, next) => {
res.sendFile(path.join(__dirname, 'client/dist/index.html'));
});
app.listen(PORT, () => console.log(`Server running on PORT: ${PORT}`));
The folder structure is:
- client (Vue) /
- dist/
- assets/
- index-65bbd409.js
- index-159be68d.css
- index.html
- index.js (Express)
The client/dist/index/html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/images/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Vue App</title>
<script type="module" crossorigin src="/assets/index-65bbd409.js"></script>
<link rel="stylesheet" href="/assets/index-159be68d.css">
</head>
<body>
<div id="app"></div>
</body>
</html>
The error
I've tried changing the static end point and various other things, however, to no avail
Any ideas / thoughts on this?
Thanks
The issue was that if I'm using ngrok or Render to host it, the URL wasn't whitelisted in my CORs config. After whitelisting it, it resolved the issue!
It was hard to find the cause since there was no CORS error presented
