Amazing tutorial sir . Thank you for it ... deployment in MERN is pretty less talked about on RUclips channels atleast . Im glad I bumbed into this . Keep growing 🎉
Thanks a lot sir, i have been searching for this video for a long time. It is an amazing tutorial in a simple and understandable manner. It is actually covering all the topics . i have completed this tutorial without having any unexpected errors. keep going sir
You're very welcome! I'm thrilled to hear that you found the tutorial helpful and that you were able to complete it without any unexpected errors. Your positive feedback is truly appreciated. If you have any more questions or if there's anything else you'd like to learn, feel free to let me know. Keep coding, and thanks for your support!
Great video, well explained. When you get time, may you make a video of EC2 deployment using a MERN stack mono-repo. It will be nice to see build and deploy actions that combine multiple images together eg frontend and backend
Hello. Thank you for helping me through this video. But I want to add domain and ssl Nginx, ReactJS when setting up via Docker. Sorry that my English is not good Looking forward to hearing from you and have a nice day
Thank you for your comment! I'm glad the video helped you. For SSL: Once you have your domain, you'll need to configure the DNS records to point to your EC2 instance's public IP address. You can do this through your domain registrar's control panel. You can obtain a free SSL certificate from Amazon Certificate Manager (ACM). This service allows you to generate and manage SSL/TLS certificates for your AWS resources. With Docker, you'll likely use a separate container for Nginx as a reverse proxy in front of your Node.js container. I will try to create a full setup video soon.
Is the workflow created or not? I couldn't understand what you said. Try below things if workflow not triggered: 1. Double-check if the workflow YAML file is located in the .github/workflows directory within your repository. 2. Verify the workflow trigger in the YAML file. Some triggers, like push or workflow_dispatch, require the workflow file to be merged into the default branch (usually main or master) before they appear in the Actions tab. 3. Make sure the workflow YAML file has no syntax errors. Errors can prevent the workflow from being displayed. You can use a YAML validator online to check the syntax.
Hey man, thanks for this valuable information, Can you make a video on AWS Serverless Lamda about how to use the lambda, and one more thing needed like how to integrate domain name with aws, and how to add https in the URL, I really need this
Thanks. You can refer below video for AWS Lambda: Create & Deploy AWS Lambda Function In Java Using GitHub Actions ruclips.net/video/1lLdzSKVH3M/видео.html Domain part probably I will cover in some other video.
This video is fantastic. However, I’ve encountered some problems with nginx. I have uploaded onto EC2 successfully, but when I get access to frontend it shows welcome to nginx instead of my homepage. Index.html file is properly located in the docker container. Idk if this has something to do with vite
Hi, thank you very much for this tutorial. Does someone else stuck in minute 32 ? I missed the part where you configure the github actions for the project. I am stuck on minute 32, I check the actions tab on my backend repository but it's empty. Please help
sir can you please make a video to deploy a nextjs (above 13.4 , app router) , typescript , node express , mongodb project with docker and github actions🙏
Hello can you please suggest, how can i setup this with docker-compose, as we dont have docker-compose file on server, i need to create a file using workflow job and then i'm starting docker-compose up. Is there any batter way, please suggest.
Hello brother, I'm facing an issue, as I'm showing github secrets you have added aws secret keys but not mention in video. Can you please help me to resolve issue
Thanks man. After extensive research, I learned that there are multiple ways to deploy projects on AWS. I don't have previous experience with AWS deployments, and this is the first time I've successfully deployed a MERN project on AWS. Can I use this method for real-time projects? Is this approach more costly than other approaches? Maybe I'm asking a silly question, but please don't mind.
You can simply add more --build-arg flags to your docker build command, each specifying a different argument name and value. Here's how it would look with two additional arguments: docker build -t integrationninjas/reactjs-app \ --build-arg REACT_APP_NODE_ENV='production' \ --build-arg REACT_APP_SERVER_BASE_URL='${{ secrets.REACT_APP_SERVER_BASE_URL }}' \ --build-arg DB_HOST='your_database_host' \ --build-arg DB_USERNAME='your_database_username' Accessing Arguments in Dockerfile: In your Dockerfile, use the ARG instruction to define environment variables based on the arguments passed during build: Dockerfile: ARG REACT_APP_NODE_ENV ARG REACT_APP_SERVER_BASE_URL ARG DB_HOST ARG DB_USERNAME # ... rest of your Dockerfile instructions ENV NODE_ENV $REACT_APP_NODE_ENV # Optional: Set additional environment variables Use code with caution. Accessing Secrets: Use the same syntax ({{ secrets.SECRET_NAME }}) within your --build-arg value to access secrets stored in your GitHub repository.
I followed whole tutorial and deployed mern stack application I am getting ngnix error whenever i go to particular page and reload that page i go to website ->it runs fine i click on particular page-> it loads fine then if i reload that page page or i go that page directly that it shows nginix 404 not found error on particular page Any solution for that ???
I am not able to get the exact error. Can you describe more based on this example if you are not able to see the same page. Few suggestions: Please check your nginx configuration with docker. If possible share here as well.
@@IntegrationNinjas i am having problem in that actually i sm new in all these deployment. I tried to initiate the postgres and prisma commands in the yml file but it's not working and giving error. i am not sure how to proceed do i host the database separately or in the same ec2 instance where my backend or frontend will be hosted. can you please help me if you are not busy ?
yes sir, please help us to solve this error I followed whole tutorial and deployed mern stack application I am getting ngnix error whenever i go to particular page and reload that page i go to website ->it runs fine i click on particular page-> it loads fine then if i reload that page page or i go that page directly that it shows nginix 404 not found error on particular page Any solution for that ???
I am not able to get the exact error. Can you describe more based on this example if you are not able to see the same page. Few suggestions: Please check your nginx configuration with docker. If possible share here as well.
If you have the certificate files (certificate, private key, and any intermediate certificates), you'll need to configure your web server on the EC2 instance to use them. The specific steps for this will depend on the web server software you're using (e.g., Apache, Nginx).
This is the easiest way to do with cicd. Otherwise you will need to setup few things like env file related configuration and nginx on server side. It can be achieved and there are multiple references on youtube for that so I haven’t went with that approach.
Amazing tutorial sir . Thank you for it ... deployment in MERN is pretty less talked about on RUclips channels atleast . Im glad I bumbed into this . Keep growing 🎉
Thanks for exploring out this video and I am glad to hear that it was helpful.
Was looking for this ,
Thanks for explaining thoroughly 👍.
Happy to help
Thanks a lot sir, i have been searching for this video for a long time. It is an amazing tutorial in a simple and understandable manner. It is actually covering all the topics . i have completed this tutorial without having any unexpected errors. keep going sir
You're very welcome! I'm thrilled to hear that you found the tutorial helpful and that you were able to complete it without any unexpected errors. Your positive feedback is truly appreciated. If you have any more questions or if there's anything else you'd like to learn, feel free to let me know. Keep coding, and thanks for your support!
@@IntegrationNinjas pls where is the repo for the used source code?
Great video, well explained. When you get time, may you make a video of EC2 deployment using a MERN stack mono-repo. It will be nice to see build and deploy actions that combine multiple images together eg frontend and backend
Great suggestion! Will try that.
Bro! You're amazing!😎Fantastic tutorial.💥 Appreciate your hard work. 👨💻Looking for more
Glad it helped.
Great tutorial man. Your videos are great . I hope people get to know this channel as I have 👍
Thanks for your kind words. It will motivate me to come up with more valuable content.
Wonderdul content, thanks a lot. Try to deploy only react app with the API that gives you backend
Thanks. I will try that sure.
Well explained tutorial, Bring one with Kubernetes as well.
Great Tutorial man, thanks for sharing Sachin! if the sample user is user name 😂
Thanks Jabid, you're right.
Hello. Thank you for helping me through this video. But I want to add domain and ssl Nginx, ReactJS when setting up via Docker.
Sorry that my English is not good
Looking forward to hearing from you and have a nice day
Thank you for your comment! I'm glad the video helped you. For SSL:
Once you have your domain, you'll need to configure the DNS records to point to your EC2 instance's public IP address. You can do this through your domain registrar's control panel.
You can obtain a free SSL certificate from Amazon Certificate Manager (ACM). This service allows you to generate and manage SSL/TLS certificates for your AWS resources.
With Docker, you'll likely use a separate container for Nginx as a reverse proxy in front of your Node.js container.
I will try to create a full setup video soon.
@@IntegrationNinjas Thank you so much
I have successfuly deployed my app, but when navigate to other routes and refresh it is showing 404 nginx
You can add nginx config file to your code base, it will solve this problem
i have followed a tutorial but thing is that when i go in github actions it is not showing 1 worlkflow created but i didnt see its running or not
Is the workflow created or not? I couldn't understand what you said.
Try below things if workflow not triggered:
1. Double-check if the workflow YAML file is located in the .github/workflows directory within your repository.
2. Verify the workflow trigger in the YAML file. Some triggers, like push or workflow_dispatch, require the workflow file to be merged into the default branch (usually main or master) before they appear in the Actions tab.
3. Make sure the workflow YAML file has no syntax errors. Errors can prevent the workflow from being displayed. You can use a YAML validator online to check the syntax.
Ok I will check it and let you know sir
Hii sir can you please share your number I have tried lots of time but actions are not working I have followed the video precisely and 9-10 times
Please ping the error message you are getting while running. Or message the error screenshots on Instagram account : integrationninjas
@@IntegrationNinjas ok sir
Hey man, thanks for this valuable information, Can you make a video on AWS Serverless Lamda about how to use the lambda, and one more thing needed like how to integrate domain name with aws, and how to add https in the URL, I really need this
Thanks. You can refer below video for AWS Lambda:
Create & Deploy AWS Lambda Function In Java Using GitHub Actions
ruclips.net/video/1lLdzSKVH3M/видео.html
Domain part probably I will cover in some other video.
This video is fantastic. However, I’ve encountered some problems with nginx. I have uploaded onto EC2 successfully, but when I get access to frontend it shows welcome to nginx instead of my homepage. Index.html file is properly located in the docker container.
Idk if this has something to do with vite
Great one 👍
Thanks for the visit
Hi, thank you very much for this tutorial.
Does someone else stuck in minute 32 ?
I missed the part where you configure the github actions for the project. I am stuck on minute 32, I check the actions tab on my backend repository but it's empty. Please help
Very helpful video
Glad it was helpful!
sir can you please make a video to deploy a nextjs (above 13.4 , app router) , typescript , node express , mongodb project with docker and github actions🙏
Sure, I will try that out and will upload soon.
Great videos 🎉
Glad you like them!
Sir can you made a video for PERN stack deployment like this video
Sure, will try to create it in next videos.
Great one, but when we containerize our server, we have included our .env file it has the mognodb url . so we should include it or not ? ,
It is not required to add since we have already set these values in docker file as environment variables.
Hello can you please suggest, how can i setup this with docker-compose, as we dont have docker-compose file on server, i need to create a file using workflow job and then i'm starting docker-compose up.
Is there any batter way, please suggest.
you made things complicated you should make a docker compose.yaml file. only need to run 'docker compose up' very simple & easy
I want to know can we run that port 80 both front end and backend in same server how
What if I have frontend and backend in same github repository?
you can change the directory to frontend/backend and can build the project.
@@IntegrationNinjas Thanks but can you send me any example or can you make any video
@@prachideokate6309 sure, I will try to create such project and create a video.
@@IntegrationNinjas Can we connect? Can I get your email id or anything?
@@IntegrationNinjasWhat does this mean? Do you ask to push frontend and backend as separate repos?
bro after push the changes into github there is nothing showing in the actions
please clarify these error
Hello brother,
I'm facing an issue, as I'm showing github secrets you have added aws secret keys but not mention in video.
Can you please help me to resolve issue
AWS secrets has been added for other workflow, not for this one. In this video you just need to store docker username, password and mongodb password.
I'm waiting this video
Can you provide more video
Please explore this and share your feedback that will be helpful.
Can you make a video PERN Stack with Docker and Without Docker
I will try in further videos.
Thanks man. After extensive research, I learned that there are multiple ways to deploy projects on AWS. I don't have previous experience with AWS deployments, and this is the first time I've successfully deployed a MERN project on AWS. Can I use this method for real-time projects? Is this approach more costly than other approaches? Maybe I'm asking a silly question, but please don't mind.
Pls help me I want to deploy my mern project if u can guide me with this it would be very helpful
@scientofia4108 please share your mail i will contact with you
I have .env file in node project and there are approx 15 key value pair. how i can manage that with yml file mentioned in video?
You can simply add more --build-arg flags to your docker build command, each specifying a different argument name and value. Here's how it would look with two additional arguments:
docker build -t integrationninjas/reactjs-app \
--build-arg REACT_APP_NODE_ENV='production' \
--build-arg REACT_APP_SERVER_BASE_URL='${{ secrets.REACT_APP_SERVER_BASE_URL }}' \
--build-arg DB_HOST='your_database_host' \
--build-arg DB_USERNAME='your_database_username'
Accessing Arguments in Dockerfile:
In your Dockerfile, use the ARG instruction to define environment variables based on the arguments passed during build:
Dockerfile:
ARG REACT_APP_NODE_ENV
ARG REACT_APP_SERVER_BASE_URL
ARG DB_HOST
ARG DB_USERNAME
# ... rest of your Dockerfile instructions
ENV NODE_ENV $REACT_APP_NODE_ENV # Optional: Set additional environment variables
Use code with caution.
Accessing Secrets:
Use the same syntax ({{ secrets.SECRET_NAME }}) within your --build-arg value to access secrets stored in your GitHub repository.
You can also use AWS secrets manager as well and can use accordingly instead of using .env.
Is it ok to whitelist all ip addresses?
All zeros?
Can you provide more video
what about hosting frontend in vercel or netlify s so how we give nginx in backend
I followed whole tutorial and deployed mern stack application
I am getting ngnix error whenever i go to particular page and reload that page
i go to website ->it runs fine
i click on particular page-> it loads fine
then if i reload that page page or i go that page directly that it shows nginix 404 not found error on particular page
Any solution for that ???
I am not able to get the exact error. Can you describe more based on this example if you are not able to see the same page.
Few suggestions: Please check your nginx configuration with docker. If possible share here as well.
@@IntegrationNinjas sir plz if you have time
can i get in contact with you
it will hardly take 10min
please make a task management project and api base project in react js node js
Bro i have a similar kind of project but i am using postgressSql and prisma as orm can i follow the exact steps?
Yes only thing you need to make sure your DB connection is established properly with postgres database server.
@@IntegrationNinjas i am having problem in that actually i sm new in all these deployment. I tried to initiate the postgres and prisma commands in the yml file but it's not working and giving error. i am not sure how to proceed do i host the database separately or in the same ec2 instance where my backend or frontend will be hosted. can you please help me if you are not busy ?
yes sir, please help us to solve this error
I followed whole tutorial and deployed mern stack application
I am getting ngnix error whenever i go to particular page and reload that page
i go to website ->it runs fine
i click on particular page-> it loads fine
then if i reload that page page or i go that page directly that it shows nginix 404 not found error on particular page
Any solution for that ???
I am not able to get the exact error. Can you describe more based on this example if you are not able to see the same page.
Few suggestions: Please check your nginx configuration with docker. If possible share here as well.
Same error bro In details I should mention how connect u bro
how to integrate nginx with backend deployment?
We are using nginx in our react docker file.
I would like to use this project for my thesis.
Is it fine with you, when I use this project for study purposes?
Definitely, feel free to fork the repository.
Thank you very much 🙏
Is it easy to add monitoring and notification to this project so that you have a whole cicd pipeline in terms of DevOps? @@IntegrationNinjas
Is it easy to add monitoring and notification to this project to get a full DevOps cycle?@@IntegrationNinjas
you can use AWS Cloudwatch to monitor logs, you can integrate notifications with GitHub Actions as well.
how do you set up SSL certificate
If you have the certificate files (certificate, private key, and any intermediate certificates), you'll need to configure your web server on the EC2 instance to use them. The specific steps for this will depend on the web server software you're using (e.g., Apache, Nginx).
but i want hide port but how please explain
Which port you want to hide?
@@IntegrationNinjas 5173 and if 8000 also then it more better
my app is successfully deployed but when i am running it on browser it says, This site can’t be reached
Inbound rules, firewall settings
Thanks@@onechandan for the information. Nikhil, please check the inbound rules make sure you have opened the port.
35:07 note
Without Docker possible
This is the easiest way to do with cicd. Otherwise you will need to setup few things like env file related configuration and nginx on server side. It can be achieved and there are multiple references on youtube for that so I haven’t went with that approach.
@@IntegrationNinjas ohh Thnx
Very helpful video
Glad to hear that