I am trying to access a folder in my app that contains a few .js controller modules.
in the head of one of my .html files I have this script declared:
the problem is when the app is running, the application seems to know what the current path is, so the path to my script is not relative to the actual file system, it is relative to the current path of the app, which I might say is very strange.
So, the quick fix would be to easily specify the root of my application, since fancy_scripts is just one folder down from the root.
the following doesn't work, because of the problem I mentioned above
<head>
<script type="text/javascript" src="../fancy_scripts/userHomeController.js"></script>
</head>
but there has to be a way to specify the global root of the app with something like a double slash "//"
<head>
<script type="text/javascript" src="//fancy_scripts/userHomeController.js"></script>
</head>
(the above doesn't work either, // is the root in MS Windows (I think), but not an Express app) this is a straightforward problem, with I hope a straightforward solution. There might be a better way to do things however.
I have these 3 lines of code already:
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.static(__dirname + '/fancy_scripts'));
app.use('/fancy_scripts', express.static(__dirname + '/fancy_scripts'));
When using express, the path will be routed through one of your declared handlers or via the static module if you've set that up. Normally Express is configured to use static and to map it to your applications public folder. When using the express-generator that folder is located at <approot>/public/. So in order to access something like this:
<head>
<script type="text/javascript" src="/fancy_scripts/userHomeController.js"></script>
</head>
You'll need to put userHomeController in <approot>/public/fancy_scripts/userHomeController.js
Related
My routes are configured in app.js. The /users route works as expected except when rendering express layouts I cannot access the css files located at ./css/style.css
If I open a page using the /users route, I can see it's looking for /users/css/style.css but I thought setting the directory to static would override this?
app.use('/', require('./routes/index'));
app.use('/users', require('./routes/users'));
app.use(express.static('css'));
First of all, what app.use(express.static('css')); does is to serve statically the files starting from the given path, in this case css.
A good practice is to create a folder called public and use it to serve it's inner files statically. So your static folder should be like this:
-public
-css
-style.css
and your app.js should have app.use(express.static('./public'));
Now, another problem you may be having is the way you cast the paths (url) to load certain files.
Let's say you request http://localhost:PORT/users and the served HTML loads a stylesheet using <link rel="stylesheet" type="text/css" href="PATH">.
You could write the PATH in 2 ways.
css/style.css
/css/style.css
The difference is that the first method will search for the file relative to the path you're already in (e.g http://localhost:PORT/users/css/style.css). The other method will get such file using the 'domain' you are already in as a starting point (e.g http://localhost:PORT/css/style.css.
Hope this helps c:
I figured it out. Added this to my app.js file:
// GET /static/style.css etc.
app.use('/users', express.static(path.join(__dirname, 'public')))
More information here if needed: http://expressjs.com/en/api.html
I'm trying to load assets to my EJS file using express and it does not work. I just get message
Cannot GET /assets/main.css
Even I made loader in my main app:
app.use(express.static(path.join(__dirname, './assets')));
and after printing the path I see that its correct and the files exsists. So after using
<link href="assets/main.css" rel="stylesheet"> I can't reach the file. Where the problem could be?
See Serving static files in Express.
Right now, your app.use(...) statement is saying: I want the directory ./assets to be served whenever I navigate to my app, in other words, when I open my browser to http://localhost, serve whatever is in the folder ./assets.
You are then trying to access the file main.css at http://localhost/assets/main.css. It isn't there, it's at http://localhost/main.css.
You have 2 options:
Change your <link> tag to point to where the asset actually is:
<link href="main.css" rel="stylesheet">
Change your app.use() to host the ./assets folder at a different endpoint:
app.use('/assets', express.static(path.join(__dirname, './assets')));
I 'm a beginner of Node.js development,
Now I try to use bootstrap framework in my first Express web app.
I use
npm install bootstrap
to download the files,and it seems that npm puts them in my node_modules folder.
My question is how can I refer to the bootstrap files in my views in express?
I know a typical way is copying the bootstrap file into the public folder. So my html files can find them. But I don't think this is a good idea.
Thank you.
You need to use in your server.js:
app.use(express.static(__dirname + '/node_modules/bootstrap/dist'));
to define a static resourse and then use:
<script language="javascript" src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
I found a similar question. In which the solution is explained better by #augusto-goncalves. His solution works for me. It is similar to the solution of #victor-behar but more elaborated and clears confusion.
You have to reference it in the <script> and <link> tags in the header or at the bottom of your main script.
If you're using express, you're probably using templating. To use it in your header part or in your main template (depending on how you've managed your views) like :
<script language="javascript" src="node_modules/bootstrap/.../bootstrap.min.js"></script>
and
<link rel="stylesheet" href="node_modules/bootstrap/.../bootstrap.min.css"/>
This works only if you didn't moved your files with a gulp or a grunt task
There's also a way to transpile scss in express using node sass middleware, for example https://github.com/sass/node-sass-middleware.
That way you can override bootstrap scss. You can do the same for JS with webpack: transpile client-side js and then include the bundle.js in your frontend.
I'm using the Connect static middleware for Node.js in order to serve static assets in a web app I'm building. However, occasionally it fails to serve a static file, and instead sends the request through to my own server code, which looks like this:
var app = connect();
app.use(connect.static('public'));
app.use(function(request, response) {
var pathname = url.parse(request.url).pathname;
console.log(pathname);
...
});
So, in an ideal world, this code only logs the request if the static middleware doesn't catch a request to a static file first.
My directory structure in public looks like this:
public/
javascripts/
application.js
lib/
jquery-2.0.3.min.js
stylesheets/
screen.css
And in my html view, i'm grabbing these assets like so:
<script type="text/javascript" src="/javascripts/lib/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="/javascripts/application.js"></script>
<link rel="stylesheet" href="/stylesheets/screen.css" />
Connect has no trouble grabbing the /javascripts/application.js and /stylesheets/screen.css files, but it fails to fetch my jquery file in /javascripts/lib/, and this request is passed on to my server code, where the middleware should have caught and rendered it.
Clearly there's some sort of problem with Connect fetching the file from the subdirectory lib/, because I've already checked the file permissions on jquery-2.0.3.min.js and they are exactly the same as those on application.js.
Maddeningly, however, this bug appears to manifest itself entirely randomly. I'll start the server and it'll have the problem, but then when I restart the server it'll be gone. Then after making some unrelated change (I'm talking unrelated as in changing the CSS file slightly) on the app I'll start up the server and there it is again, and the error will remain and then go away after a few more restarts without any change to the code base.
As such, this is proving to be an incredibly difficult one to reproduce. If anybody has run into anything like this before, or has any idea what the problem might be, I would really really appreciate it.
If it helps at all, the nearest I can pinpoint the start of this error is this commit, in which I broke up an ejs template I wrote into partials to reuse the header and footer. I can't for the life of me tell how this might have started my problem, but maybe it might help someone diagnose the issue.
So I've been trying to access a local js file within my ejs template but I can't figure out on how to do this.
I've tried creating a public folder and then add the files in there, and then this :
app.use(express.static(path.join(__dirname, 'public')))
But it keeps saying that the files are not found.
Can someone please explain me how to do this?
The template is nothing special and the rest is a simple express setup.
My scripts are in /views/scripts but it seems impossible to access those.
app.use(express.static(path.join(__dirname, 'public'))) //use the following code to serve images,CSS & JS files in a public folder.
so the folder structure for front-end will be like this...
public
---js
----javascript1.js
----javascript2.js
---css
----css1.js
----css2.js
---images
----img1.js
----img2.js
change the second script tag to :
<script type="text/javascript" src="/js/javascript1.js"></script>
For more details of express.js static-files