Actually , I am beginner in nodejs field . So want to know where to place(folder name) what file (like html file , css file , js file other files).
What is the correct folder structure(formating) of the nodejs web application.
ie...
public folder is for (html , css , image etc)
I am confused. Can you help. And want to know what is the need of this type of folder convention.Is it is a standard or any other reason. ?
You can create to folder in your main project.
lib - this will hold all the server related logic.
public - this will have the client side related files. here you can create the sub folders named as : html, css and js. At the time of execution this folder you can serve as static files.
main
---lib
---public
--------html
--------css
--------js
server.js
config.json
Related
I created a way to upload files using Multer in my files then display their information to my frontend. My challenge is opening the uploaded PDF as when I click the link to open it says that it cannot get.
You need to specify your static files in Express.
Use app.use(express.static('public')) to specify that your static files are located on public folder.
And for get a file you don't need to add public in the url, for example:
http://localhost:3000/pdf/mypdf.pdf
See this documentation
I have loopback 4 - nodejs in the backend and Ionic 4 in the frontend of my mobile application. I'm storing an mp3 file on server sid and I want to stream and play it on the client-side so basically audio streaming from loopback4.
So basically I'm looking for server-side code in loopback-4 which is in typescript to audio-stream a file to client. (I'm unable to use npmjs libraries since most of them are not typed and cannot be used in typescript)
As soon as I know about loopback4, it doesn't have nodejs stream implementation. I recommend you to use native NodeJS streams. Check out this repo https://github.com/noamtcohen/AudioStreamer
Short answer:
I was able to achieve this by simply serving static files i.e my audio file from the server-side. Accessing it using the endpoint I made and calling it using the tag on the frontend.
Long answer:
In loopback 4, you can find a line of code in application.ts file where public directory from the root folder of the server project is served.
this.static('/', path.join(__dirname, '../../public'));
Similarly, you can serve your static files from whatever dir you want. In my case, I served my files from media folder which I added in the root directory of my node project.
this.static('/', path.join(__dirname, '../media'));
The second step is to expose an API endpoint which you would use to make a get request to the server. You can do that inside index.ts file of the server project and the code right below app.start().
app.static('/media', 'media', { extensions: ['mp3'] });
Here, adding the API endpoint and the directory in the root folder of the node project is mandatory.
Now, on the frontend you only have to add your complete url to access the static file from node project to the src attribute of html tag.
Add controls attribute to the tag and html will handle everything for you. You can play, pause, skip, etc.
<audio controls #audioElement id="id1" [src]="http://localhost:3000/media/audio-files/myAudiofile.mp3">
It's a first time I'm doing this so got some trivial (I think) problems with files upload.
I have a pair: Angular 7 app + NodeJS (express) backend. I successfully uploading files (images) through the Angular page, NodeJS save it with correct format, but I don't know what can I do to be able to target just uploaded images in my web-service and where should I store new files. Should it be : src/app/uploads or only src/app ? Can someone explain the idea behind.
Do I need to do any extra actions in Angular? Because it shows me 404 page if I try to target something out of scope of the app.
Thanks!
I think that src directory should store only source code (or something change when you update your version of code)
In my opinion, uploaded file shouldnt be stored in src directory.
Maybe
Root dir
- docs
- migrations
- node_modules
- src
- tmp
- uploaded
.......
I am having trouble displaying an image which is in my angular folder app.
here is my folder structure:
I am accessing it from the contact.component folder; I have tried accessing directly like src="../images/DNS.jpg" and relatively to the index.html file src="./app/images/DNS.jpg" and it doesn't work.
How can I reference this?
Put all your images in assets folder and Try this :
<img src="assets/DNS.jpg" />
As, angular recommends to put all your resources in the assets folder including images/fonts etc and access from there.
I'm doing a node project where I expose my public folder like:
app.use(express.static(path.join(__dirname, '/public')))
So now, all my public files are accessible through localhost:8080/*
I have also created a folder called "views" where I save private views, javascript and css files associated with them. They are private views so I don't want any user to access them.
As I have html linked with my css files and javascript, when the browser try to GET them, it says "not found" because they are not in the public folder.
I'm sending the html as sendFile in the express route.
Is there any way to put all files in the public folder and then protect them for not being accessible to public users? Or is there any alternative to sendFile, so the file is rendered locally and it doesn't need to request the css and javascript files
Thank you in advance
Views are technically private. Because they are rendered server-side, and not directly accessible by the visitors.
But you generally don't want stuff like Javascript, CSS nor views to be private. They will be seen anyway by the user. The only reason to have things like Node.js views private is the fact that they need be rendered by Node.js prior sending them to the user.
If you have private files, you might want to do same.
Otherwise, simply place them on the /public folder. You should not be hiding any secrets inside your JS / CSS code.
Edit (following comment):
You have a couple ways to do that.
Either you build a unique response that contains all necessary HTML / views - CSS - JS.
render('view.ejs', { css: 'body { color: blue }' })
You will need render that variable into your view, just like you might already be doing with your other views.
You might also want to read it from a file:
fs.readFile(`${__dirname}/css/style.css`, (error, styles) => { ... }
Or you handle each file request separately:
Node.js - external JS and CSS files (just using node.js not express)
(if you use Node.js views simply render these one instead of HTML files)