Deploy React App on Google App Engine

Рет қаралды 16,955

3 жыл бұрын

Steps:
1. Create React App
2. Push React App to Git Repo
3. Create Google Account trail version
4. create a project
5. create appengine application
6. git clone project
7. npm i & npm run build
8. remove other files expect build folder
9. create app.yaml file and insert the content there
10. gcloud app deploy
11. gcloud app browse
Copy paste the app.yaml content
---------------------------------------------------------------------------
runtime: nodejs12
handlers:
Serve all static files with url ending with a file extension
- url: /(.*\..+)$
static_files: build/\1
upload: build/(.*\..+)$
Catch all handler to index.html
- url: /.*
static_files: build/index.html
upload: build/index.html
---------------------------------------------------------------------------
Please like, share and subscribe if you find the video useful.
Checkout the Playlists:
👉 FrontEnd JavaScript Interview Questions: • #4 JavaScript Intervie...
👉 JavaScript Tutorials:
• Difference Between var...
👉 Essentials for Web developers:
• How Does the Browser C...
👉 React Hooks & Latest concepts:
• Rules of Hooks In Reac...
👉 HTML Tutorials:
• WebStorage APIs Sessio...
👉 CSS Tutorials:
• How Does CSS Work | Th...
👉 Coding Challenges:
• Coding Challenge #5: A...
👉 Best Practices & Common mistakes:
• Best Practices of Usin...
👉 React js for Beginners:
• Why To Use JSX in Reac...
👉 Things To Know As JavaScript/FrontEnd Developer:
• Things To Know As Java...
LIKE | SHARE | SUBSCRIBE 😊
#javascript #reactjs #react #webdevelopment #frontenddevelopment #uidevelopment
#javascriptinterviewquestions #interviewquestions #codingchallenges
👇👇👇
Follow me on
Telegram: t.me/+HTxs0I-Jvu75RxWM
Instagram: / rethinkingui
Twitter: / suresh9058
LinkedIn: / suresh-mende-a1a20459

Пікірлер: 34

@Tyuvfdhb 3 жыл бұрын

couldnt be explained simpler than this. Noone focuses on the real steps. everyone has tutorials for automatic deployment which are way too complicated. this is the best one i have found so far

@RethinkingUI 3 жыл бұрын

Thank u

@danielleivy8180 Жыл бұрын

That's my issue. Although I need to do automatic deployment right after this, I think it's important to break each process down and iterate. Know how to deploy in the gui or shell first, then translate all of your steps to IaC. I wasted about 2 days before I realized I was overcomplicating things by going straight to IaC without starting with the basics first.

@Alec0124 2 жыл бұрын

Best explanation I've found. Thank you sir!

@RethinkingUI 2 жыл бұрын

Thank you

@xuantienpham5777 Жыл бұрын

Worked extremely quickly. Thank you so much!

@RethinkingUI Жыл бұрын

Your Welcome. Please share the video

@darnasowjanya2628 3 жыл бұрын

Clear and nice explanation

@PrudhvirajDandi 3 жыл бұрын

Nice Explanation, thank you so much for sharing such a beautiful video's for us.

@RethinkingUI 3 жыл бұрын

Thank u @Prudhviraj

@skyi5987 5 ай бұрын

Thank you sir, easiest video ever

@RethinkingUI 5 ай бұрын

Thank you

@veeruj1282 3 жыл бұрын

Nice explanation bro

@RethinkingUI 3 жыл бұрын

Thank u @Veeru

@kishoreandra 3 жыл бұрын

👌🏻...

@madhan5407 Жыл бұрын

Hi can you make video to deploy react + springboot application on google cloud springboot needs to be deployed on GKE and react on app engine I tried but getting mixed content warning so can you help here

@yadav-r 3 ай бұрын

Thank you for sharing. If possible, can you please do a video on YAML files, why and how of it, I am stuck there. If I create a Remix app, then this YAML file does not work for it and I have no clue what to change/adapt for that and whatif some new framework I wish to use. Thank you again man.

@MT4d616e 10 ай бұрын

thanks very much.. it was nice.. I also tried the same way to deploy Nextjs app but it is throwing 500 internal error.. how to solve that. ?

@gajamanurag7155 Жыл бұрын

Hi, I did the same thing as yours, app got deployed without any errors and got url. When I navigate to that URL I don't see my React application. I can see the name and icon in the tab section. Could please help me with this?

@RethinkingUI Жыл бұрын

Check in the console any error?

@CoolManGen Жыл бұрын

I copy "app.yaml" config, and it work! Thanks a lot!!!🙏🙏🙏

@RethinkingUI Жыл бұрын

Your Welcome

@PrudhvirajDandi 3 жыл бұрын

Instead of Google provided URL, can we use our own URL?

@RethinkingUI 3 жыл бұрын

Yes, we also can provide a custom domain. In-App Engine Right bottom we will have settings Options, In that second tab is for custom domains there we can set our own domain. Please check it.

@abhishektiwari7421 Жыл бұрын

but if i m deleting the files then again taking pull from the branch ...so it is showing some error while creating the build...so want to know is it neccessary to delete the files?

@RethinkingUI Жыл бұрын

Am not sure about what your talking? Can you please keep the error here. Also steps you did and which step you got strucked.