Start learning free

LESSON 119 OF 161 · FRONTEND: THE PROJECT AROUND THE CODE

package.json

Practice

Every JavaScript project has a package.json at its top. It is plain JSON that npm reads: the project's name, its version, its scripts (the commands npm run knows) and the packages it needs. "type": "module" tells Node that the project's .js files, like vite.config.js, use import and export.

Your page shows the Corner Shop working from the start. That is only a preview: the course draws src/App.jsx itself, without npm or Vite, so it never reads package.json. The check is what reads your file and tells you what npm and Vite would do with it.

Packages come in two lists. dependencies are the ones the page's code imports, like react: they end up in the browser. devDependencies are the tools that run and build the project, like vite. npm install downloads both into node_modules/.

Here is another small project, a set of price tools tested with Vitest:

{
  "name": "price-tools",
  "scripts": {
    "test": "vitest"
  },
  "devDependencies": {
    "vitest": "^3.2.0"
  }
}

npm run test runs vitest, while npm run dev stops with npm error Missing script: "dev". A version like ^3.2.0 lets npm install 3.2.0 or any newer 3.x.

The check can't run npm or Vite, so it reads your package.json and the project's files and prints what would happen. For the Corner Shop it must print:

> what package.json says
  name: corner-shop
  type: module (Node reads the project's .js files … as ES modules)
  scripts: dev, build, preview
> npm install
  dependencies: react ^19.2.0, react-dom ^19.2.0
  devDependencies: @vitejs/plugin-react ^5.1.0, vite ^7.2.2
> npm run dev
  > vite
  the dev server starts at http://localhost:5173/ …
> npm run build
  > vite build
  Vite bundles the app into dist/ …

Your task: the file already has a version, "private": true, a preview script and vite. Add the name "corner-shop", "type": "module", the dev and build scripts, react and react-dom at ^19.2.0 in dependencies, and @vitejs/plugin-react at ^5.1.0 in devDependencies.


Assignment
Follow the Coding Tutorial to fill in the Corner Shop's package.json, one key at a time, until the check shows that npm install, npm run dev and npm run build would all work.


Hint
Every key and every string value goes in double quotes. Inside an object, every pair but the last ends with a comma: a missing or extra comma makes npm stop with EJSONPARSE.


STEP 1 OF 7
    Ctrl + Enter to check