This is my folder structure:
root
admin
index.html
bootstrap.css
...
...
app.js
when I'm running
node app.js
using Express 4, routing works correctly but I don't know how to view this file:
http://localhost/admin/index.html
it seems like it searching for this route...
so I tried to render the file to the client and it works but then all its css and script doesn't.
What am I doing wrong?
Please look at:
http://expressjs.com/en/starter/static-files.html
And use:
app.use(express.static('root'));
Express is a framework and provide the template structure, so it's good to put the files of frontend in the folder views, not in static. Static is more used for import libs, js, css.
In you case, put the index.html in the views folder, and the route can be somethink this:
res.sendFile("index.html");
Docs
Related
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.
This question already has answers here:
How to include scripts located inside the node_modules folder?
(11 answers)
Closed 4 years ago.
This is for a library, and I cannot necessarily make this call:
app.use('/node_modules', express.static('node_modules'));
I have to do this a different way. Because I have no control over how the server serves static assets. Say I have this structure:
project/
node_modules/
xxx/
asset.js
index.html
app.js
and in app.js I have:
const express = require('express');
const app = express();
app.use('/docs', (req,res){
res.render(require.resolve('./node_modules/xxx/index.html'));
});
app.listen(3000);
the problem is since the server is running from the current root directory, the index.html file won't have the right path to pick up the assets.js file.
For example, in index.html if base is set like so:
<base href="/">
that won't work. I could try using:
<base href="node_modules/xxx/">
Another solution would be to bundle everything together so that the index.html file doesn't need to make any requests for static assets, but I am looking for a good solution for how make sure the path resolution works somewhat generically. For example, if the express server is not launched in the project root, but another subdir.
Suppose your file is in the node_modules with path like './node_modules/bootstrap/dist/'
You can create a static route like '/file'
You can use:
app.use('/file',express.static(__dirname+'/node_modules/bootstrap/dist/'));
Include script like this:
<script src="/file/bootstrap.min.js"></script>
Ok, learning here. Installed the default vue-cli app on AWS. I do a npm run build. When I launch the default index.html I'm served a blank page. If I go into dist, there is another index.html, that serves links to js files, but still a blank page.
I'm guessing webpack wants me to launch an index.html, but don't see how I can hit that with a browser. No errors anywhere. But no Hello World either. thanks for help.
What I'm seeing in the browser:
<!DOCTYPE html><html><head><meta charset=utf-8><title>hello-world</title><link href=/static/css/app.87e65e7c83fb67c04e58d4461a7fd8e8.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/static/js/manifest.fa7eecfb52900d1cfb0a.js></script><script type=text/javascript src=/static/js/vendor.9baeef453ba99a70f46a.js></script><script type=text/javascript src=/static/js/app.cdfbb21001bbc43de4bc.js></script></body></html>
When you npm run build Webpack should produce an index.html file along with a static/ directory that contains all of your javascript and css. The link to static/ is an absolute link (i.e. http://example.org/static). When you try to open index.html as a file, the browser will look for the /static/ folder on the root of your file system, which of course it won't find.
To run it locally you need to fire up an http server locally. One option is to cd into the directory with a terminal app and run python -m http.server. Then go to http://localhost:8000/. That should work because the root of the directory tree will be the folder from where you are serving it.
Getting it running on AWS S3 will be a matter of making sure you get the static directory in the right place and get the links pointing to it. Hard to say exactly how without knowing details of how you are organizing the site in your bucket.
You can change how the static folder is saved in the webpack config if you need to: https://vuejs-templates.github.io/webpack/static.html
You will find a folder named /dist in your project directory.Just point the index.html file within the /dist directory and rest will work fine I think. I have just done that and it's working fine.
Hope it will work.
Thanks.
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.
How is the file structure like when using Chaplin with node.js?
I've downloaded the brunch-with-chaplin and that seems pretty straight-forward, but where do I place my node.js files?
I have my app.js file for node, but where do I place it and how do I launch my Chaplin app with it? I wouldn't like to mix the server side files with chaplin files..
They should be either placed directly in the root e.g. I typically have a server.js file which resides in the root. Then optionally you would have sub-directories such as controllers, models, routes etc. depending on how you decide to structure your solution.
Here's an example of a project I'm working on right now.
/app - this contains you front-end application logic i.e. chaplin
/controllers
/lib
/models
/views
application.js
routes.js
/controllers
/models
/routes
server.js - node.js main, starts up express/connect etc.