So far in this series we’ve been working with a bare bones setup - simple HTML/CSS/JavaScript files we’ve opened directly in our browser to run locally. When pulling in Vue, we imported it from a CDN removing any need to worry about directly managing external dependencies in our project.
This is a great way to start to get comfortable working with Vue, but now we want to expand on this to set up a more sophisticated development environment that will allow us to harness the full power of Vue.
Specifically, we want to start working with a build system that will provide the benefits outlined below.
Benefits of a build system
- Will allow us to run our work on a local server that supports “hot reloading” aka Hot Module Replacement (HMR). This will allow us to make changes in our JavaScript and instantly see the results reflected in the browser without having to refresh the page.
- Will provide support for Vue-specific JavaScript files called Single File Components (SFCs).
- Will integrate package management into our project so that we can manage outside dependencies such as Vue (and any other dependencies our applications might need).
- Will offer features commonly provided by build systems including:
- Preprocessing - e.g. SASS → CSS
- Bundling with tree-shaking, minification, chunk splitting, etc. to optimize page load speed
- Support for cutting-edge JavaScript that might not yet be supported by all browsers
- Etc.
Tools we’ll use
When it comes to working with build systems there are a lot of technologies you can choose from, but we’ll narrow down our tools to the following:
NPM (Node Package Manager)
NPM is the default package manager for Node.js (the server-side implementation of JavaScript), but is used in the client-side world as well. We will use NPM to work with Vite and also manage any other outside dependencies our Vue projects might need.
You can see if you have NPM installed by running the command npm which (if installed) will yield something like the following:
> npm
Usage: npm <command>
where <command> is one of:
access, adduser, audit, bin, bugs, c, cache, ci, cit,
[...etc...]
If you receive a message along the lines of command not found, it means you don’t have NPM installed so you’ll want to head over https://nodejs.org/en/download to download an installer and get it set up.
To get NPM you’re actually installing Node.js which comes bundled with NPM.
In order to run the npm from command line, the path to the npm executable must be in your computer’s PATH variable which specifies which paths to look in when executing command line programs.
Windows users - The installer automatically added NPM executable path to your computer’s PATH settings, so you don’t have to do anything else. Close and restart your command line program and you should have access to the npm command.
Mac users - You will need to manually update your computer’s PATH variable to include the following paths:
/usr/local/bin/node
/usr/local/bin/npm
Go here for instructions on how to edit your PATH variable on a Mac...
After editing your PATH, restart Terminal and you should now be able to execute the npm command.
Vite
With NPM installed, you can use it to create a new Vue project using Vite. Vite is a build tool that will set up your project with all of the benefits outlined in the introduction to this guide.
To get started, first move to a directory on your computer where you want to set up the project then run the following NPM command:
> npm create vite@latest
First, it will ask you to name your project. For this example, let’s call our project flashword-vite because we’ll model it after our existing FlashWord application:
? Project name: › flashword-vite
Next, it will prompt you to choose a framework to set your project up with. Use the arrow keys to select the second option, vue, and hit enter.
? Select a framework: › - Use arrow-keys. Return to submit.
vanilla
> vue
react
preact
lit
svelte
When it prompts you to select a variant you have the options of regular vue or vue-ts which uses TypeScript. TypeScript is a variation of JavaScript that adds data typing which has a lot of advantages, but to keep things simple we’ll choose straight vue.
? Select a variant: › - Use arrow-keys. Return to submit.
❯ vue
vue-ts
At this point your application setup should complete with the following details:
npx: installed 6 in 1.947s
✔ Project name: … flashword-vite
✔ Select a framework: › vue
✔ Select a variant: › vue
Scaffolding project in /flashword-vite...
Done. Now run:
cd flashword-vite
npm install
npm run dev
Per the instructions in the above output, we can first move into our new application:
> cd flashword-vite
Then run npm install which will prompt NPM to pull in our outside dependencies (right now that’s just Vue).
> npm install
> esbuild@0.14.39 postinstall flashword-vite/node_modules/esbuild
> node install.js
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-android-64@0.14.39 (node_modules/esbuild/node_modules/esbuild-android-64):
[...other WARNs redcated for brevity...]
added 33 packages from 56 contributors and audited 52 packages in 4.139s
4 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
- Applications managed by NPM will have a config file called
package.jsonin the root of the project where - amongst some other things - you list outside dependencies of the project. - When prompted, NPM (via a command like
npm install) will download the outside dependencies and put them in a subdirectory in the project callednode_modules.
Finally, we can initiate the build system in our application with the following command:
> npm run dev
Which should yield something like the following:
vite v2.9.9 dev server running at:
> Local: http://localhost:3000/
> Network: use `--host` to expose
ready in 253ms.
Test it out...
If you load the URL it provides you (in this example that’s http://localhost:3000) in the browser, you should see your brand new Vite-powered application.
Within your new project directory, find the file src/components/HelloWorld.vue and make a change to the content and observe how the change is automatically reflected in the browser - no refresh required!
This is an example of ”hot reloading” aka Hot Module Replacement (HMR) which is one of the benefits we get with our new build system.
You can continue to access your site in the browser as long as your Vite dev server is still running in command line. To stop the server, use the keyboard shortcut ctrl + c. To restart the server, re-run the command npm run dev.
What’s next...
We have now successfully set up a new Vue project using Vite. In the next part of this series we’ll dig into this new project and understand how it’s set up and how to customize it.