I created a node server public/image folder to store my image file uploads. I can upload to the folder and store the url in the postgresql table with that users id with no problem. However, when I fetch that image url from the the database, I get the url but the browser always says "cannot get /...". Im using react to fetch the json response and add the image url property to the src in an avatar. Please help. I don't understand why. I'm using the app.use middelware below:
app.use(express.static('public')) app.use('/images', express.static('images'))
This is the image in the folder:
This is the avatar where I add the src props.
Here is the URL inside the browser react tools
in case you're getting a CORS error, you should use this:
var cors = require('cors')
const app = express()
app.use(cors())
app.use(express.static('public'));
you can access it with you're specified port:
http://localhost:PORT/filenameWithExtension
Related
I am hosting React app on Netlify and NodeJs server on Heroku.
The image is hosted on the server directory, in an "image" folder..
// Build the image path
const file = req.file ?
req.protocol + '://' + req.get('host') + '/' + req.file.path
: null;
The code above is building the image link which will be stored in the database and will be looking like "https://home-renter.heroku.com/images/1663093729973.jpg". Normally, if I paste the link on the browser, the server should send the image...
But in this case I get 404 error....
The image link is saved into the mongodb as
In the chrome console I have the following errors and warnings:
I do not know what should I look for. I dont have a starting point...
Update. If I add a house, and upload images, the image selection works. However if I refresh the page, the website crashes and send 404...
// Static files
const path = require('path')
app.use('/images', express.static(path.join(__dirname, 'images')));
app.get('/', (req, res, next) => res.send('Wellcome to home renter'));
Update
The problem was while I was deleting the images from the post. I was splitting the image link from 3000 (port) instead of the new URL.
Is it possible to host web page with angular.min.js functionality using nodes http module?
I'm making a really simple web project that is going to fetch some data and I decided to use angular.js to display data no the page. I tried to read index.html using fs module and sent it as response to the localhost. It seems that angular.min.js, that was included in the pages head section did not load as it would when I run the page in the browser from the file explorer.
angular is a web application, so, please serve the angular using your node.js server and load the app in the web browser.
add a listener of get then send all files that index.html need, it is done.
or use app.use(express.static('public')); which public is your 'public' folder, put all file in dist to serve as a static content.
I use the first option every time but it is trick but functional.
sample code is:
const express = require('express');
const router = express.Router();
const path = require('path');
router.get('/:id',(req,res)=>{res.sendFile(path.join('/path/to your/file/'+req.params.id));});
router.get('/',(req,res)=> res.sendFile(path.join('/path/to/your/file/index.html'));});
module.exports = router;
I just decided to use NodeMailer and it works well on localhost, but on the server, I don't know which path should I go to find the page's link. so here is the path in the app.js
// Static folder
app.use("/", express.static(path.join(__dirname, "/views")));
// Body Parser Middleware
app.use(bodyParser.urlencoded({extended:false}));
app.use(bodyParser.json());
app.get("/views", (req,res) =>{
res.render("contact");
});
and in the views folder, I have the file contact.handlebars
I tried on the live server this links to find my web-form
mywebsite/views/contact.handlebars (this is downloading the file)
mywebsite/views/ (this shows just the index of the views)
enter image description here
mywebsite/views/contact ( nothing )
Again, on my localhost, Everything works very well (localhost:3000/views)
I will be appreciated if someone would help me with this issue.
I am new to nodeJS server area, need help in understanding how to work with REST API (using express) and deploy the angular application over a singe node server and same ports.
By deploying i want to understand if user hit below url http://localhost:8000/<page_name> then the specified page should open.
And is user hit below url using get or post request
http://localhost:8000/api/<api_name> then a json or a text will be returned.
How to run both the thing over a single node server.
Lets assume, you have all your static files in the /public folder of you app. Generally spoken, if you are using express.static, you should also get your index.html because this is handled by default for each directory.
In your case, as you are using Angular, the routing is handled from the client side (SPA). You should only have one single index.html after building your Angular app. All files from your dist folder should then be placed into your /public folder. Then you need to make sure, that initial file serving provides your index.html like so:
In this example static files are served first, then your API and if nothing is found, you are getting back you index file.
const express = require('express');
const app = express();
// serve static files
app.static(__dirname + '/public'));
// serve your API
app.get('/api/welcome', function (req, res) {
res.send('Welcome');
});
// fallback routing (server side handling)
app.get(/.*/, function (req, res) {
res.sendFile(__dirname + ‘/public/index.html‘
});
app.listen(3000);
Next time please make sure, to give all necessary information in your question ;-)
With the help from Sebastian, so far I can find a solution but its not working when i am hitting URL for different pages.
const express = require('express');
const app = express();
app.use(express.static('public'))
Please provide your suggestions.
I want to get png image by path like this:
http://127.0.0.1/image/line.png
how do I write the app.get() function to match the path and get the filename, then read the file in location and return it?
I am new to express in node.js.
If you are using ExpressJS 4.0. You can do it by my example below:
app.get('/image/:fileName', function(req ,res) {
var path = require('path');
var file = path.join(PATH_TO_IMAGE_DIRECTORY, req.params.fileName);
res.sendFile(file);
});
Please make note that you should change PATH_TO_IMAGE_DIRECTORY by your image directory location. For example: __dirname, '../upload'
I shared a full post about upload and get the uploaded images with nodejs and expressjs 4.0: HOW TO UPLOAD FILES WITH NODEJS AND EXPRESSJS 4