I have reactjs app that is serve via nodejs that I deploy to Kubernetes. However. it does not display the UI. I see 404 errors for js and css file (failed to load resource” . This does not happen when I test in localhost
I see the 404 trying to access-> https://mydomain/assets/index-GnSe1KR1.js
Here are my configuration.
In index. html file in the build folder
<code><script type="module" crossorigin src="/assets/index-GnSe1KR1.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-BpH2g-o5.css">
</code>
<code><script type="module" crossorigin src="/assets/index-GnSe1KR1.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-BpH2g-o5.css">
</code>
<script type="module" crossorigin src="/assets/index-GnSe1KR1.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-BpH2g-o5.css">
Google GKE ingress
<code>- host: mydomain.com
- http:
paths:
- backend:
service:
name: timesheet-service
port:
number: 80
path: /pmotimeentry
pathType: Prefix
</code>
<code>- host: mydomain.com
- http:
paths:
- backend:
service:
name: timesheet-service
port:
number: 80
path: /pmotimeentry
pathType: Prefix
</code>
- host: mydomain.com
- http:
paths:
- backend:
service:
name: timesheet-service
port:
number: 80
path: /pmotimeentry
pathType: Prefix
Node JS
<code>app.use(express.static(path.join(__dirname, "../../client/dist/")));
/*** server routes */
routes.push(new ProjectRoutes(app));
routes.push(new ActivityRoutes(app));
//all client routes
app.get(/^(?!/pmotimeentry/api).*$/, (req, res) => {
res.sendFile(path.join(__dirname, "../../client/dist/index.html"));
});
</code>
<code>app.use(express.static(path.join(__dirname, "../../client/dist/")));
/*** server routes */
routes.push(new ProjectRoutes(app));
routes.push(new ActivityRoutes(app));
//all client routes
app.get(/^(?!/pmotimeentry/api).*$/, (req, res) => {
res.sendFile(path.join(__dirname, "../../client/dist/index.html"));
});
</code>
app.use(express.static(path.join(__dirname, "../../client/dist/")));
/*** server routes */
routes.push(new ProjectRoutes(app));
routes.push(new ActivityRoutes(app));
//all client routes
app.get(/^(?!/pmotimeentry/api).*$/, (req, res) => {
res.sendFile(path.join(__dirname, "../../client/dist/index.html"));
});
Client dir structure
<code>client
dist
assets
index-Bph... .css
index-Diq.. .js
index.html
</code>
<code>client
dist
assets
index-Bph... .css
index-Diq.. .js
index.html
</code>
client
dist
assets
index-Bph... .css
index-Diq.. .js
index.html
Package.json
<code> "scripts": {
"dev": "vite ",
"build": "tsc && vite build",
"preview": "vite preview"
},
</code>
<code> "scripts": {
"dev": "vite ",
"build": "tsc && vite build",
"preview": "vite preview"
},
</code>
"scripts": {
"dev": "vite ",
"build": "tsc && vite build",
"preview": "vite preview"
},
Client router
<code>const router = createBrowserRouter([
{
path: "/",
element: <LandingPage />,
},
{
path: "/home",
element: <UserLayout />,
},
],
{
basename:"/pmotimeentry",
},
);
</code>
<code>const router = createBrowserRouter([
{
path: "/",
element: <LandingPage />,
},
{
path: "/home",
element: <UserLayout />,
},
],
{
basename:"/pmotimeentry",
},
);
</code>
const router = createBrowserRouter([
{
path: "/",
element: <LandingPage />,
},
{
path: "/home",
element: <UserLayout />,
},
],
{
basename:"/pmotimeentry",
},
);
I have tried adding the base path –base=”/pmotimeentry” to the build script in the package.json but no luck
My API has the path domain/pmotimeentry/api
The client has the path domain/pmotimeentry
Can you please have a look .
Thanks