Invos

05_local_development_environment_setup

3 min read

Local Development Environment Setup

This guide explains how to set up a local development environment for one of our projects. If this is your first time setting up your machine, please follow the Developer Machine Setup Guide first.

Our projects typically use OpenNext and are deployed on Cloudflare.

Prerequisites

Before you begin, make sure you have the following installed:

  • Git: For version control.
  • Node.js: We recommend using a version manager like nvm to easily switch between Node.js versions. Check the project’s .nvmrc or package.json file for the required version.
  • npm or yarn: Our projects use npm, which is included with Node.js.
  • A code editor: We recommend Visual Studio Code (VS Code).

Initial Setup (for a new project)

  1. Clone the Repository:

    git clone [repository-url]
cd [project-directory]

  2. Install the Correct Node.js Version (if using nvm):

    nvm install
nvm use

  3. Install Dependencies:

    npm install

  4. Set up Environment Variables:

    • Our projects use a .env file for local environment variables. See our guide on Managing Secrets in Cloudflare for more context on how we handle secrets across environments.
    • Find the .env.example file in the root of the project.
    • Copy it to a new file named .env: 
      cp .env.example .env
    • Fill in the required values in the .env file. For local development, these will often be mock values or credentials for a local database or service. Ask a team member if you are unsure what to use.
    • Important: The .env file should never be committed to Git.

  5. Run the Development Server:

    • The command to start the local development server is usually in the package.json file.
    • npm run dev
    • This will start the application, typically at http://localhost:3000. The server will automatically reload when you make changes to the code.

Simulating the Cloudflare Environment Locally

  • OpenNext: The OpenNext library is designed to work seamlessly with Next.js, and for local development, the standard next dev command is usually sufficient.
  • Wrangler (for advanced use cases): Cloudflare’s command-line tool, Wrangler, can be used to emulate the Cloudflare environment more closely. For projects that rely heavily on specific Cloudflare features (like Workers, KV stores, or R2), we may use Wrangler for local development.
    • To run a project with Wrangler locally: 
      npx wrangler dev
    • This requires a wrangler.toml configuration file. Refer to the project’s README.md for specific instructions.

To ensure a consistent development experience, we recommend installing the following VS Code extensions:

  • ESLint: Integrates ESLint into your editor.
  • Prettier - Code formatter: Automatically formats your code on save.
  • EditorConfig for VS Code: Helps maintain consistent coding styles across different editors.
  • GitLens: Supercharges the Git capabilities built into VS Code.
  • DotENV: Provides syntax highlighting for .env files.

Graph View

Backlinks