Host MERN Stack for FREE - Render + Domain Name Setup

Today we will deploy the MERN project we developed in the previous video. For the people unfamiliar with the project, we developed a simple CRUD MERN-based project where you can view books, add books, update books and delete them.
Server + Client Host: render.com
GitHub Account: github.com
GitHub Desktop: desktop.github.com
Project Files: github.com/RaddyTheBrand/30.M...
☕ BuyMeACoffee: www.buymeacoffee.com/RaddyThe...
Discounts:
⚡ Hostinger: www.hostg.xyz/aff_c?offer_id=...
⚡ Elementor: be.elementor.com/visit/?bta=2...
Recording Equipment:
◾ Microphone: amzn.to/3uX0yvP
◾ Shotgun Mic: amzn.to/3aRsSJb
◾ Camera: amzn.to/3IMumkx
◾ Lens: amzn.to/3ARxvh8
◾ Lighting: amzn.to/3PBetj2
Computer Gear:
◾ Keyboard: amzn.to/3RCXRcC
◾ Headphones: amzn.to/3aIvskX
◾ Mouse: amzn.to/3VfVuxO
Connect with me:
◾ Website: www.raddy.dev
◾ Newsletter: www.raddy.co.uk/newsletter
Chapters:
◾ 0:00 Introduction:
◾ 0:39 Deploying Server
◾ 7:43 Adding Client .env
◾ 12:31 Deploying Client
◾ 16:32 Domain Setup
#mern #react #nodejs

[@RaddyDev]

Plenty of great hosting options to get you started especially when it comes to static sites. You shouldn't have to pay to host your portfolio, or small pet project

[@BEEsCODE]

this relly helped. thancks

[@viewsbyblur]

i got "Exited with status 1 while running your code. " error

[@PaschalAOgba]

nice tutorial

[@RaddyDev]

Glad you liked it!

[@kejiyuan681]

Thanks for your tutorial. Do you know how to handle domain name on cloudflare. I try on cloudflare, but it shows "Replace with Cloudflare's nameservers" to activate the DNS. But things like Render do not have any interface to replace the nameserver.

[@RaddyDev]

You need to change the Nameservers from your domain name provider. As far as I know you can't buy Domains on Render? Once you point your Nameservers to Cloudflare, you can then control your records from their platform and point the record to your Render website

[@animentalproducts5228]

To add a new web service on Render or even a static site, you're required to add your card information. It says that that need it for verification purposes.

[@RaddyDev]

They probably do it for newer accounts or have some restrictions in your country. My account is fairly old now and I never had to insert any billing info. That's a shame, maybe try another provider

[@animentalproducts5228]

@@RaddyDev yes, I tried with vercel and it worked!

[@fauzanahmad784]

@@RaddyDev can you please make a video on how to deploy nodejs app with expressjs and ejs files on vercel

[@ashleyrodriguez7820]

why does in my static site deployment didn't deploying and still taking to upload for so long

[@RaddyDev]

It could be anything. Have you looked at the Logs in Render. They are super helpful when it comes to deployment

[@viewsbyblur]

I got a different error when deploying my back end, it was '/opt/render/project/src/index.js' do you know what this error is?

[@zenno-pubgmobile7801]

same here did you find any solution?

[@viewsbyblur]

@@zenno-pubgmobile7801 dude it’s been 3 months and I still couldn’t deploy my finished version. Moved on to another project. I’ll probably look at it again this weekend

[@zenno-pubgmobile7801]

@@viewsbyblur if you find any solution share it with me

[@viewsbyblur]

@@zenno-pubgmobile7801 I gotchu, I’ll let you know if I’m able to figure anything out this weekend

[@zenno-pubgmobile7801]

@@viewsbyblur hey bro , any update ?

[@nanbenz7838]

Why when i refresh the website it just broke said "not found" ?, Thanks for the tut btw!!

[@RaddyDev]

Thank you for pointing it out. In Render, click on your static site - your React Application. 1) Find the Redirects/Rewrites tab on the left side. 2) In the Source input add "/*". In Destination input add "/index.html" and Action needs to be set to "Rewrite".

[@nanbenz7838]

@RaddyDev I fixed it, but everything was working fine, I added new book in and the photo was fine but after couple hours, the new photo is not working...?

[@RaddyDev]

@@nanbenz7838 I wonder if it syncs with your GitHub repo, meaning it will remove any new files. You could use something like Amazon S3

[@nanbenz7838]

@@RaddyDev ye it is sync with repo,

[@nanbenz7838]

@RaddyDev wait, so if I do like wut u did in the vids, is it fine or it the same ?

[@techwithdidier]

i tried deploying mine but it seems not to work i dont know what i am going to do in the configurations

[@techwithdidier]

{ "name": "camfreelance", "version": "1.0.0", "description": "", "main": "sever.js", "scripts": { "dev":"nodemon sever.js", "build": "npm i", "test": "echo \"Error: no test specified\" && exit 1", "start": " node server.js", "frontend": "npm start --prefix client", "backend" :"nodemon server.js", "both": "concurrently \"npm run sever.js" }, "author": "", "license": "ISC", "dependencies": { "bcryptjs": "^2.4.3", "cors": "^2.8.5", "dotenv": "^16.0.3", "express": "^4.18.2", "jsonwebtoken": "^9.0.0", "moment": "^2.29.4", "mongoose": "^7.1.1", "node": "^20.4.0", "nodemailer": "^6.9.2", "nodemon": "^2.0.22" }, "engines": { "node": ">=14.20.1" }, "devDependencies": { "nodemon": "^2.0.22" } } thats the package.json for the back end now th epackage .json for the front end is below { "name": "client", "version": "0.1.0", "private": true, "dependencies": { "@emotion/react": "^11.11.1", "@reduxjs/toolkit": "^1.9.5", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "antd": "^5.5.0", "axios": "^1.4.0", "moment": "^2.29.4", "react": "^18.2.0", "react-dom": "^18.2.0", "react-redux": "^8.0.5", "react-router-dom": "^6.11.1", "react-scripts": "5.0.1", "react-spinners": "^0.13.8", "react-truncate": "^2.4.0", "redux-devtools-extension": "^2.13.9", "redux-thunk": "^2.4.2", "styled-components": "^6.0.4", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "proxy": "localhost:5000" }

[@RaddyDev]

Hi, I would be more than happy to help. What is the error that you get when you deploy?

[@techwithdidier]

@@RaddyDev it rturns some error status code 404

[@RaddyDev]

Go in your project Logs and see what the error is there. That would give you an indication of what it could be

[@RitikRaj-we2sc]

It takes 2-3 minutes for my website to load. And after that it works fine why is it so ?

[@RaddyDev]

Do you mean seconds?

[@RitikRaj-we2sc]

@@RaddyDev no minutes , today i timed it, it took 1 min 10 seconds but after that when I accessed it , it opened fine

[@RitikRaj-we2sc]

i found out that render spins down our service when it's inactive for more than 15 mints.

[@samjacker]

@@RitikRaj-we2sc true same thing for me