Unable to render static index file from express - node.js

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))

Related

How to serve static files in another folder with 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"));

Nodejs file direct access in browser

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.

Running node (Express) server and dist folder / adding js folder

I have created server using nodeJS where I adding dist folder created by webpack.
server.js
app.use(express.static(path.join(__dirname, "dist")))
There is js folder also including all js files.
How can I add also js folder in correct way in server file?
Thanks in advance.
__dirname will return a relative path for your nodejs project.
You can print path.join(__dirname, "dist") in console and make sure that this folder is exists.

How to access static files in node.js

I am working on node js, where I have the following directories: C:\wamp64\www\Scrapper. In the Scrapper folder, I have:
/Controllers/main.js
/Public/index.html
/server.js
What I did is, I have included the main.js in the index.html as:
<script src="/Controllers/main.js"></script>
Also, I have declared these two folders as static in node js server.js file which is located in the main directory i.e. /Scrapper. When I run the app, it says:
http://localhost:8080/Controllers/main.js net::ERR_ABORTED 404 (Not Found)
The way I declared the static files in server.js is :
app.use(express.static(__dirname + "/Public"));
app.use(express.static(__dirname + "/Controllers"));
app.use(body_parser.json());
I don't know what the problem is. All I want is to include the main.js file in the index.html. It's a client site script which should run within that folder.
For example you have declared a static folder like
app.use(express.static(`${__dirname}/assets`))
and inside assets, you have images folder
then you can access the files i.e.
localhost:8080/images/koala-1550238924102.jpg
and in your case you need to do this
localhost:8080/main.js
You can look in detail here.
app.use(express.static(__dirname + "/Public"));
app.use('controllers', express.static(__dirname + "/Controllers"));
Access files;
http://localhost:<port>/index.html
http://localhost:<port>/controllers/main.js
const publicStaticDirPath = path.join(__dirname, '../public');
app.use(express.static.(publicStaticDirPath));

express not sending static directory

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.

Resources