This question already has answers here:
How to server specifc static files with express.js
(11 answers)
Closed 4 months ago.
I've been looking at some of the answers on this forum but nothing seems to work.
My main HTML file refers to the style sheet as follows:
<link rel="stylesheet" href="/styles/main.css">
I have an index.js file with the following code:
const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
res.sendFile('index.html', {root: __dirname});
});
app.listen(port, () => {
console.log(`Now listening on port ${port}`);
});
Finally, this is my folder structure:
I'd really appreciate some guidance on this
FIXED!
I needed to add the following code to my index.js file before the "app.get" portion:
app.use(express.static(__dirname + '/'));
NOTE: re-starting the LocalHost instance is also necessary after modifying index.js file
You can serve static files using express.static, like this:
app.use('/styles', express.static('styles'));
app.get('/', ...
See this documentation, https://expressjs.com/en/starter/static-files.html .
Related
I'm trying to create a nested route inside my nextjs project, but i'm receiving a 404 page not found when trying to request the page.
I have a route named /dashboard/repository/blender where blender is a dynamic name that the user can input and that works fine.
But the next step is then to create a subpage for that dynamic route which is named tags, and that's where I receive the 404. (/dashboard/repository/blender/tags)
Here's a screenshot of what i've tried to achieve the tags nested routing
Secondly I have also tried doing the following
What can I do to achieve this ?
Try that structure please
dashboard (folder)
-repository (folder)
--[blender] (folder)
----tags.tsx (file)
example urls
/dashboard/repository/blender/tags
/dashboard/repository/surrender/tags
...
In your component, you can get it like below
tags.tsx
import { useRouter } from 'next/router'
const C = () => {
const router = useRouter()
const { blender } = router.query;
console.log(blender)
}
Solved it with
- /dashboard/repository/[repository]/index.js
- /dashboard/repository/[repository]/tags.js
I'm trying to use module federation (webpack 5) beetween nextjs applications.
I started from this example (two nextjs applications) and everything works as expected. From my point of view the problem is that this works only if i have both app on the same host.
The relevant webpack configuration part on next.config.js is below (the same in the other app)
....
remotes: {
next1: isServer
? path.resolve(
__dirname,
"../next1/.next/server/static/runtime/remoteEntry.js"
)
: "next1",
},
...
If i just remove the server configuration it doesn't works.
It is possible to use module federation between nextjs app without configure the remote server by folder path and reference the remote app only by url ?
It is possible, but it won't work with SSR. Just leave the remote with the global for client side:
// next.config.js
....
remotes: {
next1: "next1",
},
...
Create your component and import the remote:
// component.js
const Component = (await import("next1/component")).default
export default Component
And finally in your page, lazy load your remote component with SSR disabled:
// mypage.js
import dynamic from 'next/dynamic'
const RemoteComponent = dynamic(
() => import('../components/component.js'),
{ ssr: false }
)
const MyPage = () => (<RemoteComponent />)
export default MyPage
There's a working sample here: https://mf-shell.vercel.app/
And the code: https://github.com/schalela/mf-nextjs
I have a html file, being generated by a third party library that I need to serve on a route in a node server.
The html file and the related css files are generated in a folder called public having the following structure.
src -|
| - public -|
| | - css -|
| | | - css-file.css
| | - index.html
| - server.js
The html file refers to the css file as
<link rel="stylesheet" href="css/css-file.css" />
I cannot change this, as the index.html and the related css file is being generated by a third party library.
In the server.js file, I have the following code
app.use(express.static(path.join(__dirname, './public')));
app.get('/path/one',(req, res) => {
res.set({'Content-Type': 'text/html'});
res.sendFile(path.join(__dirname, './public/index.html'))
}
app.get('/pathTwo', (req, res) => {
res.set({'Content-Type': 'text/html'});
res.sendFile(path.join(__dirname, './public/index.html'))
}
The css file gets picked up on /pathTwo, but does not get picked up on /path/one. I am not able to figure out why.
Edit
One thing that I notice from the logs
For /path/one, node is looking for the file at the location /path/css/css-file.css and not at /css/css-file.css
From express docs for express.static
The function determines the file to serve by combining req.url with the provided root directory.
Thanks in advance for your help
WORKAROUND
Found a workaround for this.
Looking at the logs and the network calls, for the css, the following call is being made for fetching the css file
GET /path/css/css-file.css
This call fails with a 404, resulting in the css not being used for the html.
I added a new route in the server, as below
app.get(`path/css/:fileName`, (req, res) => {
const fileName = req.params.fileName;
const filePath = path.join(__dirname, `./public/css/${fileName}`);
res.set({'Content-Type', 'test/css'})
res.sendFile(filePath);
}
This returns the CSS file from the desired path, and ultimately being used by the HTML file.
This seems to be just a workaround, and not a solution from within express.static.
Hope that someone would provide a solution here.
Thanks in advance!!
I am learning to use ejs, express, node js. I am having probling my style sheet to my header here is my code and here is a . I am using header and footer as include. Here is my
My app.js-
const express = require("express");
const bodyParser = require("body-parser");
const ejs = require("ejs");
const app = express();
app.set("view engine", "ejs");
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(express.static("public"));
app.get("/", function(req, res) {
res.render("home");
});
app.listen(3000, function() {
console.log("Server started on port 3000");
});
2 things to note here
style.css is an external css file. So you dont need style tags inside that file. It should only contain the css.
In your express app, you have to mention the public directory from which you are serving the static files. Like css/js/image
it can be done by
app.use(express.static(__dirname + '/public'));
assuming you put the css files in public folder from in your app root. now you have to refer to the css files in your tamplate files, like
<link href="/css/style.css" rel="stylesheet" type="text/css">
Here i assume you have put the css file in css folder inside your public folder.
So folder structure would be
.
./app.js
./public
/css
/style.css
close head tag appropriately
So I've built a site in my directory and it can call all the stylesheets I made up just fine but when I create a local host it posts the html without any of the stylesheet. So the node would look like this
app.listen(PORT, function() {
console.log("App listening on PORT " + PORT);
});
And my html like this
<head><link href="custome.css" rel="stylesheet"></head>
<body> /snip </body>
So when ever I open up the local host at PORT it's blank.
You should serve static files. You should give more detail about the issue.
If you're using something like express.js, you can do something like this;
const fs = require('fs');
app.get('/custome.css', function (req, res) {
res.send(fs.readFileSync(__dirname+'/custome.css'));
});