I have an Express server that contains a public folder containing 5 images. I want to load those images inside of my ReactJS app. How would I do that?
I'm already using:
app.use("/static", express.static(path.join(__dirname, "public")));
and I can access them when I manually type in the URL, but I'm unable to figure out how to serve them all in my React app.
Any help would be much appreciated.
Related
I head to create Nuxt SPA with routing and mb API in future like that:
Backend server (on express or smth else) listen and on request give entire SPA to client.
Now user can use everything on client side (include routing) with no more else requests to backend (mb API requests only)
It means that server should give some .html file with js and css files as SPA and it will work on client side.
I tried to run some commands like nuxt build and nuxt generate
It looks like they return a same result - js files couldn't be found
And index.html file doesn't work properly
After some researching I found a solution
But now I got this:
It can't open the fourth js file in another js file. Path isn't right!
Every time I tried to run it as a static html file and from localhost (and also with using Live Server)
I think I did a lot of crutches and there should be another built-in function or feature that allows us to do what I want
I wrote a lot - if I made a mistake or you didn't get smth - please, ask! I need any help
To test your locally built application, you need to serve all files within the generated /dist folder. You can setup very easily a local web server using Express/Node.js as you already have Node.js installed when running Nuxt. Create a new folder and install express via npm (run npm install express).
Then, copy everything from /dist into /public and create a file server.js:
const express = require('express');
const app = express();
app.use(express.static(__dirname + '/public'));
app.listen(3000);
Run the web server with node server.js and you can access your generated files on http://localhost:3000.
I need to read a xml file storaged in a specifice path in server side.. I am using the VueJS and I can-t use JQUERY... could you help me with some idea or advice?
Case:
1. The file will be storage in /static/label/custom-label.xml
2. I need to read this file of the server side and load the contect.
3. I will use the content loaded in a const.
Not sure what backend you're using, but it's flagged as JS so I'll assume Node/Express. Correct me if I'm wrong.
Use express middleware to define your paths. If you're storing assets on your server for public consumption, store them in your /public/ folder.
app.use('/static', express.static('public'));
app.use(express.static('files'));
Use /static/ route to get static resources
http://localhost:3000/static/foobar.jpg
https://expressjs.com/en/starter/static-files.html
This SO post may help: Read remote file with node.js (http.get)
I'm building a Node.js Express app. When my client Html file tries to get a .js file from the server (when running <script src="somefolder/script.js"></script>), it can't access it. What's the common way to make script files accessible to the client in an Express app?
From the Express API:
Serve static content for the app from the "public" directory in the application directory:
app.use(express.static(__dirname + '/public'));
For example above assume that you will have the following "./public" folder structure:
/public
/javascripts
/custom.js
/stylesheets
/style.css
...
In this case to get script, or whatever you want you will need to write the following url: http://path_to_the_site/javascripts/custom.js.
Note that you don't need to write "public" before "javascripts".
This is my folder structure:
- getable_challenge
- node_modules
- stuff
- main.html
- main.js
- backend.js
- README.md
I want to load main.js from within main.html. Previously I had been accessing the page using the URL of file:///Users/adamzerner/code/getable_challenge/main.html, and a simple <script src="main.js"></script> allowed me to load the script.
But then I set up a Node server, at localhost:3000, and now it won't load the script. It's trying to load localhost:3000/main.js, which presumably is the wrong path. I'm not sure how to structure this... what should I do?
Server code (essentially)
var express = require('express');
var app = express();
app.listen(3000);
When you use the "file" protocol like that you aren't even using the web app to serve the script, you are directly accessing it on the local file system. That works fine when you are just running your app on your local machine but it completely breaks when you try to run it as a real app since the browser will have no idea where "file:///..." is, or even have permission to access it.
You need to put the client side scripts into a separate directory, usually named 'public', and then make your application aware of it. If you're using express you would do this:
app.use(express.static(__dirname + '/public'));
You want to put your statically served scripts ("public") into a separate directory so as to control access by your clients. If you just put them into the main directory and made the main directory accessible you could expose all your other files to public view, such as config files that sometimes contain passwords.
It also makes your structure much cleaner.
Try adding this line after var app
app.use(express.static(__dirname));
This should make your resources that are within your servers folder accessible. the var __dirname is the path to where your server is executed.
I am new to node. I have created and successfully tested the node app in Heroku. My folder structure is something like this .
app.js ( the server side socket.iofile).
index.html (publicly available file).
when i access the app through the URL from Heroku.
If i access the app.js file like appname.herokuapp.com/app.js i can access the file. Is any way to prevent accessing this server file ?
Regards
Harilal
Well, probably you are using express.static() due to which it can access any static file from your directory.Anyways, you can create a route for app.js:
var app=express();
app.use(app.router); //this will make sure that node.js will check for a route before checking for app.js file and displaying it.
app.use(express.static(__dirname+'/directoryPath'));
//now set the route for app.js
app.get('/app.js',function(req,res){
//what-ever you want should happen when u go to appname.herokuapp.com/app.js
});
Actually am not using the "express".
My code is something like this
http://pastebin.com/7BcZZsMk
My folder structure is like the following:
app
----css
--------style.css
----images
--------cup.png
--------tree.png
----app.js
----index.html