I know there are a bunch of questions on this topic but none seem to directly answer my problem.
I am trying to static serve images from NodeJS using ExpressJS. I've already successfully statically served a CSS file using:
this.app.use(express.static(path.join(__dirname, "style")));
and accessing the file at URL/file.css. However when I try and do something similar for images using:
this.app.use('/images', express.static(path.join(__dirname, "images")));
and I try and access the file using URL/images/file.jpg - I just get an error saying
Cannot GET /images/file.jpg
I've also tried variants without the /images/ similar to the way I've done style and get the same problem. Unsure where I'm going wrong.
The answer was obvious but subtle. I was compiling typescript from ./ and putting it into /dist and sass from /style into /dist/style so I put my images folder at the root level, rather than inside dist. Problem solved.
Related
I am building a React application which needs to display images dynamically which are stored, by the thousands, on a server-side file system. All of my attempts to successfully implement this have failed, including many which were taken from responses to similar questions.
Some details:
I used create-react-app to initialize my application. I am running in development mode (have not run npm-build). I'm using Express.js (Node.js) as a web-server, which I interact with through a proxy (only '/api' http requests use the proxy). My js code which attempts to 'require' the images is in the 'src' folder. The images are located in an 'images' folder in the default 'public' folder.
I thought I had found the solution when reading this page from create-react-app, as it states to use the public folder when 'You have thousands of images and need to dynamically reference their paths'. The page further instructs to use '%PUBLIC_URL%' or 'process.env.PUBLIC_URL' to access the 'public' folder. When using either of these I receive an 'Error: Cannot find module' message. Upon checking I notice that 'process.env.PUBLIC_URL' contains an empty string, and quickly notice that PUBLIC_URL is ignored in development mode.
I find this to be tremendously confusing, given that the 'Using the Public Folder' page is apparently describing the development phase of production, and yet it advises the use of something which is meaningless during development. Adding to my confusion, it appears as if the contents of that page resolved the issue for nearly all of those who have encountered a similar requirement in the past (example: 1, example: 2; both fail for me). Likewise, all attempts to to construct relative paths to the 'public' folder from the 'src' folder have yielded error messages. Failed code example:
let img = process.env.PUBLIC_URL + '/images/Team.jpg';
<img src={require(`${img}`)} alt="X" />
Error: Cannot find module '/images/Team.jpg'
I never imagined showing images in React would be so difficult. Any help is truly very much appreciated.
I think you are correct, you just don't need the require, return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />; as you can see their docs
If you open in your browser http://localhost:PORT/images/Team.jpg that should open.
That's the reason process.env.PUBLIC_URL is empty in development, because they resolve everything inside this folder directly.
This is somewhat related to an issue I'm having with CF on IBM Cloud here. My question after playing around with the folder structures is how exactly is CF building the app when it comes to relative paths?
For example, if i have the following folder structure
when I add <script type = 'text/javascript' src = '../index.js'></script> to the index.html file, I get GET https://simple-toolchain-20190320022356947.mybluemix.net/index.js net::ERR_ABORTED 404. This error does not happen when I move index.js into the public folder and change <script type = 'text/javascript' src = 'index.js'></script>.
The problem I have then is that when I try to require() any modules when the index.js file is in a sub-directory, it returns a Require is not defined error indicating that it is not getting the module from the node_modules cache which CF is suppose to build. Requiring any files in the same sub-directory also throws the same error. This does not seem to be a problem when the require() is used in the default app.js as the application loads without any errors.
I'm relatively new to the IBM Cloud Foundry tool but I'm following the same structure as when I pushed apps via Cloud9 IDE and didn't have any such issues there. I feel I might be missing something ridiculously simple like configuration of endpoint or package.json. However, I've been searching around for days and can't seem to find a solution.
Appreciate if you have any pointers. Thanks!
Due to my lack of understanding, I was trying to use require() on the client side hence the errors. Going to figure out how to use Browserify now. ;)
I'm uploading files from Angular 2 with ngx-uploader and storing them on backend (nodejs/feathers) with multer. Now I'm having trouble to reach and display them, for now im just trying to display image, but actually i just need to see how paths work so i can reach the .pdf files.
As a file path im getting this: resources\\uploads\\quality-docs\\FILENAME so i tried to reach them like this: http://localhost:3030/resources/uploads/quality-docs/FILENAME but it doesnt work, it gives me 404. Just realised when i put files in static, public folder, i can reach it like http://localhost:3030/FILENAME ... but is there a way for it to not be in public?
This is how my backend structure looks like:
Any ideas/sugestions are welcome, is this even a right way to go? Plus if any of you have idea how to delete files from server?
Assuming that you are using express in your node app, you need to include a static route to the resources/uploads directory (express static routes) like the following:
app.use(express.static('resources/uploads'))
For deleting files from a node application use unlink fs.unlink
I am working on an app powered by node which has a few (three) different folders. It looks like this:
Client-
Server-
-node_modules
-mongoose
Database-
-index.js
Config-
-credentials.js
I have made an exports object with all of my passwords and put it in the database folder (this way I can easily ignore it from being checked in to any version control).
I am wondering if there is a way to have ALL of the node_modules used by my server and database directories in the server directory so that the package.json file in my server directory would contain all of the needed packages for the "backend" of my project.
However, when I do this, and try to require(mongoose) from the Database/index.js file, I get "cannot find module" errors. I tried the following combinations and still get the error in every case:
require(mongoose) require(../server/mongoose) require(../server/node_modules/mongoose)
Installing the mongoose module directly in the Database directory fixes this problem but this means that I have to have a node_modules (and thus package.json) file in each directory. Is that the right way to fix this issue or is there a more simple solution?
Thanks
Maybe you find interesting having a look at the following article: "Where does Node.js and require() look for modules?", in order to understand why the different ways you are trying to "require" mongoose are not actually working - and that is because the way you are organizing your code (your node_modules directory is inside your Server and your Database directory is under the / - root directory).
So, in your case, you will have to specify your /Database/index.js the relative file path to mongoose in order to find your module:
require('../server/node_modules/mongoose');
Another solution (I personally organize my code like this) would be moving your database code within the server code; after all, it's all backend code.
I aware this not elegant way but i have an advice for your case.
You can try like below;.
var mongoose = require('../server/node_modules/mongoose/index');
I was simulated your case in my local and this worked.
i have set the static web directory for use in my nodejs app:
app.use express.static(process.cwd(), 'www')
This brings up all the static files like css, images etc, when im in the root it works
http://localhost:8124/
however if i go to somewhere like /tags, it deosnt bring up the static files:
http://localhost:8124/tags/
i get 404 error on the console because its trying to access the www folder
with
/tags/www/ ....
im not sure how to solve this problem, thanks
It looks like you're referring to static assets, without leading /, this results in appending relative asset address to the current URL. Instead refer to your static assets with leading /
eg. /www/style.css rather than www/style.css