Delving Developer

An intro to the web development ecosystem

Darko
Darko
• 4 min read • Javascript
Cover Image for An intro to the web development ecosystem

The basicslink

The web development ecosystem is a complex and ever-changing landscape. It can be difficult for new developers to get started. I've received a lot of questions about my process and how to get started. The truth is, I rarely ever write vanilla CSS, or basic HTML and what not. I use tools and libraries such as Tailwind CSS, React, and more.

There's a thing called NPM. NPM is a JavaScript package manager that helps developers install, share, and manage code libraries. It is the default package manager for the Node.js runtime environment. NPM makes it easy to work with code libraries, whether they are your own or someone else’s.

To use NPM, you need to set up your environment. You need to install NodeJS on your computer. You can download NodeJS from the NodeJS website. Or you can use something like homebrew (macOS), apt-get (Linux) or Scoop (Windows).

This article assumes you went with the first option, you installed it via the NodeJS website. Once you install NodeJS, you will automatically get npm.

Setting up your projectlink

The most basic way to start a project is to create a new directory and add a package.json file, or run the npm init within that directory using a terminal.

mkdir my-project

cd my-project

npm init

The process will prompt you with a few questions, on which you can mostly just press enter to go through with it all.

Open the package.json file and look at the contents.

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "author": "",
  "license": "ISC"
}

Installing your first packagelink

You've installed NodeJS and NPM, and you've created a new directory, where you ran the npm init command. Now you need to install a package.

Let's go with Vite, since it's one of the easiest packages to start working building with.

# npm
npm install vite --save-dev

# yarn
yarn add vite --dev

Let's look at that command.

The first argument is the package manager you want to use to install the package. That can be npm or yarn, or any other package manager for javascript. The second parameter is the command we want to give to the package manager (install / add).

The --save-dev / --dev flag tells the package manager to install the package as a dev dependency. This means that the package will be installed, but it will not be available to your application. It will only be used for development.

The package.json filelink

If you inspect the package.json file now, you will see that it has a few more properties. Also, the start script has been updated.

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
-  "main": "index.js",
+  "type": "module"
  "scripts": {
-   "start": "node index.js"
+   "start": "vite"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vite": "^x.y.z"
  }
}

This will change the start script to call vite to run your code. Also, the main file has been removed, and the type property has been added.

Finding packageslink

The internet has already creaded hundreds of thousands of packages that can be used to build your application. You can search for packages on npmjs.com. Go and explore!

Bonuslink

To have a fully functional Vite project, you'll need to add a few files.

Add index.html in the project root folder:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

Add style.css in the project root folder:

/* style.css */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

#app {
  min-height: 100vh;
}

/* Then the rest of your styles */

Create a file called counter.js in the project root folder:

// counter.js
export function setupCounter(element) {
  let counter = 0
  const setCounter = (count) => {
    counter = count
    element.innerHTML = `count is ${counter}`
  }
  element.addEventListener('click', () => setCounter(++counter))
  setCounter(0)
}

Add main.js in the project root folder:

// main.js
import './style.css'
import javascriptLogo from './javascript.svg'
import { setupCounter } from './counter.js'

document.querySelector('#app').innerHTML = `
  <div>
    <h1>Hello world!</h1>
    <div class="card">
      <button id="counter" type="button"></button>
    </div>
  </div>
`

setupCounter(document.querySelector('#counter'))

Then run the command

# Npm
npm run start

# Yarn
yarn start

This should open up a website on localhost with a heading and a button that displays a counter. When you click the button, the counter should increase.

You can follow some of the basic guides for Vite on the Vite website.

To wrap it uplink

The npm website is a great resource for learning about the tool and the registry. The website also provides a way for developers to share their own code packages.

The npm ecosystem is a vibrant and growing community of developers. There are many ways to get involved, such as writing code, contributing to the registry, or writing articles like this one.

If you’re a web developer, npm is an essential tool. It can help you install, share, and manage code libraries. It can also help you stay up-to-date with the latest tools and best practices.