GitLab CI/CD pipeline for React projects (GitLab + React + Netlify)
ฝัง
- เผยแพร่เมื่อ 27 มิ.ย. 2024
- In this tutorial, we will take a look at how to create a simple CI/CD pipeline for a React project using GitLab CI pipelines. After the build process, we will get into how to deploy every change to Netlify.
🔻 Click on SHOW MORE 🔻
cli.netlify.com/commands/deploy/
cli.netlify.com/commands/sites
--
⭐️ Video contents ⭐️
⌨️ 00:00 - Introduction
⌨️ 01:00 - Manual build process.
⌨️ 02:55 - Automated build process.
⌨️ 15:10 - Manual deployment to Netlify
⌨️ 16:46 - Automated deployment.
⌨️ 27:11 - Conclusion
--
⭐️ 🎓 GitLab CI/CD ONLINE COURSE ⭐️
Want to learn more about CI/CD pipelines? Check my GitLab CI online course.
Get it at a special price and help support this TH-cam channel:
www.vdespa.com/courses
--
⭐️ 💬 I have a question. ⭐️
I do my best to answer all comments here on TH-cam but I cannot make any guarantees.
If you are asking a question, make sure to include as many details as possible.
--
⭐️ 💡 I have a video idea ⭐️
Do you want me to create a video on a specific topic? Just fill out the form below:
forms.gle/uWEzXFQ2viJtZtvZ7
--
⭐️ 📺 Learn GitLab on TH-cam ⭐️
Collection of video tutorials:
▸ Learn GitLab CI:
• Gitlab
___
⭐️ 📕 Free resources ⭐️
📌 Official Gitlab CI documentation
docs.gitlab.com/
📌 DevOps with Valentine
/ devops-with
--
⭐️ 📩 Contact & Imprint ⭐️
👉 Follow me on Twitter:
/ vdespa
👉 Follow me on Medium:
/ vdespa
👉 Follow me on Facebook:
/ valentin-despa-1130381...
👉 Let's connect on LinkedIn:
/ vdespa
vdespa.com/imprint
__
![อาจารย์ยอด : ลุงแว่วเล่าเรื่องผี [ผี]](http://i.ytimg.com/vi/Fd2Qsy4dqpM/mqdefault.jpg)
👉 Want to learn more about CI/CD and DevOps? Check my Gitlab CI online course.
vdespa.com/courses/
Thank you Valentin!
The kind of Valentine we all want..
Everything including the errors that could come were being shown and tackled!
You are welcome. Thank you for leaving a comment.
Your tutorial is really friendly for a new-starter of deployment and Gitlab like me. Thanks for making this video!
Glad to hear that! You are welcome. Thank you for leaving a comment.
Thank you so much Valentin. This helped me to learn git , pipelines and to deploy my first website. You just cleared up all my confusions points. I had always coded never done these steps before so I always felt like I don't know something which always made me upset whenever I said I am a web developer. Now I learned a lot from this and read through things while learning. And finally I am a confident web developer. Thank you so much
Great to hear that. You are welcome. Thank you for leaving a comment.
Worked like a charm! Thanks ✨
Yes .. worked for me 2
Yes yes mere liye bhi kaam kiya
You are an Amazing teacher! Thanks for this making this!!
Thanks ☺️
This tutorial was kind of perfect. Thank you
Thanks, i am glad it helped!
This is really insightful and detailed for a newbie like me. Love this video man!!! :)
Glad it was helpful! You are welcome. Thank you for leaving a comment.
Very well explained. Thanks for sharing 👍
Glad it was helpful!
Dude, I think I've seen an other one of your videos. You popped up in a search for GitLab and Heroku pipeline. I wanted to mention that your thumbnail looks well done and inviting. I'm sure I'll be back. Thanks, human.
Thanks, Marx.
Great tutorial. Thanks from Brazil!!
You are welcome! I am glad that you liked it.
Good and Detailed Explaination...🤩
Glad you liked it You are welcome. Thank you for leaving a comment.
Thanks a lot Valentin. God Bless You!
You are most welcome! You are welcome. Thank you for leaving a comment.
Thank you for your good training
You're welcome!
awesome!
So good! Thank you so much 🙏. I subscribe now
Thanks, Brice!
Excellent 👏👏👏
Thank you! Cheers!
very good tutorial
Many many thanks
:3 at last I understand. Ty
I wasn’t able to understand anything that my DevOps teacher said.
Great to hear, thanks for letting me know. Maybe you should take a DevOps course from me 😂
Muito bom! obrigado.
Você é bem vindo. Obrigado por deixar um comentário.
Thank you for this video! The great one! Have a question, is there some way not to run repeatedly "npm install" on stages to make pipelines faster?
Yes, you can uses caches.
so if we used npm, we replace all your yarn commands with npm ?
Yes, you need to replace them.
@Valentin Despa
Is netlify keys added - authorization token, and siteid added in the settings>ci/cd will suffice to run the netlify command? These keys are no where used in the script or commands in yml file. Is this handled by GitLab implicitly?
If you name the keys properly, it will be enough. The CLI command will pick this up.
@@vdespa is there any pattern to name it inorder cli to pick this up automatically ?
@@julioaguilar3067 There is not pattern. It has to be exactly as shown in the video.
this implementation is for static site but how should we implement for dynamic site ?
It depends on the programming language/ technology and where you want to deploy it.
@@vdespa thanks
without runner register how your pipline work
?
Hi valentine, how do I stop my dev branch push to start running jobs. I only want to run jobs for master branch.
You may want to look into only/expect or rules keywords.
Hallo sir, please help me, im get error Error: Site not found. Please rerun "netlify link"
I still dont understand if you have to pass a password through a variable, how can I add that to the .gitlab-ci.yml editor?
Hi can you upload realtime projects
Sir I use my Local gitlab runner
i have this issue Error: Unable to open browser automatically: Running inside a docker container
You are now logged into your Netlify account!
Run netlify status for account details
To see all available commands run: netlify help
› Error: Site not found
Can you help me with this please
I keep getting an EACCES error which says "The operation was rejected by your operating system." Can you please help me solving the issue ?
Please see if this helps:
docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally/
i formation. Please please make some more detailed video on gitlab-ci.yml
I have a full GitLab CI course that can help you understand how to manage .gitlab-ci.yml files.
Hi I have seen your videos at Udemy look super ! could you please try to make a one pipeline for react JS with docker containerization _.gitlab.ci.yml in GitLab.
Thanks for the idea, will do!
Hello @Valentin Despa
I took your Gitlab CI CD course on Udemy
The content was so good and so helpful as well.
Just one issue I'm facing with respect to CI. I'm trying to install python packages using pip install command behind my company's proxy server for that I'm receiving 'proxy error' I tried to resolve the issue using export proxy HTTPS & HTTP but no luck
Thanks for your kind words. In regards to your issue, is the runner on your computer?
@@vdespa No I'm using a shared runner, but I suppose there is no issue with the runner because I'm able pull images
@@ananyamishra7896 I am not sure what the company proxy has to do with the shared runner.
@@vdespa Thank you for your response :)
Hello guys. Am I the only who has issue with auth?
Very good tutorial. Thank you.
I wanted to ask how to condition the build to test stage?
If the test stage fails, would it go ahead and do the other ones?
Good question. By default, if one stage fails, the rest of the stages are not executed.