using JSON data in client side javascript file - javascript

Im fairly new to node.js and express. My question is how to correctly retrieve json data in a client side javascript file since im getting a 404 code about the .json file not being found.
my file structure is a generic express structure and the .json file is in the nodeapp folder right below the package.json file and app.js. Im trying to access this file from a javascript file that is saved in public/javascripts folder but can seem to get around it. here is the function im trying to implement in the .js file:
function getJSONData(){
var json;
$.getJSON('/public/web_text.json', function(data){
json = data
});
}

Option 1
You need to setup static files in express, and you do it like this:
app.use(express.static(__dirname + '/public'))
You then can call it from your client (without the public prefix):
$.getJSON('/javascript/web_text.json', function(data){});
https://expressjs.com/en/starter/static-files.html
Option 2
Your other option is to send it via sendFile http://expressjs.com/en/api.html#res.sendFile:
app.get('/public/web_text.json', (req, res) => {
res.sendFile(__dirname + '/my_json_file.json');
});
Then in your client you can call it like this:
$.getJSON('/public/web_text.json', function(data){})

Related

I have a public folder in my Node.js/Express.js project which contains some images. When I try to access those images through URL, I get 404 error

I have a Node.js/Express js project with the following folder structure
root
----bin
----controllers
----middleware
----models
----node_modules
----public
--------images
------------test.png
----routes
----views
I'm trying to figure out what URL I need to access in order to be served the test.png image that is inside the public/images folder. I thought it would be the following url:
http://localhost:3000/public/images/test.png
However, I get a "Not Found, 404" error
You should register an API middleware to serve the static files from the disk.
var express = require("express");
var app = express();
app.use(express.static('path/to/static/directory'))
in your case, you can use,
app.use(express.static('public'))
Refer https://expressjs.com/en/starter/static-files.html for additional details.

how to serve html file used in react in server

this is folder of code
I use node js and react to build a project I build design using react and controller to get data how I can serve html file in server so when run node server.js it open html page that I created I try this in server. js
app.get('/english', function(req, res) {
res.send(path.join(__dirname + '/index.html'));
});
and when i run this route localhost:3000/english i got this
/home/projects/folder/folder2/myproject/index.html
Read the html file first. You could assign it to a variable first then before sending.

How to download a file from project/specific location using nodejs?

My requirement is I should be able to download an excel template on a click event, I thought I will put that excel template in some folder(docs) in my backend code(instead of generating it dynamically) and download that. Is that possible, if yes how? I am using express and node.
It is possible.
Probably you use Express framework. Express can serve static files under '/public' folder.
When user connect to this file, her/his browser will download file. But some browser can view files online. For example, Chrome can open PDF files.
If you want to force to download file you can use this simple code;
app.get('/download', function(req, res){
var file = __dirname + '/upload-folder/dramaticpenguin.MOV';
res.download(file); // Set disposition and send it.
});

Having all website paths load the same static website in express

In my express server, I want to have all paths load the same static website, which I tried doing with the following code:
const express = require('express');
const app = express();
app.use('*', express.static('build'));
app.listen(3000);
Unfortunately I am presented with the following console errors when I navigate to any path on localhost:
:3000/main.js/:1 Uncaught SyntaxError: Unexpected token <
When attempting to view the JS file with the error, it seems to be serving index.html in its place.
I know this is due to the wildcard, but I can't think of a way to cleanly exclude all file names and paths from the static server.
I think you're looking for something a little more like this..app.use(express.static('public')
if your tree looks like
ProjectName
| server.js
| public
| index.html
you don't need the * as a parameter since setting the express.static sets the folder open to public view. This is how you separate your server code and client code. Be careful not to expose your entire project directory as people will then have access to your server code. This is why you're client files should be kept in a public folder or a www folder (common practices)
--EDIT
//this will server css, and js files so they can be linked into the html
app.use(express.static(__dirname + '/public'));
//this will force all url's except the public files to be given the index.html file.
app.use('*', function(req, res) {
res.sendFile(__dirname + '/public/index.html');
});

How to send a lot of files from server to client using express (NodeJS)

I'm trying to send files from NodeJS server to clients. Many images, css files, js files. For a few files I use
app.get('/js/client.js', function (req, res) {
res.sendFile(path.join(__dirname, '/', 'client.js'));
});
The path is var path = require('path');
So, if I use this construction for every file I want to send, this part of the code will be huge. How can I simplify it?
If you want to serve static content, put all content in public folder in will be automatically served using express.
app.use(express.static( __dirname + "/public"));

Categories

Resources