I work on an webapp which use REACT JS (with NODE, port 3000) and an API (with NODE JS, port 3100).
All requests made by client passing throught my API.
In this app, client could be able to listen mp3s downloaded and stored into my API. I made different schemas but I don't know which one can work.
SCHEMA 1.
REACT send parameters to API
API download the file and store it on a temporary directory
API send the URL (like : http://localhost:3100/sound/exemple.mp3) to REACT
REACT use that URL in 'src' of the AudioPlayer
Temporary files are delete with a CRON setting up on API server
I tried that solution but I have an error when I want to play the sound
(error: Can't GET /URL)
SCHEMA 2.
REACT send parameters to API
API download the file and store it on a temporary directory
REACT download the file from API and store it into public directory (by using express static)
REACT use that URL in 'src' of the AudioPlayer
Delete the file twice (API and REACT)
Another solution is to download the file directly from my source on REACT. But I need to hide the URL of the source (that why I pass throught my API).
Maybe there are others solutions ?
Related
I'm new to back-end coding, and I'm struggling to understand exactly what a "fullstack" app would look like.
Is it:
A Node-Express server that serves index.html, which has <script src="main.jsx"></script> in it (If this is the case, how would the .jsx content get compiled into browser-ready javascript?)
A Node-Express server that serves some data (.json) + a frontend app (that you would initialize with Vite or CRA) that fetches from said server?
Both are currect , your server can serve content to the cliend (first case) or send data to the client (json , xml or etc).
Note that when you are working with react and .jsx component you have to build your project and server the html file (including js , css) via express server
I am creating an react app using create-react-app for school management system. I had used node js for creating api end point. I am able to store student detail and can fetch it back to display in react.
I had created an endpoint for uploading student images, which is also working perfect.
I had stored the image on node js server public folder. I know it should be on client public folder but if another application for example android or angular or vue application tries to call the same image will not get as it will be stored in react public folder.
So how could I solve the image problem?
You've done all the logic right, just add image URL to user profile, for example :
imageUrl: 'https://{your API URL}'
or the better way to upload all images on file server like S3 or Google Cloud Storage, and save only link to image on user profile
I'm having a backend nodejs server and a frontend angular web applicantion both are in different folders and running on different ports (Nodejs server: 8000 and angular client:4200). I'm storing images on nodejs server's directory in "uploads folder" using api and then storing the image path in the database. Then retrieving the image path using api to display it. I'm getting the image path like this (http://localhost:8000/uploads/030312-1618.jpg) but the image is not displaying.
Assuming that you are using ExpressJS, have you set up the serving of static files as follows.
app.use(express.static('uploads'))
Source : http://expressjs.com/en/starter/static-files.html
(Can help you further if you add more details such as any errors that you get, more information about the tech stack you use, etc.)
I have two html files.
mynewFile1.html
mynewFile2.html
How to send it to the Angular 4 client from nodejs?
How to get the files in angular 4 which is rendered from back end?
It is pretty simple actually. Just serve the files using static function of express.
var app = express();
app.use(express.static('Files'));//assuming you have the files within the folder Files
Now, you can access your files via angular with the path of the server/filename. For example, if your nodejs api is hosted on http://localhost:4200. Access it in angular using:
http://localhost:4200/mynewFile1.html
I am building an app using angular2 and I want to keep a folder named as 'uploads' at the root of my application. However since in angular the current root is 'src' it does not let me access images inside the uploads folder.
If I try to keep 'uploads' directory inside the src folder then everytime I upload a file to it, it rebuilds the application and refreshes the page. I would want to keep it in suchaway that angular cli doesnt refresh the application in case file upload happens.
I want to access the url like : http://localhost:4200/uploads/xyz.jpg in angular2 app
Thank you
The angular app is a front-end app. It is not meant to be used as file storage. The file storage should be done by a back-end app that will serve the uploaded files to the front-end app.
Using your Front-end
Angular-cli does not compile any folder outside app or assets, so, you need to place the folder inside app or assets.
To access directly, place inside assets and access like localhost:4200/assets/uploads/xyz.jpg.
Remember that you need to be careful because if you use a git versioning system, when you make a pull in your production env, every file uploaded inside assets/uploads will be overwritten by the new version.
Using your Back-end
Put the upload file outside the angular app so when you build or update the angular app nothing will be lost. And use a back-end to serve the files.
You should place the upload folder outside the angular app and serve it using your nodeJs app. Use the static feature of expressJs to serve your file in some endpoint like localhost/uploads/xyz.jpg (if your nodejs is in localhost). So, you don't touch the angular-