Deploy React App To Netlify

Whenever I had a react or laravel project, I would always deploy it using Heroku. Heroku was bought out by SalesForce and Heroku is not the same anymore. I decided to look for alternitives. I have found two alternatives: Cloudflare Pages and Tetlify to deploy my React applications. These instruaction assumes you already installed the Netlify CLI and are logged into Netlify CLI, if not, follow the more detailed instructions below.

  1. CD into the React Project you wish to publish to Netlify
    $ cd F:\apachefriends\xampp\htdocs\over-imgV5\REACT\MYOWN\vite-upload
  2. Create your build. Since I am using Vite, Vite created a "dist" folder instead of a "build" folder
    $ npm run build
  3. Initialize Netlify, provide the distribution folder, create site manually & give app name:
    • $ netlify init
    • ? Publish directory (.) > dist
    • ? Do you want to create a Netlify site without a git repository? (Use arrow keys) > Yes, create and deploy site manually
    • ? Select TEAM: My Personal Projects? Site name (leave blank for a random name; you can change it later): my-app-name
  4. Deploy your app to Netlify. Deploy it to your main site URL with the --prod flag.
    $ netlify deploy --prod
  5. Visit Website URL: https://my-app-name.netlify.app
  6. Done

More detailed instructions:


Follow these steps to publish new site to netlify
video: e4mPdWi3cw8

Free TEMPLATES:
startbootstrap.com
https://html5up.net/

Get started with Netlify CLI
SEE: https://docs.netlify.com/cli/get-started/

$ npm install netlify-cli -g

Confirm you have installed netlify CLI
$ netlify

Authentication
$ netlify login

config.json location
AppData\Roaming\netlify\Config\config.json

Automated setup by executing this command from the project root folder
$ netlify init

? Do you want to create a Netlify site without a git repository? (Use arrow keys)
> Yes, create and deploy site manually
  No, I will connect this directory with GitHub first

> Select Yes

> Select TEAM:
My Personal Projects

> Select Site Name:
Site name (leave blank for a random name; you can change it later):

############################################
Site Created

Admin URL: https://app.netlify.com/sites/my-app-name
URL:       https://my-app-name.netlify.app
Site ID:   117aeea0-sixe-4b71-8e34-40b7d8a7118f

Linked to my-app-name
"my-app-name" site was created

To deploy to this site. Run your site build and then netlify deploy
############################################

CHECK THE APP STATUS: https://app.netlify.com/sites/my-app-name/overview
YOU CAN CHECK THE URL will say: SITE NOT FOUND:
https://my-app-name.netlify.app

USING VITE: Build the app
$ npm run build

the dist/ folder will be created, now you can deply the app
$ netlify deploy

Please provide a publish directory (e.g. "public" or "dist" or "."):
F:\apachefriends\xampp\htdocs\over-imgV5\REACT\MYOWN\vite-upload
? Publish directory (.) dist

MESSAGE WILL SAY:
Deploy path: F:\apachefriends\xampp\htdocs\over-imgV5\REACT\MYOWN\vite-upload\dist
Deploying to draft URL...
✔ Finished hashing
✔ CDN requesting 3 files
✔ Finished uploading 3 assets
✔ Deploy is live!

Logs:              https://app.netlify.com/sites/my-app-name/deploys/edw8563c2f36f7769036c4c
Website Draft URL: https://edw8563c2f36f7769036c4c--my-app-name.netlify.app

If everything looks good on your draft URL, deploy it to your main site URL with the --prod flag.      

$ netlify deploy --prod

Deploy path: F:\apachefriends\xampp\htdocs\over-imgV5\REACT\MYOWN\vite-upload\dist
Deploying to main site URL...
✔ Finished hashing
✔ CDN requesting 0 files
✔ Finished uploading 0 assets
✔ Deploy is live!

Logs:              https://app.netlify.com/sites/my-app-name/deploys/edw85c33b84357b3a89415d
Unique Deploy URL: https://edw85c33b84357b3a89415d--my-app-name.netlify.app
Website URL:       https://my-app-name.netlify.app

Done