8.5 KiB
title, description, published, authors, tags, attached, license
| title | description | published | authors | tags | attached | license | ||||
|---|---|---|---|---|---|---|---|---|---|---|
| Web Framework Quickstart Guide | 2024-01-18T04:45:30.247Z |
|
|
cc-by-nc-sa-4 |
Not that long ago, figuring out how to generate a code template for your favorite framework was a challenge in itself. Older configuration tools like Webpack, Gulp and Grunt had complex configurations to get things up-and-running.
Thankfully, today it's much easier to get a quick client-side application up-and-running with your preferred framework.
Let's take a quick look at how we can scaffold a project for React, Angular, and Vue:
React
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:
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.
- First, give Vite your project name:
- Select "React" as your framework:
- 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.
- Run the commands printed in the final output of Vite:
cd [your-project-name]
npm install
npm run dev
- 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"
Angular
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 Vite, there's a few things we should know about first:
-
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.
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.
- 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.
- 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-app
npm start
- 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.
Vue
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:
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.
- First, give Vite your project name:
- Select "Vue" as your framework:
- 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.
- Run the commands printed in the final output of Vite:
cd [your-project-name]
npm install
npm run dev
- If all worked, once your packages are installed you should see this template screen:
![[A page with "Vite + Vue" header, some interactive elements, and "Edit components/HelloWorld.vue" and save to test HMR]](/LukeParke/unicorn-utterances/src/commit/d67c838cc4fe0599432004868818a86bb493f823/content/blog/web-framework-quickstart-guide/vite_vue_preview.png)
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"
Keep in mind, this is only one option for configuring your code's build tooling. There's lots of other tools and options for configuring the aforementioned tools.
Want to learn more about that? Check out my upcoming book called "The Framework Field Guide: Ecosystem", which walks you through each of the tools and how to properly configure each of them in-depth, regardless of which framework you use.
Happy hacking!