DEV Community

loading...
Cover image for a first look at vite

a first look at vite

ajcwebdev profile image anthony-campolo Updated on ・3 min read

Vite (French word for "fast", pronounced /vit/) is a frontend build tool and open source project created by Evan You on April 20, 2020 in between his second and third viewing of Dazed and Confused. Vite 2.0 was officially released on February 16, 2021. The project consists of:

Browser Support

Setup

mkdir ajcwebdev-vite
cd ajcwebdev-vite
Enter fullscreen mode Exit fullscreen mode

Create index.html

touch index.html
Enter fullscreen mode Exit fullscreen mode
<!-- index.html -->

<h1>ajcwebdev</h1>
Enter fullscreen mode Exit fullscreen mode

Install Vite dependency and skip the 5 minute break you were planning on taking

yarn add -D vite
Enter fullscreen mode Exit fullscreen mode

Add dev script to package.json

{
  "scripts": {
    "dev": "vite"
  },
  "devDependencies": {
    "vite": "^2.0.5"
  }
}
Enter fullscreen mode Exit fullscreen mode

Run development server

yarn dev
Enter fullscreen mode Exit fullscreen mode
vite v2.0.5 dev server running at:

> Local:    http://localhost:3000/
> Network:  http://10.0.0.175:3000/

ready in 258ms.
Enter fullscreen mode Exit fullscreen mode

Open localhost:3000

01-index-html-hello-world

Don't forget the <title>

<!-- index.html -->

<head>
  <title>ajcwebdev</title>
</head>

<body>
  <h1>ajcwebdev</h1>
</body>
Enter fullscreen mode Exit fullscreen mode

02-index-html-hello-world-with-title

We can import modules directly inside our <script> tags thanks to ES Modules.

<!-- index.html -->

<head>
  <title>ajcwebdev</title>
</head>

<body>
  <h1>ajcwebdev</h1>

  <script type="module">
    import './main.js'
  </script>
</body>
Enter fullscreen mode Exit fullscreen mode

We are trying to import main.js but we haven't created it yet. This will cause the server to display one of the most aesthetically pleasing error messages you will ever see.

03-failed-to-resolve-import

Create main.js

touch main.js
Enter fullscreen mode Exit fullscreen mode

Console log a message to your dude.

// main.js

console.log('sah dude')
Enter fullscreen mode Exit fullscreen mode

04-console-log-main-js

Create style.css

Since people keep insisting on writing CSS.

touch style.css
Enter fullscreen mode Exit fullscreen mode

You only get one color so make it count.

/* style.css */

h1 {
  color: purple
}
Enter fullscreen mode Exit fullscreen mode

05-index-html-with-style-css

Create a single page app that renders a root component cause it's the only thing they ever taught you

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>
      ajcwebdev
    </title>
  </head>

  <body>
    <div id="app"></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

If we look back at localhost:3000 we will see our blank canvas. Alternatively known as "the only thing your website does" for people with JavaScript turned off.

06-blank-root-div

We will paint the canvas with our imperative DOM manipulations just as Elder Resig instructed.

// main.js

import './style.css'

document.querySelector('#app').innerHTML = `
  <h1>ajcwebdev</h1>
  <a
    href="https://dev.to/ajcwebdev"
    target="_blank"
  >
    Blog
  </a>
`
Enter fullscreen mode Exit fullscreen mode

07-vanilla-javascript-component

And that's the whole website, that'll be $10,000 dollars.

Discussion (1)

pic
Editor guide
Collapse
nheindev profile image
Noah Hein

"Create a single page app that renders a root component cause it's the only thing they ever taught you"

I feel attacked