visual-studio-code

How to Open the Project in VS Code

In this guide, you’ll learn how to open your project in Visual Studio Code, install everything you need, and start the local development server. If you’re not a developer or new to coding, don’t worry - it’s super easy to follow.

Step 1: Install VS Code

If you don’t already have Visual Studio Code (VS Code) installed, you can download it here:

Download Visual Studio Code - Mac, Linux, Windows

Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.

Logo
https://code.visualstudio.com/Download
Thumbnail

For a visual guide, you can watch this short YouTube video:

Step 2: Install Node.js

This project requires Node.js to run.

Download and install it from:

download

Application error: a client-side exception has occurred while loading nodejs.org (see the browser console for more information).

Logo
https://nodejs.org/en/download

Make sure to install the LTS version (it’s more stable).

If you’d like a quick walkthrough, here’s a beginner-friendly video:

Step 3: Open the Project in VS Code

  1. 1.a.i.
    Open VS Code.
  2. 2.b.ii.
    Click File → Open Folder (or drag the folder directly into VS Code).
  3. 3.c.iii.
    Select the folder named:

    notion-as-a-cms-nextjs-portfolio-blog-main

  4. 4.d.iv.
    Wait for VS Code to load the files - you’ll see folders like src, public, and package.json.
Image

Step 4: Open the Terminal in VS Code

  1. 1.a.i.
    In VS Code, click View → Terminal (or press Ctrl + `).
  2. 2.b.ii.
    This opens a terminal window at the bottom of VS Code.
  3. 3.c.iii.
    Make sure the path in the terminal ends with your project folder name.

Example:

Plain Text
C:\Users\YourName\Documents\NotionCMS\notion-as-a-cms-nextjs-portfolio-blog-main>

Step 5: Install Dependencies

Depending on which package manager you use:

If you use npm (default):

Plain Text
npm install

If you use pnpm:

Plain Text
pnpm install
Image

Wait for the installation to finish. It might take a few minutes the first time.

✅ Once it’s done, all required packages for your project will be installed.

Step 6: Create the .env.local File

  1. 1.a.i.
    In your project folder, find the file named .env.example.
    Image
  2. 2.b.ii.
    Select it and press Ctrl + C (or Cmd + C on Mac) to copy it.
  3. 3.c.iii.
    Then paste it in the same folder using Ctrl + V (or Cmd + V).
  4. 4.d.iv.
    Rename the new file to:
    Image
    Plain Text
    .env.local

This file will store your Notion integration token and database ID.

Don’t edit it yet - we’ll fill in those values in the next setup guides.

Step 7: Don’t Run the Project Yet

Stop here for now.

The project won’t start correctly until your .env.local file is configured with your Notion integration details.

Next 👉🏻 Continue with the next two setup steps to get those values: