Web Framework Quickstart Guide

While React used to have a dedicated tool called create-react-app, it's no longer suggested to use for modern React apps.

Instead, we can use a tool built by the Vue maintainers (of all things!) that supports React and other frameworks as first-party integrations: Vite.

Using Vite, we can quickly generate a React project.

Pre-requisites

To get started with Vite, there's a few things we should know about first:

• Know what Node and NPM are and how to use them
• How to install Node and NPM

That's it!

Usage

Now that we have our pre-requisites out of the way, let's create a React template using Vite:

npm create vite@latest

This will start a script that guides you through an interactive setup process.

1. First, give Vite your project name:

2. Select "React" as your framework:

3. Select "JavaScript" or "TypeScript":

If you're unfamiliar with TypeScript, it's an addition to JavaScript that allows you to add "compile-time types" to your code.

Confused? I wrote an article that explains what that means here.

You may select SWC if you'd like here as well. At a high level, it's an alternative method of compiling your code from the default. You may or may not notice a speed increase if you select it, but errors may be harder to debug as it's less commonly used.

Note

If you're following along with my book series "The Framework Field Guide", please select "JavaScript". TypeScript is useful but complex and the series' code samples do not use TypeScript, nor does the series teach TypeScript.

4. Run the commands printed in the final output of Vite:

cd [your-project-name]npm installnpm run dev

5. If all worked, once your packages are installed you should see this template screen:

Now when you modify src/App.jsx (or src/App.tsx if you selected TypeScript) it will refresh the screen for you and preview your changes immediately.

This auto-refresh on code change is called "HMR" or "Hot Module Reloading"

The Angular team maintains a CLI tool that allows you to generate new projects, upgrade existing projects, and more called Angular CLI.

Using Angular CLI, we can quickly generate an Angular project.

Pre-requisites

To get started with Angular CLI, there's a few things we should know about first:

• Know what Node and NPM are and how to use them

• How to install Node and NPM

• Install Angular CLI globally:

  npm install -g @angular/cli

That's it!

Usage

Now that we have our pre-requisites out of the way, let's create an Angular template using Angular CLI:

ng new my-app

This will start a script that guides you through an interactive setup process.

1. First, select if you want to write CSS or use a CSS pre-processor like SCSS or Less:

If you don't know what SCSS or Less are, that's okay. They're optional alternative methods for writing CSS with additional features.

It's suggested to select "CSS" for newcomers.

2. Then, tell Angular CLI if you want to use Server-Side Rendering (SSR) or Static Site Generation (SSG):

While "Server Side Rendering" (SSR) and "Static Site Generation" (SSG) are useful, I wouldn't recommend utilizing those tools for newcomers.

If you want to learn what SSR and SSG are, check out this article I wrote explaining each.

3. Angular CLI will then start to generate the relevant files and install dependencies for your project:

Once this is done, run the following commands:

cd my-appnpm start

4. If all worked, once your packages are installed you should see this template screen:

Now when you modify any code in the project it will refresh the screen for you and preview your changes immediately.

While Vue used to have a CLI tool aptly named "Vue CLI" that let you scaffold projects, it's been replaced by a new tool made by the Vue team: Vite.

Using Vite, we can quickly generate a Vue project.

Pre-requisites

To get started with Vite, there's a few things we should know about first:

• Know what Node and NPM are and how to use them
• How to install Node and NPM

That's it!

Usage

Now that we have our pre-requisites out of the way, let's create a Vue template using Vite:

npm create vite@latest

This will start a script that guides you through an interactive setup process.

1. First, give Vite your project name:

2. Select "Vue" as your framework:

3. Select "JavaScript" or "TypeScript":

If you're unfamiliar with TypeScript, it's an addition to JavaScript that allows you to add "compile-time types" to your code.

Confused? I wrote an article that explains what that means here.

Note

If you're following along with my book series "The Framework Field Guide", please select "JavaScript". TypeScript is useful but complex and the series' code samples do not use TypeScript, nor does the series teach TypeScript.

4. Run the commands printed in the final output of Vite:

cd [your-project-name]npm installnpm run dev

5. If all worked, once your packages are installed you should see this template screen:

Now when you modify components/HelloWorld.vue or any other code in the project it will refresh the screen for you and preview your changes immediately.

This auto-refresh on code change is called "HMR" or "Hot Module Reloading"