Teach Jenn how to Deploy a React App with Vite and Vercel

Anthony Campolo teaches Jenn how to Deploy a React App with Vite and Vercel. Livestream from 7/5/2022.
In this video, we'll show you how to deploy a React App with Vite and Vercel. Vercel is a fast, scalable and easy-to-use CDN for React. Vite is a distributed web hosting platform that makes it easy to deploy and manage web applications.
We'll walk you through the steps needed to deploy a React App with Vite and Vercel. This video is a great way to learn about Vercel and Vite and get started Deploying a React App!
Anthony's contact information: ajcwebdev.com/
Checkout GitHub Repo of the project: github.com/jen...
Vercel App of Project: reactapp070520...
00:00:00
00:00:40 Guest Introduction and Topic
00:02:30 Mention of hashnode: [hashnode.com/](hashnode.com/)
00:03:06 A bit of Anthony’s journey and the value of being a newb
00:06:50 Africa, Coding Therapist on Twitter: [ / africakenyah ]( / africakenyah); [africamincey.com](t.co/YrzStvYfQz)
00:08:23 Let’s get started with React, Vite, and Vercel (how to say Vite)
00:11:28 Why React vs Vanilla JS?
00:14:00 Generate project with yarn
00:15:10 What is terminal?
00:17:00 yarn create vite
00:19:20 What is CLI? Command Line Interface = Terminal
00:19:55 The first time “code .” does not work. A forever issue for Jenn
00:21:46 How to cd (change directory) into created folder
00:25:15 Node Modules, are what?
00:26:00 Run project locally on machine with “yarn dev” in terminal
00:26:18 What is local host?
00:27:16 React App Developer is made, in one click!
00:28:11 SRC Folder to app.jsx
00:32:09 3 functions of a file, import, the component itself, export into another file
00:36:38 upload to git repo (repo.new in browser trick)
00:42:46 [Vercel.com](Vercel.com)
00:46:00 Vercel app
00:49:13 What’s the difference between a webapp and a website? Website is static, webapp is interactive
00:51:40 What is an RSS feed?
*Tools/Languages/Products used:*
*React.js:* [reactjs.org/](reactjs.org/) [ / reactjs ]( / reactjs )
*Vite:* [vitejs.dev/](vitejs.dev/) [ / vite_js ]( / vite_js )
*Vercel:* [vercel.com/](vercel.com/) [ / vercel ]( / vercel )
*VS Code:* [code.visualstu...](code.visualstu...)
**Yarn**: [classic.yarnpk...](classic.yarnpk...)
Briefly mentioned:
Webpack: [www.vuemastery...](www.vuemastery...)
JavaScript Events: [www.w3schools....](www.w3schools....)
Yarn vs npm: [www.knowledgeh...](www.knowledgeh...)
Node: [nodejs.org/en/](nodejs.org/en/)
Mac Terminal (Command Line Interface): [www.techopedia...](www.techopedia...)
GUI: [www.gartner.co... graphics-based operating system,Apple Macintosh in the 1980s](www.gartner.co...)
git repo: [www.gitkraken....](www.gitkraken....)
Svelt: [ • Teach Jenn Svelte & We... ]( • Teach Jenn Svelte & We... )
Vue: [vuejs.org/guid...](vuejs.org/guid...)
Terminal shortcuts: [support.apple....](support.apple....)
Brave Browser: [brave.com/](brave.com/)
jsx: [www.w3schools....](www.w3schools....)
Component hierarchy in React: [dev.mobify.com...](dev.mobify.com...)
React Dev tools can help with hierarchy: [www.npmjs.com/...](www.npmjs.com/...)
1Pass: [1password.com/](1password.com/)

[@furylogistics9412]

Hii im trying to deploy my vite react on vercel but proxy is not working after deployment

[@Tomiciatko]

Cool, my interest is MERN. How about deploying back and front end ?

[@jennjunod]

I'll see if Anthony can come answer! :)