I am using the the express js framework with node js and in my server.js file , i have used
app.use('/api',router);
In my ejs file , when i use a script tag
<script src = main.js>
I get an error "Cannot get http://localhost:3000/api/main.js"
How can i include these files in the ejs
please help!!!
in app.js you have to add static folder directory access
app.use(express.static(path.join(__dirname, 'public')));
in public folder add your folders files
--public
----javascript
----css
----img
inside javascript add your main.js
and in ejs add
<script src = "javascript/main.js"></script>
You can use express.static middleware
app.use('/public', express.static('directory/containing/your/files'));
The parameter of express.static is the path to the directory containing all your files that you wish to make static (the path that you provide can be relative to the directory where you launch your node process, or an absolute path), the directory should be available in your file system.
Then you can require your resources like: <img src='/public/imagesA.jpg'>
The '/public' mount path is optional, but recommended
You serve static files through an included middleware in Express - express.static('folder/with/resources'). You do so by adding it to the middleware chain using app.use.
Let's say you want to serve your static files located in the local folder /dist through the public URL /static.
import express from 'express';
const app = express();
app.use('static', express.static('dist'));
Read more about it here.
Related
I understand how to return a file using express with:
res.sendFile(path.join(__dirname, 'fileName.html'))
And I understand how to serve up a folder using:
app.use('/customAPI', express.static('folderName'));
using the documentation here.
The folder with the UI is created using angular 4 build. So, it all goes into one folder creating a index.html and a bunch of *.bundle.html files.
However, I don't understand how to serve up a the UI after doing some logic. For example:
router.get("/", function (req, res) {
let myParam = req.query.whatever;
if (whatever) {
res.redirect('//google.com'); //this works fine
}
else {
//I don't know what to do here
app.use("/somePath", 'dist'); //won't work because what do I put in "somePath"?
res.sendFile(path.join(__dirname, '../../dist/index.html'));
//^ this only serves up the file but fails because it can't find the library files that index.html needs to load.
}
});
I've tried going down the road of trying to use res.render but I'm not 100% sure if that is what I'm looking for.
Question: How do I serve up a folder containing all ui information correctly
When you serve a specific path these are sending the content only for that path, for example an HTML with the interface, the HTML file can make calls to other files, like CSS, JS etc ...
You need to serve the static files in a public folder
app.use('/static', express.static(path.join(__dirname, 'public')))
All files in the static folder will be served in the url /static/filename
In the html of the path, you must include the resources of the static folder that you need
I am trying to create a file uploader which will store file in stored_images directory as shown below:
/project
/bin
/stored_images
/routes
/public
After the file has been saved here, I want to send url of the saved file to my front-end javascript. How can I get the url of file in stored in stored_images directory?? Or is there other better way to do this??
First tell express where to look for static files.
app.use(express.static('public'))
Then put you images folder in your public folder. Then the url to your images would be the path from within the public folder to your images.
For example /my_images/cool_pic.
I would like to serve html files at given URLs using only NodeJS, or a very lightweight and flexible other way. I've been able to serve those html pages using Express but there are things I don't like (the fact we must use a public folder and all the dependencies), and the external css/js just don't load.
I use something in the server.js file like :
app.get('/', function() { app.sendFile('index.html')});
And in the index.html file :
<link rel="stylesheet" href="style.css">
All the files are in the same folder.
In express you could you static middleware.
In the example below you define public directory to store it.
app.use(express.static(__dirname + '/public'));
Now you can put your style.css to this folder and it will be served as a static content.
More about middleware: http://expressjs.com/en/guide/using-middleware.html
I'm trying to create my first application using Mongo, NodeJS, Express and Sequelize.
If I use link(rel='stylesheet', href='http://localhost:3000/css/style.min.css')everything works fine, but, is it the right way?
How to get the app path (or something like) to use in layout and views files?
In your main file (probably app.js) you need to set your public directory - I usually name the directory "public," and you should put it in the app's root. Here's the code to do that:
app.use(express.static('public'));
Then, to serve your css folder, you can put it in the public directory and use the path /css/style.min.css.
For your jade files, create a folder called views in your app's root. Then, add this to your app.js.
app.set('views', __dirname + '/views');
Put all of your jade files in there. Now, if you have a layout.jade in there and you want to use it in index.jade, you can use the layout's path relative to the view directory to reference it, for example:
extends layout
block content
h1 stuff here
Please use an absolute path, so you dont include the server name
link(rel='stylesheet', href='/css/style.min.css')
Im using jade with express.
This is my express code for serving static files:
app.use(express.static(__dirname + "/frontend"));
And this is my jade code in layout.jade:
link(rel='stylesheet', href='/css/style.css')
script(src='/bower_components/angular/angular.min.js')
script(src='/app.js')
For some reason stackoverflow doesn't allow me to show my folder structure but I have every file mentioned here in my frontend folder located in the root directory.
I tried commenting out express.static and using the full path but that also doesn't work.
I'm getting the 404 error.
The above code you posted will expose the assets on /. To expose them on /frontend, you need to use the following.
app.use(express.static("frontend", __dirname + "/frontend"));
If you want to create a “virtual” (since the path does not actually exists in the file system) path prefix for the files served by express.static, you can specify a mount path for the static directory, as shown below:
app.use('/static', express.static('public'));
app.use('/frontend', express.static('frontend'));
link(rel='stylesheet', href='/frontend/css/style.css')