This is the beginning of the React + Vite Task for the Front-end Team 💯
🥼 prerequisites:
Before you begin, make sure you have the following installed:
Node.js (version 14.x or later)
npm
I highly suggest using nvm which is a Node Version Manager to install Node.js and npm. This is also recommended from the npm website itself here. Instructions for the installation of that can be found here (for Linux and MacOS) and for Windows Machines, try here.
To understand why I recommend nvm, here are the reasons it will save you time and frustration:
Manage Multiple Node Versions
Problem: Different projects may require different versions of Node.js. Manually switching between versions can be cumbersome and error-prone.
Solution: nvm allows you to easily install and switch between multiple versions of Node.js. This ensures that you can work on different projects with the appropriate Node version without conflicts.
Simplified Setup
Problem: Installing Node.js directly from the Node.js website can sometimes lead to permission issues, especially on macOS and Linux systems.
Solution: nvm installs Node.js in your home directory, avoiding the need for sudo and ensuring that you don't run into permission issues.
Consistent Environment
Problem: Collaborating with a team can be challenging if everyone is using different versions of Node.js. This can lead to inconsistencies and bugs that are hard to reproduce.
Solution: With nvm, you can specify the Node.js version required for a project in a .nvmrc file. Team members can then easily synchronize their environment to use the same Node.js version.
Easy Updates
Problem: Keeping Node.js up-to-date is crucial for security and access to new features. However, managing updates manually can be tedious.
Solution: nvm makes it easy to install the latest version of Node.js and switch to it when needed. You can also maintain older versions for compatibility with existing projects.
Improved Development Workflow
Problem: Switching between projects with different Node.js requirements can be slow and disrupt your workflow.
Solution: nvm provides commands to quickly switch Node.js versions and manage your development environment efficiently.
🧇 Front-End Development Setup with React.js and Vite
Step-by-Step Setup 🌱
1. Create a New Vite Project
First, create a new Vite project with React.js template.
But, What is Vite?
vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. it's main job is provide a local development server for you to preview what you are making as you make it. It also is what will be used to build our Front-End using the build command when we get ready to deploy to a server.
# Using npm
npm create vite@latest my-react-app --template react
2. Navigate to the Project Directory
cd my-react-app
3. Install Dependencies (if there are any)
npm install
What are Dependencies?
When you're working on a project, especially in web development, you often need to use code written by other developers to help you build your application. These pieces of code are called "dependencies" because your project depends on them to work correctly. Dependencies can be libraries or frameworks that provide additional functionality without you having to write everything from scratch.
How it works 🤸♀
package.json: When you set up your project, you have a package.json file. This file keeps track of the dependencies your project needs.
npm install: Running npm install looks at the package.json file and installs all the listed dependencies into a node_modules folder in your project directory. This folder contains all the code for the libraries you need. Warning: Do not git push the node_modules folder to github, ignore it in your .gitignore file.
4. Start the Development Server
npm run dev
This will start a local development server and you can view your application by navigating to http://localhost:3000 in your browser.
khenderson20
commented
4 months ago
This is the beginning of the React + Vite Task for the Front-end Team 💯
🥼 prerequisites:
Before you begin, make sure you have the following installed:
I highly suggest using nvm which is a Node Version Manager to install Node.js and npm. This is also recommended from the npm website itself here. Instructions for the installation of that can be found here (for Linux and MacOS) and for Windows Machines, try here.
To understand why I recommend nvm, here are the reasons it will save you time and frustration:
Manage Multiple Node Versions
Problem: Different projects may require different versions of Node.js. Manually switching between versions can be cumbersome and error-prone.
Solution: nvm allows you to easily install and switch between multiple versions of Node.js. This ensures that you can work on different projects with the appropriate Node version without conflicts.
Simplified Setup
Problem: Installing Node.js directly from the Node.js website can sometimes lead to permission issues, especially on macOS and Linux systems.
Solution: nvm installs Node.js in your home directory, avoiding the need for sudo and ensuring that you don't run into permission issues.
Consistent Environment
Problem: Collaborating with a team can be challenging if everyone is using different versions of Node.js. This can lead to inconsistencies and bugs that are hard to reproduce.
Solution: With nvm, you can specify the Node.js version required for a project in a
.nvmrcfile. Team members can then easily synchronize their environment to use the same Node.js version.Easy Updates
Problem: Keeping Node.js up-to-date is crucial for security and access to new features. However, managing updates manually can be tedious.
Solution: nvm makes it easy to install the latest version of Node.js and switch to it when needed. You can also maintain older versions for compatibility with existing projects.
Improved Development Workflow
Problem: Switching between projects with different Node.js requirements can be slow and disrupt your workflow.
Solution: nvm provides commands to quickly switch Node.js versions and manage your development environment efficiently.
🧇 Front-End Development Setup with React.js and Vite
Step-by-Step Setup 🌱
1. Create a New Vite Project
First, create a new Vite project with React.js template.
But, What is Vite?
viteis a build tool that aims to provide a faster and leaner development experience for modern web projects. it's main job is provide a local development server for you to preview what you are making as you make it. It also is what will be used to build our Front-End using thebuildcommand when we get ready to deploy to a server.2. Navigate to the Project Directory
3. Install Dependencies (if there are any)
What are Dependencies?
When you're working on a project, especially in web development, you often need to use code written by other developers to help you build your application. These pieces of code are called "dependencies" because your project depends on them to work correctly. Dependencies can be libraries or frameworks that provide additional functionality without you having to write everything from scratch.
How it works 🤸♀
package.jsonfile. This file keeps track of the dependencies your project needs.npm installlooks at thepackage.jsonfile and installs all the listed dependencies into anode_modulesfolder in your project directory. This folder contains all the code for the libraries you need. Warning: Do notgit pushthe node_modules folder to github, ignore it in your.gitignorefile.4. Start the Development Server
This will start a local development server and you can view your application by navigating to
http://localhost:3000in your browser.5. What your Project Structure will look like
index.htmlfile.