How to display image and files from heroku - node.js

Hey guys I have this new site am working on and it has to do with uploading of files from the frontend to the backend folder and displaying the image through an api, using node js and express uploader when I ran it locally on my PC it worked perfectly, when I deployed it to heroku it worked and displayed the image but after a while it would show a broken link and it won't display anymore. Please I need help fixing it

The problem here is that Heroku does not save changes you make to the filesystem. To make this work, you need to use an external method of saving images, like aws of firebase.

Related

i'm a complete noob over React and i don't understand why we need react build

It's been a couple of weeks since I started working on React. I'm having fun with it. What's the point of React Build? To create a full-stack application, you make a NodeJS/express back-end and a front-end in separate folders. My booking website is finally done. When it comes to deploying it, why can't I upload the folders like I have on my local machine? It's both on different ports and in different folders. why did i waste my time on cors if everything was going to be on single port ???
why ? react Build ?
You could actually upload same files and folders of react you have on your local machine and serve all of that to customer and it will work as usual. The issue would be performance. You will have to server so many files and folders together plus all the packages. What react build does is using the bundler, put everything together in one build folder and only serve that. Build folder is as minimized as possible with all the packages needed to run application. Hope that answers your question

I don't know how to deploy this

I'm relatively new to StackOverflow and deploying. So be patient if this isn't the place to ask about this, any kind of help will be truly appreciated.
The thing is, I have a web app with a Front End made with ReactJS, a Backend with Node and Express, and backed up by MongoDB.
The app is a bit simple, you can login/logout, post photos/gifs, have your own profile etc.
As of now, My React app communicates to the backend with a Proxy, the images are a static folder served by express (so that its easy to fetch the images on react), and so far the tests went good, I set up Mongo Atlas so that I don't have to worry about that in production.
The point is... I don't know exactly where or how should I deploy this, I'm considering using Heroku but since I don't know if it supports local storing, and I'm not sure if it'll work, same for Netlify. I've been thinking of composing up docker images, renting hosting on Linode and deploy the images there.
So far my project tree looks like this
Project -> .git
client->React Stuff
server->Node Stuff + Images folder
//each with their own package.json and configs/env
If you have a document or a video that would help me know about deployment, I'll really appreciate, and also if you think that I should use Heroku/Netlify/etc or just wanna leave a msg , please do so!, tyvm in advance
From what you mentioned it sounds like Heroku should do the trick. Heroku uses git to store files. Here's a guide that should help you set it up

Deploying mono repo to Heroku, Node.JS, Angular 9. Heroku CLI

Having a bit of an issue with Heroku. I've always uploaded in one directory, but this time I wanted my folder structure to be a bit more, well structured. The problem is I can't seem to upload to Heroku like this.
I have a directory containing a folder called "client" which contains my angular 9 application and I have a folder called "middle-tier" containing the node.js server application.
I can't figure out how to push this up and allow it to work. The node application serves the angular application.
Everything works locally I just have no idea how to push this up to Heroku servers.
Please see attached screenshots of the structure.
Below is the error message I'm getting. Which I tried to fix by running git init again in the root of the structure. And then running the command to have a node.js build pack. Which was to no avail this also did not work and produced the same problem.
I have tried to include as much detail as I can but if there is anything else I can provide please let me know. I've spent quite some time building my application and am quite eager to deploy it!
Thanks for your time guys!
In short, with multiple discussions with Heroku support line, at the moment it is impossible to upload a mono repo to a single Heroku instance.

Converting SVG using svg2png (phantomjs) failing to load cloundinary images on live server

I'm using the lastest version of svg2png to covert svgs like the one below into png's
https://s3.eu-central-1.amazonaws.com/boxxer/uploads/items/57c46a04f1dc422b002ff291.svg
Locally this works without any issues, but when I deploy my app to Flynn it seems to not be rendering the images referenced in the defs and the result look like the image below
https://res.cloudinary.com/dot-to-dot-design/image/upload/f_auto,q_auto,w_600/boxxer_s3/uploads/items/57c46a04f1dc422b002ff291_1472543810612.png
If I replace the cloudinary images with ones hosted on the server the png renders ok.
Also the current version of my site that's running on a different server and admittedly an older version of svg2png also works fine.
The problem I'm having is knowing exactly what's causing the issue as there are several new things.
Flynn server hosting, where the maintainers have advised that there shouldn't be anything blocking the images from loading.
svg2png can't help because I can't replicate it locally.
Cloudinary have also advised that there should be any reason for the images not to load.
Not sure why but I manage to resolve my isssue by removing the https protocol so the reference to my images looks like
//res.cloudinary.com/dot-to-dot-design/image/upload/f_auto,q_auto,w_600/boxxer_s3/uploads/items/57c46a04f1dc422b002ff291_1472543810612.png

Running unity with NodeJS

I'm using NodeJS with Express and trying to run a Unity html file on my site.
Basically what I'm trying to do is to get a Unity html file I have to play on my NodeJS site. The files are WebPlayer.html and WebPlayer.unity3d. If I open up the local copy of WebPlayer.html in my browser, the game plays fine. However, if I try to run the game through my site, I get the message Failed to download data file. I've looked this up, and have seen people having the same issues as me, but couldn't find too many helpful suggestions from people using node. Any help would be appreciated. Thanks!
Running the local copy in my browser (unity is loading the game and is working fine). file:///Users/thomasbaldwin/Desktop/WebPlayer.html
Running the WebPlayer.html file on my local server.
http://localhost:3000/account/game/

Resources