Hello dear coder, welcome to my last tech article of series dedicated to Node.js and Docker. Hope you enjoy!
Problem:
We already now ho...
Some comments have been hidden by the post's author - find out more
For further actions, you may consider blocking this person and/or reporting abuse
In the package.json for "ui" you could add a proxy and avoid the CORS issue without the CORS package. "proxy": localhost:8080,
Just remember to delete it before you run "build".
Good work though. Not trying to be one of "those" people🤐
Yeah cool solution! Yes, I also discovered proxy solution but didn't want to make it more complicated to readers. Thank you!
I hear that. You taught me a lot about Docker.
Haha Matt I was thinking the same thing. I think it needed to be said and I think Vlad's reasoning is solid. Compromises are always necessary in a shirt piece, but saying that it's still good to know alternative patterns.
Also true. Tiny American flags for some and ham sandwiches for others. We're transitioning to Docker at work so it was good info.
Is live reload works in case when uses port 3000 and I'm changing files locally ?
Hi Andrei, for live updates, I changed my 'ui' service in my docker-compose to:
ui:
build: ./ui
ports:
I think, it should not work. Because we didnt map our local files with files in docker. We need to make volumes for that.
A post explaining a bit more about Docker volumes would be welcome too. :)
Hi Stanley, for live updates, I changed my 'ui' service in my docker-compose to:
ui:
build: ./ui
ports:
- '3000:3000'
depends_on:
- api
volumes:
- ./ui/src/:/usr/src/app/src
stdin_open: true
Great article. I enjoyed reading it. I think this article gives a good top level explanation on how to get this working.
Only change I would make is use a post rather then a get to create the user. :)
Thank you! Yeah post would be correct way to create user, also I made it to avoid using postman or curl in previous article.
Ahh yes, you can just CURL from the command line ;)
curl -d "foo=bar" http://localhost:8080/usersHi, this series is fantastic, thank you. I built something heavily influenced by this but ran into cors issues when running the production deployment and trying to access it via my host machines IP address. Is there some low hanging fruit I should try? I have tried changing my react app to fetch data from localhost:3001 to api:3001 but that is also unsuccessful. Code is here if anyone has time to look :) github.com/emilkloeden/covid.
Have you found out any solution? I have been stucked in same situation.
Thank you for your article, you help us a lot.
I wonder if instead of nginx we can serve the ui from nodejs via Express and have it all in one Docker once more.
Also, if we don't use any other interface with the api, could the api be replaced by socket.io to directly connect the react ui with nodejs.
I hope I make any sense, as I am thinking of deploying small CRUD apps with MERN stack.
Cheers
You use Nginx because it acts as a proxy between the internet and your back end if I recall the reasoning. So it's a security issue and that's why most projects with this stack typically involve Nginx.
I had to skip to the finished version because too much complication for a new user like me to troubleshoot the issues during build.
The finished version at bottom of post worked well.
One tip for other new users - when starting with docker-compose up --build while you have MongoDB running on local machine on same port, everything will work in the container except clicking create user will not save in the database. So it's a silent fail which is probably intentional. To test you can just stop local service of MongoDB, start docker and any user created is saved to DB which you can peruse with MongoDB Compass if you wish.
As a learning tutorial it's been great so thankyou very much!
Great article cheers! Just a little note/question. Deploying this at a remote server, having react served by Nginx in clients browser, API requests to localhost will fail. That's because the browser in every client will try to make a request to a localhost:8080 server. So i assume, the production build should also have a functionality of getting the IP of the host that these 2 containers will run in the production server. How would you approach this situation?