Intro and Setup

Create a new vue app with the vite starter kit

Open a terminal and change directories to a folder where we can work on several projects during this workshop.

We’ll use vite's template system to scaffold a starting point for us to play around with:

  1. Run npm create vite@latest. It might prompt you to install the vite template script.
  1. Name the project codemashdemo when prompted.
  1. When asked for a framework, use the arrow keys to select Vueand press ENTER.
  1. When asked for a language, select TypeScript and press ENTER.

Congratulations, your new empty project is created! Let’s get it up and running.

Install dependencies

  1. Change directories into the folder that vite created for you.: cd codemashdemo
  1. Install all the libraries using the npm install command.

Boot it up

Start up the app using the npm run dev command.

The terminal should print out a URL, most likely http://localhost:5173 (it might be different on your machine).

You can copy & paste that to your browser, or press o then Enter to have the Vite dev server open it in your default browser automatically.

At this point, you’re up and running!

Explore some features

Many frameworks offer “Hot Module Reload.” This feature allows the system to automatically apply new code without restarting the app or reloading the page. The build tool (Vite in this case) watches your code for changes, and when something is saved, it tells the browser to patch the code and redraw only the modified components.

Feedback is nearly instantaneous! Try it out:

Using HMR to update the UI

Open src/components/App.vue in your editor. Find the line where the HelloWorld component is rendered in the markup:

<HelloWorld msg="Vite + Vue" />

Edit the msg attribute to msg="Vite + Vue @ CodeMash". Hit save and switch back to your browser. It changed automatically! If you can arrange your windows so you can see both the browser and your code at the same time, you’ll be able to watch your changes instantly sync.

☝
Its really important to minimize the developer loop of code, test, refactor. Tools that build quickly and give you instant feedback on your changes will make you more productive and happy

Using HMR to update logic

It’s not just UI code that you can change, but logic too. We’ll see how you can change the code and keep the current state of the application.

Before making some code changes, click the count button in your browser a few times so that the count is more than 0.

Now let’s change the code: open src/components/HelloWorld.vue in your editor. Find the @click attribute on the <button>tag. Change it so that it increments the count value by 2:

<button type="button" @click="count += 2">count is {{ count }}</button>

Hit save and go back to your browser.

Now when you click the button, the count value goes up by 2. Notice that the counter didn’t reset to 0, as if you had hit the browser’s Reload button. The logic changed, but the counter kept its previous state.

This can help you quickly test logic changes deep in a workflow without having to start over at the beginning.

Building for Production

Back in your terminal press CTRL+C to stop the npm run dev command. This stops the server.

Run npm run build. This command compiles your application to static files and puts them in the dist folder. You could copy these files to your web server and access them over the internet.

It generated a few files (note that your filenames might be slightly different than mine):

$ tree dist
dist
├── assets
│   ├── index-c0MmWt-x.js
│   └── index-rMl8e96B.css
├── index.html
└── vite.svg

2 directories, 4 files

Even though we had multiple .vue files written in typescript in the source code, the output is just a single .js file. This can improve load times by only reading a single file over the internet rather than dozens of smaller files.

Also notice how the filename has some random letters at the end (again, your letters might be different than mine). Make a small change to any of the .vue files, for example adding your name to the template. Run npm run build again. Now notice how the gibberish is different.

These letters are a hash of the file contents: if the file changes, it gets a new name. You can configure your server to tell browsers they can cache the files forever: if you make changes, a new filename will be created and you won’t have to worry about browsers running stale code.

☝
This feature is often called “content hashing” or “fingerprinting” . Try changing one of the files and running npm run build again. Notice how the filename changes because the contents changed.

Recap

Further Reading

Bonus Exercises