How to Deploy a Full-Stack Web Application - React Frontend | Node.js Backend | MySQL Database

In this video I will show you how to deploy a full-stack web application. The focus is not on the code itself but on the process of deploying and connecting all parts of a finished full-stack project. We will upload and configure a React frontend on Netlify, a Node.js backend and a MySQL database on Railway and make sure that they are connected. In the end you will have a functional full-stack web application online.
Chapters:
00:00 Requirements
00:45 Choosing where to deploy
01:44 Railway overview
03:11 DATABASE
06:40 Environment variables
11:30 BACKEND
16:45 Railway's monthly limit
17:44 FRONTEND
22:29 Netlify deploy settings
26:32 Netlify env variables
28:10 Live demo

[@wes8459]

I finally was able to piece together the deployment for my full stack MERN app. Thanks for your help!!

[@siddeshgawande534]

we need more videos like this really appreciate the work

[@ArneRief]

Thank you, I'm really happy to hear that!

[@claudiolenci]

One of the best tutorial for deploying an application I have ever seen! I will certainly test if this method works without paying anything but, for the moment, I'd really like to thank you. This was much more useful than 99% of boring tutorials on yt.

[@ArneRief]

Thank you very much! I'm happy to hear that the video was useful to you, just know that Railway reworked their free plan and changed what they offer since I made this video. You might not be able to follow 100% of the steps I showed in the video anymore with the new plan, but overall it should still work and the steps for deploying are similar on other sites/services. I really appreciate your nice words, best of luck with deploying your project(s)!

[@m_jdm357]

Thanks to you I've deployed my Rest API

[@ArneRief]

Awesome! I'm really happy to hear that. Congrats!

[@user-tx6gb9ft2c]

Why serve the front end on netlify? Why not just put it all on Railway?

[@TanviGaikwad-mq3np]

Thanks a lot, this video really helped me to deploy my mern project. I was not able to deploy it from other sites, but now I can, and my website is live now. Thank you soo much🤧

[@ArneRief]

You're very welcome! Makes me really happy to hear that the video was useful for your mern project too and not just for projects with a MySQL database. That's awesome, congrats!

[@sportsupdate1462]

Can you help me to deploy my mern project,i am not able to do it

[@sportsupdate1462]

@@TanviGaikwad-mq3np I have done one mern project but dont know how to deploy it plz help me

[@sportsupdate1462]

​@@TanviGaikwad-mq3np hey mam, I know about netlifly but for backend mongodb I am not getting how to do it. Can you please make a video on it and upload on ur channel. Or how should I connect you mam?? Plz help me😢. KZbin comment not allow to write insta id

[@TanviGaikwad-mq3np]

@@sportsupdate1462 i can't tell you like this, you can refere other backend deployment videos , that can help. (I'm not able to add link in comments sadly)

[@davidosimiri7344]

I will follow every bit of your video...I just subscribe

[@ArneRief]

Thank you, happy to hear that!

[@RolandTutorials]

very useful thanks alot bro

[@ArneRief]

Happy to hear that, thank you!

[@akashchauhan9860]

Bro this explanation and this video are 🔥🔥🔥. I was trying to use Render earlier but they make you pay if you use SQL database. Railway is so much better.

[@ArneRief]

Glad to hear that the video was useful to you! Yeah Railway is great, they make it so fast and easy to deploy SQL databases for free where other services require payment or come with a setup that is more complicated.

[@akashchauhan9860]

@@ArneRief Yea agreed. I am however struggling to make my application run on railway for some reason. I seem to be getting the cors error and none of my front end inputs are registering into the SQL table

[@ArneRief]

Strange, if your front end is already deployed and not running on your localhost it should work. Could you please check if: - npm cors package is installed in the back end - all environment variables are set both on Netlify and Railway for the front end and the back end - the environment variables for the connection URLs are correct, both the name-prefix of the React envs and the template literals to connect to the database URL (they are missing the $ and the process.env. prefix when copying the ULR string directly from Railway) Off the top of my head these are the problems I can think of. I hope this helps, good luck and feel free to let me know if it works or still throws some error.

[@akashchauhan9860]

@@ArneRief Thanks let me try those and will let you know if I come across problems still. By the way can I launch front end on railyway too? I like it better that way having all of them on one platform

[@ArneRief]

Yes, you can launch the front end on Railway too. It's very similar to the way I show with Netlify, you just have to select "New" from within your existing Railway project where your database and back end already are and select "Deploy from Github repo". When it starts deploying and shows up next to the DB and back end, just select it and under "Settings" you have to specify the correct build command (npm run build - or whatever build command you set up in your package.json), the correct root directory (wherever package.json is, by default it's just "/") and then go to "Variables" and create a new environment variable for the back end URL, really just like I show on Netlify. Good luck!

[@opencode1]

Please keep making other videos like this. Who cares about CSS, we want more logic (Oerd) :))))

[@opencode1]

I have subscribed to your channel gonna stalk you with my random email usage

[@prabhakarmishra2182]

I liked the way you teach, many many thanks to you bro, can you please make same video subjecting AWS EC2 (free tier) as a service provider, one more thing I would like to ask you is that AWS provides us 750 hours free monthly usage, does it mean that we can host our frontend and backend and database for free for one month?

[@ArneRief]

Hi Prabhakar, thanks for your kind words! Yes, AWS EC2 allows hosting a fullstack application but that would be much more complicated than what I show in the video. With AWS EC2 you can set up a Linux server virtual machine and host your frontend, backend and database on there. But that means you would also have to manage the server, install all necessary software and configure several things. Another way to host a fullstack app with AWS is the AWS Amplify framework which has a free tier for 1 year, after that it costs money and it has a bit of a learning curve again. Overall I think that AWS services can be overwhelming and a little too complicated for beginners. That's why I didn't choose them for a video about deploying a project for the first time. But maybe I can make a video about that topic sometime in the future, let's see.

[@prabhakarmishra2182]

@@ArneRief Thank you so much, you doing a great job, I would really be thankful to you if any such video comes up, in fact if you teach on Udemy i would surely purchase your courses if the quality would be same as of this video, God bless you dear...

[@darlansantoscarvalho6619]

Can u send a link to your github or that repository? I would like to see your data structure. Great video btw

[@ArneRief]

Thank you, unfortunately I deleted that repository because this app was really very basic and quickly thrown together just for the video. I didn't think it was worthwhile to keep around, especially since the video was not even about the code. Sorry.

[@sulavbaral9972]

When i try to deploy in railway everything goes well in the build logs also it indicates that the server has started but when i visit the site i get an error 503, idk what im doing weong

[@ArneRief]

Unfortunately I can't pin down the problem from a distance, there could be many reasons... could you please check if you have selected the right root directory to deploy from (wherever you package.json file is, "/" by deault, otherwise e.g. "/backend" in my case in the video) and also if you set the build directory ("/build") and the correct build command in case the React frontend is the one making problems (for the Node.js backend you shouldn't need a build command and directory). Other than that I'd check if the environment variables are set correctly on Railway and your code. But I can only guess, sorry. Good luck!

[@user-lm1lc8px6l]

I also get an error 503 T^T

[@elemashige3613]

Hi Arne. I got this error: Command failed with exit code 1: CI=false npm build

[@ArneRief]

Hi Ele. There could be several reasons for this error, could you please check if: a) the build command is correct - in your error message it says "npm build" but it should be "npm run build" b) your base directory (in my case it was "/frontend") has the package.json file in it - Netlify needs access to that file c) the package.json file includes the line "build": "react-scripts build" - if you build your React frontend with create-react-app, this script is predefined and should be there by default. Without this script, the whole "npm run build" command will not work. Hopefully it's one of these issues causing the error, then it can be solved quickly. Good luck and feel free to let me know if everything works!

[@eumm11]

this is an excellent explanation, but i was just wondering, why didn't you deploy the frontend in railway aswell?

[@ArneRief]

Thank you! I just wanted to show the deployment process on a different platform, to avoid creating the impression that Railway is your only/best option for deploying anything. For somebody only interested in deploying a frontend I would definitely recommend Netlify over Railway, because Netlify's free plan is much more generous. But of course you could also deploy the frontend on Railway as well, if you have a full-stack application and prefer to keep everything in one place.

[@eumm11]

@@ArneRief ah alright, i see. i then thought that maybe you did it to save some money, because i guess the front end also adds up on the final bill

[@gayspunchbop]

when i click on the domain of the backend i get a railway page error saying "Application failed to respond" what could possibly be the problem?

[@ArneRief]

It's difficult to pin down the problem from a distance but most likely the build process failed or some configuration prevents Railway to access your app. Could you please check two things: 1.) If your deploy and build settings are correct? That means setting the root directory on Railway to the correct path to your Github repo, it is where your package.json file is located. Railway (and Netlify) needs direct access to package.json and this file could be another source of the problem: if you have a build command like "npm/yarn run build" to create a production build of your app you need to specify that for Railway too so it can run the command, and create the optimized build version for deployment. I only had that for my front-end React app but not for the back-end in the video. 2.) If your environment variables are set correctly? Especially PORT, if it has a hardcoded value in your application then railway will be unable to connect. It should be set to "const port = process.env.PORT || 5000" in your application, the 5000 doesn't matter and could be another number too, it's only a fallback for your localhost, but the process.env.PORT is necessary for Railway and will only work if you install the dotenv npm package and set the environment variable on Railway like I show in the video. Otherwise, when you click on your project on the Railway start page there should be an "Activity" side bar displaying your deployments. You can select the last one and check the Deploy Logs and Build Logs, they might tell you more about the problem. Hopefully one of these things is causing the issue and the problem can be solved like that. Good luck!

[@abirhal2391]

i don't have query option on my raillway project !

[@yashsinghal237]

have you find any alternative

[@beesechurger7667]

is it only me or they did remove the query which makes it complicated to make table now, and yeah you can connect mysql but im using workbench , and when i try to connect it, it says some of its function might not work because of incompatibility

[@ArneRief]

Yeah, unfortunately Railway changed several things since I made this video, and not for the better... I hope you could get it to work.

[@vsarts1967]

can i do the same for angular frontend?

[@ArneRief]

Yes! I haven't worked with Angular yet, I think your build command will not be "npm run build" but something else. But other than that it will be exactly the same to deploy an Angular frontend on Netlify. Good luck!

[@vsarts1967]

@@ArneRief thank you .

[@galaxyend8791]

how deploy laravel backend reactjs frontend sir ?

[@ArneRief]

Hi, I haven't worked with Laravel myself yet but I know that Railway offers a template for Laravel backends too. If you create a new project on Railway and select "Deploy a template", you can select Laravel there. Connecting your Laravel backend to your React frontend should then work in a similar way like I've shown in the video. I hope this will help you, good luck!

[@clintcode9449]

the query and connect tab now do not show in railway

[@ArneRief]

Yeah, unfortunately they have changed a lot of things on Railway since I made this video, especially on the free plan/tier. I haven't deployed anything on Railway recently so I'm not sure where they moved the tabs or if they renamed them, but there still has to be some way to connect and make queries.

[@syedahsannoori330]

My backend crashes after every 5 minutes on railway, what's the reason behind this any idea?

[@ArneRief]

No idea my friend, sorry but from afar it's impossible to say why your backend crashes. There can be many reasons: because of railway or because of your code or because of the way you deployed or a combination of those... all I can tell you is to check the deploy logs and error logs on railway . Also, they've changed a lot on railway since I released this video, including their plans and the free tier/plan. It could also be that the new plan limits your backend so much that it already used up all capacities for this month. But I can't say for sure, I haven't deployed anything on railway with the free tier in a while now.

[@syedahsannoori330]

@@ArneRief Ok I will see, Thanks!

[@arupde6320]

be regular

[@harsh2k2]

not working any more

[@shivamshende642]

Bro do you got any another way???