I'm trying to serve a vue.js single page app with a node.js server but I'm having an issue with some express middleware.
Basically I'm trying to serve two things right now. My index.html and a dist folder that holds all of my static files. On localhost my index.html is served correctly but I'm getting a GET error for my dist folder and can not find it in the sources tab.
I've used more or less this same line of code for many single page apps before to serve my static assets but for some reason with this set up it's not serving the dist folder.
app.use(express.static(path.join(__dirname, '/dist')));
Anyone with express experience know why this line isn't working?
You are using express.static incorrectly. By default, express.static will serve the content you have INSIDE of that dist folder.
What you want to do is this:
app.use('/dist', express.static(path.join(__dirname, '/dist')));
This will force express to serve those static assets under the '/dist' route.
Related
I understand that Express needs to be told where to serve static files from using something like server.use(express.static('public'); if all your static files reside in the public folder.
However there are static files in my app which MUST be served from the root of the site e.g.
http://example.com/ads.txt
http://example.com/sitemap.xml
http://example.com/app.webmanifest
I cannot create a separate route for each static file in the root folder because there can be many. When they are bundled up into the dist folder for deployment, they reside in the root of the site alongside the package.json file etc.
How can it be possible to serve the app's homepage at the route of '/' and also static files from that same route? e.g.:
server.use('/', express.static('/client'));
server.get('/', async (req, res) => {
// serve homepage here
})
var app = express()
app.use(express.static('folder_name'))
Or
app.use(express.static(__dirname + '/folder_mame'));
app.set('folder_name', __dirname);
According to official docs:
Serving static files in Express
To serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express.
The function signature is:
express.static(root, [options])
The root argument specifies the root directory from which to serve static assets. For more information on the options argument, see express static.
For example, use the following code to serve images, CSS files, and JavaScript files in a directory named public:
app.use(express.static('public'))
Now, you can load the files that are in the public directory:
http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html
Serving static files Express
I have these following files in my folder. I want to show the public folder from index.js using express. At first, I used app.use(express.static('public')) and it works on my localhost but when I deployed it it doesn't work. Can anyone show me how to do this?
(in case the pic doesn't work:
public folder(index.html,style folder,js folder)
.gitignore
.env
index.js)
files
Maybe this is an issue with relative pathing, try replacing your current code with this:
app.use("/", express.static(__dirname + "/public"));
At Plesk server there are nodejs and reactjs build on hit url the build run but when we hit the nodejs file url of js files it open directly on browser means nodejs files are not secure.
So, it sounds like you are using express.static(), yet the user is able to fetch your server files that are not meant to go to the client. That apparently means that you've pointed express.static at a directory that contains your server files. Instead, you need to point express.static() at a directory hierarchy that ONLY contains files meant to be sent to the client. That means it has to be a separate directory from your server files and it has to not be above your server files directory.
There are many possible places to put it. Here are a couple ways to organize things:
projectDirectory
serverFiles
server.js
clientFiles
index.html
login.html
Then, when running server code from the serverFiles directory, you would use an express.static() like this:
const path = require('path');
app.use(express.static(path.join(__dirname, "../clientFiles")));
Or, you can do it like this:
projectDirectory
serverFiles
server.js
clientFiles
index.html
login.html
const path = require('path');
app.use(express.static(path.join(__dirname, "clientFiles")));
The idea is that the clientFiles directory hierarchy contains only client-side files and express.static() by default will not allow ../ syntax in the URLs to go above it.
I working on Angular application, where I am trying to server the build files from my Angular application through the dist directory in my express. To do this I copy the files generated by ng build and paste them into dist folder of express.
My dist folder looks like below
I am using the following code to serve the index.html file
this.app.use(express.static(__dirname + '/dist'))
But seem to be getting "Cannot GET /" error
Similarly if I do
this.app.use(express.static(__dirname + '/public'));
it serves the html in the public folder.
As far as my understanding, you can serve static from any folder in express. I am not sure if I am missing something here.
Make new directory ./dist/www and move your files except server.js to here.
this.app.use(express.static(__dirname + '/www'));
It looks like you should replace
this.app.use(express.static(__dirname + '/dist'))
with
this.app.use(express.static(__dirname))
I have a test node.js/angular app that uses the yeoman angular-generator. However, I am having problems serving back the rendered .js files from the original .coffee files.
The js files are being rendered and saved to APP_ROOT/.tmp, but any requests for the js files results in a 404.
What is needed (within the Gruntfile?) to allow for the js files to be returned?
Thanks for the help.
Things are working now. The end fix was something was to add an additional static middleware to the app.js file, which was something I had already tried, but it is possible that the path was off causing the fix not to work.
app.js
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.static(path.join(__dirname, '.tmp')));
When I first added ~line 2 the app.js folder was moved into the app_root/server folder with the following
app.use(express.static(path.join(__dirname, '..', '.tmp')));
which for some reason wasn't working. That teaches me for moving files around