Vite Deploys

ViteDeplay_Part2.md

PART 2: Additional work to deploying React Project : Git + Looking at folder structure.

PART 2 : Git initialization and publish to remote on Github.com

If we look at the terminal now, we can see that project is deployed but we can't use the same terminal, so we add a new split terminal through the below setting. This terminal will be used for Git purposes.

---

We now have split terminal ready to do our project.

The left side terminal will keep showing warnings and error as we add more code. So use it to read the errors. If needed. You can also see this in console of Inspect browser

The right side of terminal should be used for git purposes.

Now what we have done is just created a local directory with just the files created by running the command. To confirm if git repository is created or not, we will run the git status command.

As you can see below no repository exists, so file changes we do may not be tracked. We need to create a Git repository now.

To create a git repository use git init

This will make a empty repository for the folder.

Next we need to add the files to this git repository. So we use git add . git add dot to add all the files created till now to git repository just created.

Now all the files are stage, we can commit these files using Git command git commit -m "initial setup" This will commit the staged changes with commit message as "initial setup.

Now we have successfully saved all changes made till now to a git repository but the changes are there only in local machine.

Let's connect it to remote repository:

To connect to remote repository - connect to branch - this will prompt to create a new repository with same name.

This will prompt to create Github repository with same name or you can change name also in text box: Select either to create public or private repository.

While publishing you can see progress here:

Once published, you can ignore the pull request notification and click on view on github to see the repository created.

Here's the repository created online:

You can now visit the terminal again and type clear to clear the terminal of previous messages.

NOTE: Once the branch is published you can push the committed code to remote using git push origin <main/master>

---

Now let's look at folder structure

You can remove or edit any of the files here.

To start from scratch

• Remove CSS configurations entirely from App.css and index.css
• You can also entirely remove contents from App.jsx file

NOTE: If you planning to use React Router then you can also set it up. Here main.jsx is the file like index.jsx in CRA.

• Import BrowserRouter after making sure that react-router and react-router-dom are added in package.json file.

As you keep adding more code, the alignment of code written may look messy. Use Prettier VS Code Extension and then right click and Format Document if a popup comes select Prettier and then you can see code formatted to look cleaner in view.

• Wrap the BrowserRouter around <App/> and then proceed to make a <Home/> component

• You can then setup Router in App.jsx with routes as <Route path="/" element={<Home />} /> which is wrapped around <Routes> </Routes>

---

For subsequent changes along with Ctrl + S or Autosaving on VS Code, You also need to do:

• git add . ( to stage or add all files saved till now to git history )
• git commit -m "<commit message>"
• git push origin <branchname>

If you close the session of VS Code which has the terminal running updates from the server - the server is also stopped. If you restart VS Code again, navigate to folder and re-start the server with npm run dev Then use split terminal to run the git commands.

NOTE: If you have deployed your React app via Github repository, all the changes will be read and for every commit - there will be deploys on Netlify - if there are errors during development - some builds will fail. Resolve errors to deploy on Netlify / Vercel successfully.

Make sure to import necessary packages to avoid errors. If you do not see any error during runtime and just see blank screen, you can check console in Inspect Browser

ViteDeploy.md

PART 1: Deploying React Project locally using Vite + NPM

PART 1 : Creating a basic folder structure for React Project

Open your VS Code terminal and run the following command in any folder to create a new Vite project with React support:

npm create vite@latest my-react-project --template react

Replace my-react-project with any project name. This will be your folder name.

Then Select React from below screen

Select Javascript

That's it you will see command to proceed further:

After that there are 2 steps:

1. Navigate to the project directory created with the name you chose earlier. Here cd my-react-project will navigate to the folder created.

2. You now need to type code . that is code spacebar and dot - this will open your newly created my-react-project in new window.

---

Now we will begin. Open the terminal using Windows + backtick and install packages

Packages will keep getting installed and you will see progress bar.

Once you are done installing you will see the terminal free again to type. You can igore these warnings.

You can install packages you don't see installed in package.json file and you require for your project using npm install <package name> Here I am installing react-router and react-router-dom

Now I have installed all the required packages, So I am going to deploy this project using npm run dev command. This command was displayed just after the my-react-project creation using npm command.

---

Now running npm run dev the project is deployed and you can view it on your browser. Click on the link or type the link to see your deployed project.

You can it deployed like this:

---

THIS IS PART 1 - Where we just create a basic folder structure to start our React project. In Part 2 - We will see git repository initialization and publishing to remote, also about the folder structure.