### App.vue Script Setup Imports

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/frameworks_libraries/vue_getting_started/index.md

Example of importing components within the <script setup> block of App.vue.

```vue
<script setup>
import HelloWorld from "./components/HelloWorld.vue";
import TheWelcome from "./components/TheWelcome.vue";
</script>
```

--------------------------------

### Navigate and install dependencies

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/frameworks_libraries/react_getting_started/index.md

Commands to change into the newly created app directory and install its required npm packages.

```bash
cd moz-todo-react && npm install
```

--------------------------------

### Install Vue and Initialize Project (npm)

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/frameworks_libraries/vue_getting_started/index.md

Command to install Vue and initialize a new project using npm.

```bash
npm create vue@latest
```

--------------------------------

### Install Ember CLI

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/frameworks_libraries/ember_getting_started/index.md

Install the Ember CLI globally using npm.

```bash
npm install -g ember-cli
```

--------------------------------

### Live Sample HTML

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/styling_basics/getting_started/index.md

HTML structure for the interactive live example demonstrating CSS combinators.

```html
<h1>I am a level one heading</h1>

<p>
  This is a paragraph of text. In the text is a <span>span element</span> and
  also a <a href="http://example.com">link</a>.
</p>

<p>This is the second paragraph. It contains an <em>emphasized</em> element.</p>

<ul>
  <li>Item <span>one</span></li>
  <li>Item two</li>
  <li>Item <em>three</em></li>
</ul>
```

--------------------------------

### Install Vue and Initialize Project (yarn)

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/frameworks_libraries/vue_getting_started/index.md

Command to install Vue and initialize a new project using yarn.

```bash
yarn create vue@latest
```

--------------------------------

### Development server output

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/frameworks_libraries/ember_getting_started/index.md

Example output when the Ember development server starts successfully.

```plain
Build successful (190ms) – Serving on http://localhost:4200/

Slowest Nodes (totalTime >= 5%)          | Total (avg)
-----------------------------------------+-----------
BroccoliMergeTrees (17)                  | 35ms (2 ms)
Package /assets/vendor.js (1)            | 13ms
Concat: Vendor Styles/assets/vend... (1) | 12ms
```

--------------------------------

### CSS for live link state example

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/styling_basics/getting_started/index.md

Combined CSS rules for styling links in different states (:link, :visited, :hover) within a live example.

```css
a:link {
  color: pink;
}

a:visited {
  color: green;
}

a:hover {
  text-decoration: none;
}
```

--------------------------------

### Live Sample CSS

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/styling_basics/getting_started/index.md

CSS rules applied in the interactive live example, demonstrating descendant and next-sibling combinators.

```css
li em {
  color: rebeccapurple;
}

h1 + p {
  font-size: 200%;
}
```

--------------------------------

### Building the keyboard setup function

Source: https://github.com/mdn/content/blob/main/files/en-us/web/api/web_audio_api/simple_synth/index.md

The `setup()` function builds the keyboard and initializes the audio context for the simple synth.

```js
function setup() {
  const noteFreq = createNoteTable();

  volumeControl.addEventListener("change", changeVolume);

  mainGainNode = audioContext.createGain();
  mainGainNode.connect(audioContext.destination);
  mainGainNode.gain.value = volumeControl.value;

  // Create the keys; skip any that are sharp or flat; for
  // our purposes we don't need them. Each octave is inserted
  // into a <div> of class "octave".

  noteFreq.forEach((keys, idx) => {
    const keyList = Object.entries(keys);
    const octaveElem = document.createElement("div");
    octaveElem.className = "octave";

    keyList.forEach((key) => {
      if (key[0].length === 1) {
        octaveElem.appendChild(createKey(key[0], idx, key[1]));
      }
    });

    keyboard.appendChild(octaveElem);
  });

  document
    .querySelector("div[data-note='B'][data-octave='5']")
    .scrollIntoView(false);

  sineTerms = new Float32Array([0, 0, 1, 0, 1]);
  cosineTerms = new Float32Array(sineTerms.length);
  customWaveform = audioContext.createPeriodicWave(cosineTerms, sineTerms);

  for (let i = 0; i < 9; i++) {
    oscList[i] = {};
  }
}

setup();
```

--------------------------------

### Examples

Source: https://github.com/mdn/content/blob/main/files/en-us/mozilla/add-ons/webextensions/api/runtime/oninstalled/index.md

An example demonstrating how to handle the runtime.onInstalled event, log the reason, and open a new tab.

```javascript
function handleInstalled(details) {
  console.log(details.reason);
  browser.tabs.create({
    url: "https://example.com",
  });
}

browser.runtime.onInstalled.addListener(handleInstalled);
```

--------------------------------

### Navigate to Website Directory

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/howto/tools_and_setup/set_up_a_local_testing_server/index.md

Examples of using the cd command to change directories.

```bash
# include the directory name to enter it, for example
cd Desktop
# use two dots to jump up one directory level if you need to
cd ..
```

--------------------------------

### Example

Source: https://github.com/mdn/content/blob/main/files/en-us/web/api/abstractrange/endcontainer/index.md

This example demonstrates how to get the endContainer of a range after setting its start and end points.

```js
const range = document.createRange();
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);

const endRangeNode = range.endContainer;
```

--------------------------------

### Sample Project Configuration

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/frameworks_libraries/vue_getting_started/index.md

Interactive `create-vue` tool options chosen for the sample todo list app.

```plain
✔ Project name: … todo-vue
✔ Add TypeScript? … No
✔ Add JSX Support? … No
✔ Add Vue Router for Single Page Application development? … No
✔ Add Pinia for state management? … No
✔ Add Vitest for Unit Testing? … No
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … Yes
? Add Prettier for code formatting? › Yes
```

--------------------------------

### Starting up the WebXR session

Source: https://github.com/mdn/content/blob/main/files/en-us/web/api/webxr_device_api/movement_and_motion/index.md

The `sessionStarted()` function handles the setup and initiation of a WebXR session. It configures event handlers, compiles and installs GLSL shaders, attaches the WebGL layer to the WebXR session, and starts the rendering loop. This function is called as the handler for the promise returned by `XRSystem.requestSession()`.

```js
function sessionStarted(session) {
  let refSpaceType;

  xrSession = session;
  xrButton.innerText = "Exit WebXR";
  xrSession.addEventListener("end", sessionEnded);

  let canvas = document.querySelector("canvas");
  gl = canvas.getContext("webgl", { xrCompatible: true });

  if (allowMouseRotation) {
    canvas.addEventListener("pointermove", handlePointerMove);
    canvas.addEventListener("contextmenu", (event) => {
      event.preventDefault();
    });
  }

  if (allowKeyboardMotion) {
    document.addEventListener("keydown", handleKeyDown);
  }

  shaderProgram = initShaderProgram(gl, vsSource, fsSource);

  programInfo = {
    program: shaderProgram,
    attribLocations: {
      vertexPosition: gl.getAttribLocation(shaderProgram, "aVertexPosition"),
      vertexNormal: gl.getAttribLocation(shaderProgram, "aVertexNormal"),
      textureCoord: gl.getAttribLocation(shaderProgram, "aTextureCoord"),
    },
    uniformLocations: {
      projectionMatrix: gl.getUniformLocation(
        shaderProgram,
        "uProjectionMatrix",
      ),
      modelViewMatrix: gl.getUniformLocation(shaderProgram, "uModelViewMatrix"),
      normalMatrix: gl.getUniformLocation(shaderProgram, "uNormalMatrix"),
      uSampler: gl.getUniformLocation(shaderProgram, "uSampler"),
    },
  };

  buffers = initBuffers(gl);
  texture = loadTexture(
    gl,
    "https://mdn.github.io/shared-assets/images/examples/fx-nightly-512.png",
  );

  xrSession.updateRenderState({
    baseLayer: new XRWebGLLayer(xrSession, gl),
  });

  const isImmersiveVr = SESSION_TYPE === "immersive-vr";
  refSpaceType = isImmersiveVr ? "local" : "viewer";

  mat4.fromTranslation(cubeMatrix, viewerStartPosition);

  vec3.copy(cubeOrientation, viewerStartOrientation);

  xrSession.requestReferenceSpace(refSpaceType).then((refSpace) => {
    xrReferenceSpace = refSpace.getOffsetReferenceSpace(
      new XRRigidTransform(viewerStartPosition, cubeOrientation),
    );
    animationFrameRequestID = xrSession.requestAnimationFrame(drawFrame);
  });

  return xrSession;
}
```

--------------------------------

### Example: Setting up storage items

Source: https://github.com/mdn/content/blob/main/files/en-us/mozilla/add-ons/webextensions/api/storage/storagearea/getkeys/index.md

Demonstrates how to set two items, 'kitten' and 'monster', in storage.local to prepare for key retrieval.

```js
// storage contains two items, "kitten" and "monster"\nbrowser.storage.local.set({\n  kitten: { name: "Mog", eats: "mice" },\n  monster: { name: "Kraken", eats: "people" }\n});
```

--------------------------------

### Style Section Example

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/frameworks_libraries/svelte_getting_started/index.md

An example of the CSS within the <style> block, demonstrating component-scoped styling.

```svelte
<style>
  main {
    text-align: center;
    padding: 1em;
    max-width: 240px;
    margin: 0 auto;
  }

  h1 {
    color: #ff3e00;
    text-transform: uppercase;
    font-size: 4em;
    font-weight: 100;
  }

  @media (width >= 640px) {
    main {
      max-width: none;
    }
  }
</style>
```

--------------------------------

### Install shared TodoMVC assets

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/frameworks_libraries/ember_getting_started/index.md

Install the todomvc-app-css and todomvc-common npm packages as development dependencies.

```bash
npm install --save-dev todomvc-app-css todomvc-common
```

--------------------------------

### Internal stylesheet example

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/styling_basics/getting_started/index.md

An example of an internal stylesheet placed within the <head> section of an HTML document.

```html
<style>
  p {
    color: purple;
  }
</style>
```

--------------------------------

### Examples

Source: https://github.com/mdn/content/blob/main/files/en-us/mozilla/add-ons/webextensions/api/management/oninstalled/index.md

Log the names of add-ons when they are installed:

```js
browser.management.onInstalled.addListener((info) => {
  console.log(`${info.name} was installed`);
});
```

--------------------------------

### Script Section Example

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/frameworks_libraries/svelte_getting_started/index.md

An example of the JavaScript code within the <script> block, showing how to declare a prop.

```svelte
<script>
  export let name;
</script>
```

--------------------------------

### Inline style example

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/styling_basics/getting_started/index.md

An example of an inline style applied directly to an HTML element using the 'style' attribute.

```html
<span style="color: purple; font-weight: bold">span element</span>
```

--------------------------------

### Node.js Setup for Three.js

Source: https://github.com/mdn/content/blob/main/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md

Commands to install Three.js and Vite using npm for a Node.js development environment.

```bash
npm install --save three
npm install --save-dev vite # For development
npx vite
```

--------------------------------

### Navigate and Install Dependencies

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/server-side/express_nodejs/skeleton_website/index.md

Commands to change into the newly created project directory and install required Node.js packages.

```bash
cd express-locallibrary-tutorial
```

```bash
npm install
```

--------------------------------

### Git commands for project setup

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/frameworks_libraries/svelte_reactivity_lifecycle_accessibility/index.md

Commands to clone the tutorial repository, navigate to the specific chapter's state, or directly download the content, and then install dependencies and start the development server.

```bash
git clone https://github.com/opensas/mdn-svelte-tutorial.git
```

```bash
cd mdn-svelte-tutorial/05-advanced-concepts
```

```bash
npx degit opensas/mdn-svelte-tutorial/05-advanced-concepts
```

```bash
npm install && npm run dev
```

--------------------------------

### Markup Section Example

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/frameworks_libraries/svelte_getting_started/index.md

An example of the HTML markup within a Svelte component, demonstrating embedding a JavaScript expression.

```svelte
<main>
  <h1>Hello {name}!</h1>
  <p>
    Visit the <a href="https://learn.svelte.dev/">Svelte tutorial</a> to learn
    how to build Svelte apps.
  </p>
</main>
```

--------------------------------

### Run a local web server

Source: https://github.com/mdn/content/blob/main/files/en-us/games/tutorials/2d_breakout_game_phaser/initialize_the_framework/index.md

Command to start a simple HTTP server using Python from the directory containing index.html.

```bash
python3 -m http.server
```

--------------------------------

### Example: Install module and list slots

Source: https://github.com/mdn/content/blob/main/files/en-us/mozilla/add-ons/webextensions/api/pkcs11/installmodule/index.md

Installs a module, then lists its slots and lists the tokens they contain.

```js
function onInstalled() {
  return browser.pkcs11.getModuleSlots("my_module");
}

function onGotSlots(slots) {
  for (const slot of slots) {
    console.log(`Slot: ${slot.name}`);
    if (slot.token) {
      console.log(`Contains token: ${slot.token.name}`);
    } else {
      console.log("Is empty");
    }
  }
}

browser.pkcs11.installModule("my_module").then(onInstalled).then(onGotSlots);
```

--------------------------------

### Install Angular CLI globally

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/frameworks_libraries/angular_getting_started/index.md

Command to install the Angular Command Line Interface (CLI) globally on your system.

```bash
npm install -g @angular/cli
```

--------------------------------

### package.json serverstart script for nodemon (Windows)

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/server-side/express_nodejs/skeleton_website/index.md

The serverstart script value for Windows command prompt in package.json.

```bash
"serverstart": "SET DEBUG=express-locallibrary-tutorial:* & npm run devstart"
```

--------------------------------

### Install dependencies and start local preview

Source: https://github.com/mdn/content/blob/main/README.md

Commands to install project dependencies and start the local development server.

```bash
npm i
npm start
```

--------------------------------

### Get all installed search engines

Source: https://github.com/mdn/content/blob/main/files/en-us/mozilla/add-ons/webextensions/api/search/get/index.md

Example demonstrating how to retrieve and log information about installed search engines, including the default one.

```js
function retrieved(results) {
  console.log(`There were: ${results.length} search engines retrieved.`);
  const defaultEngine = results.find((searchEngine) => searchEngine.isDefault);
  console.log(`The default search engine is ${defaultEngine.name}.`);
  for (const searchEngine of results) {
    console.log(searchEngine.name);
  }
}

browser.search.get().then(retrieved);
```

--------------------------------

### Navigate and run app

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/frameworks_libraries/svelte_getting_started/index.md

Commands to navigate into a specific folder, install dependencies, and start the Svelte app in development mode.

```bash
cd 02-starting-our-todo-app
npm install
npm run dev
```

--------------------------------

### Install project dependencies

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/server-side/express_nodejs/deployment/index.md

Command to fetch all project dependencies listed in package.json.

```bash
npm install
```

--------------------------------

### Angular Standalone Component Example

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/frameworks_libraries/angular_getting_started/index.md

An example of an Angular standalone component, demonstrating the import of CommonModule and basic component structure.

```ts
import { Component } from "@angular/core";
import { CommonModule } from "@angular/common";

@Component({
  standalone: true,
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrl: "./app.component.css",
  imports: [CommonModule]
})
export class AppComponent {
  // …
}
```

--------------------------------

### CSS Transform Example

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/styling_basics/getting_started/index.md

Applies a rotation transformation to the box element.

```css
.box {
  margin: 30px;
  width: 100px;
  height: 100px;
  background-color: rebeccapurple;
  transform: rotate(0.8turn);
}
```

--------------------------------

### Run the Angular application

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/frameworks_libraries/angular_getting_started/index.md

Commands to navigate into the newly created application directory and start the development server.

```bash
cd todo
ng serve
```

--------------------------------

### Syntax

Source: https://github.com/mdn/content/blob/main/files/en-us/mozilla/add-ons/webextensions/api/management/install/index.md

Shows the basic syntax for calling the management.install() function.

```js-nolint
browser.management.install(options)
```

--------------------------------

### Check Node.js version

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/frameworks_libraries/react_getting_started/index.md

Command to check the installed version of Node.js in your terminal.

```bash
node -v
```

--------------------------------

### Well-formatted CSS

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/styling_basics/getting_started/index.md

An example of CSS with good white space for readability and maintainability.

```css
body {
  font:
    1em/150% "Helvetica",
    "Arial",
    sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}

@media (width >= 70em) {
  body {
    font-size: 130%;
  }
}

h1 {
  font-size: 1.5em;
}
```

--------------------------------

### Getting the document you want to test

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/testing/your_own_automation_environment/index.md

Example of using driver.get() to load a URL.

```js
driver.get("http://www.google.com");
```

--------------------------------

### Background Longhand Properties

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/styling_basics/getting_started/index.md

Equivalent longhand properties for the background shorthand example.

```css
background-color: red;
background-image: url("bg-graphic.png");
background-position: 10px 10px;
background-repeat: repeat-x;
background-attachment: fixed;
```

--------------------------------

### Create Django Project and Navigate

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/server-side/django/skeleton_website/index.md

Commands to initialize a new Django project named 'locallibrary' and change into its directory.

```bash
django-admin startproject locallibrary
cd locallibrary
```

--------------------------------

### Start with a fresh working branch

Source: https://github.com/mdn/content/blob/main/files/en-us/mdn/writing_guidelines/howto/images_media/index.md

Commands to navigate to the content directory, update the main branch, install dependencies, and create a new branch for image changes.

```bash
cd ~/path/to/mdn/content
git checkout main
git pull mdn main
# Run "npm install" to make sure dependencies are up-to-date
npm install
git checkout -b my-images
```

--------------------------------

### Padding Longhand Properties

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/styling_basics/getting_started/index.md

Equivalent longhand properties for the padding shorthand example.

```css
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;
```

--------------------------------

### Compiled JSX to React.createElement()

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/frameworks_libraries/react_getting_started/index.md

The JavaScript equivalent of the nested JSX example after compilation.

```jsx
const header = React.createElement(
  "header",
  null,
  React.createElement("h1", null, "Mozilla Developer Network"),
);
```

--------------------------------

### Examples

Source: https://github.com/mdn/content/blob/main/files/en-us/web/api/filesystemdirectoryhandle/keys/index.md

Use the `for await...of` loop can simplify the iteration process.

```js
const dirHandle = await window.showDirectoryPicker();

for await (const key of dirHandle.keys()) {
  console.log(key);
}
```

--------------------------------

### Nested JSX elements

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/frameworks_libraries/react_getting_started/index.md

An example of nesting HTML-like elements within JSX.

```jsx
const header = (
  <header>
    <h1>Mozilla Developer Network</h1>
  </header>
);
```

--------------------------------

### Examples

Source: https://github.com/mdn/content/blob/main/files/en-us/web/api/filesystemdirectoryhandle/entries/index.md

Use the `for await...of` loop can simplify the iteration process.

```js
const dirHandle = await window.showDirectoryPicker();

for await (const [key, value] of dirHandle.entries()) {
  console.log({ key, value });
}
```

--------------------------------

### Padding Shorthand Property

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/styling_basics/getting_started/index.md

Example of the padding shorthand property setting all four sides.

```css
/* In 4-value shorthands like padding and margin, the values are applied
   in the order top, right, bottom, left (clockwise from the top). There are also other
   shorthand types, for example 2-value shorthands, which set padding/margin
   for top/bottom, then left/right */
padding: 10px 15px 15px 5px;
```

--------------------------------

### Start the Node.js server

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/server-side/express_nodejs/development_environment/index.md

Command to run the hellonode.js server and its console output.

```bash
node hellonode.js
```

```plain
Server running at http://127.0.0.1:3000/
```

--------------------------------

### Initialize Project from GitHub

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/frameworks_libraries/svelte_stores/index.md

Commands to set up the project for the '06-stores' chapter. You can either clone the full repository and navigate to the chapter, or directly download the chapter's content using `degit`. Both methods require running `npm install && npm run dev` to start the development server.

```bash
git clone https://github.com/opensas/mdn-svelte-tutorial.git
```

```bash
cd mdn-svelte-tutorial/06-stores
```

```bash
npx degit opensas/mdn-svelte-tutorial/06-stores
```

```bash
npm install && npm run dev
```

--------------------------------

### Locating stylesheets in different places

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/styling_basics/getting_started/index.md

Examples of different paths for linking external stylesheets.

```html
<!-- In a subdirectory called styles in the current directory -->
<link rel="stylesheet" href="styles/style.css" />

<!-- In a subdirectory called general, which is in a subdirectory called styles, in the current directory -->
<link rel="stylesheet" href="styles/general/style.css" />

<!-- Go back one directory level, then in a subdirectory called styles -->
<link rel="stylesheet" href="../styles/style.css" />
```

--------------------------------

### Updating the H1 Element

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/frameworks_libraries/svelte_getting_started/index.md

An example of modifying the <h1> element to include additional text.

```svelte
<h1>Hello {name} from MDN!</h1>
```

--------------------------------

### Installing third-party middleware

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/server-side/express_nodejs/introduction/index.md

Example of installing the 'morgan' HTTP request logger middleware using npm.

```bash
npm install morgan
```

--------------------------------

### Basic JSX expression

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/frameworks_libraries/react_getting_started/index.md

An example of a JSX expression assigning an H1 tag to a constant.

```jsx
const heading = <h1>Mozilla Developer Network</h1>;
```

--------------------------------

### Install Source Code Dependencies

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/client-side_tools/introducing_complete_toolchain/index.md

Command to install additional dependencies required by the example source code.

```bash
npm install react react-dom @tanstack/react-query
```

--------------------------------

### Start http-server

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/howto/tools_and_setup/set_up_a_local_testing_server/index.md

Command to start the Node.js http-server module, hosting files from a specified directory on a given port and opening in a browser.

```bash
npx http-server /path/to/project -o -p 9999
```

--------------------------------

### Next Steps After Project Scaffolding

Source: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/frameworks_libraries/vue_getting_started/index.md

Commands to run after `create-vue` scaffolds the project, including changing directory, installing dependencies, formatting, and starting the development server.

```plain
Scaffolding project in /path/to/todo-vue...

Done. Now run:

  cd todo-vue
  npm install
  npm run format
  npm run dev
```