# How to use Meshnet for multi-screen Node.js development

## Introduction <a href="#introduction" id="introduction"></a>

[Node.js](https://nodejs.org/en/about) is an open-source, cross-platform runtime environment that is used for web app development. It allows developers to use JavaScript to build scalable, high-performance web applications.

Node.js also comes with an HTTP server module, which can be used to create and serve static web pages on the local device. This makes it easy for developers to test their applications locally, with changes and updates reflected in real time on the web app.

By incorporating [Meshnet](https://nordvpn.com/meshnet/) into your development process, the HTTP server feature of Node.js allows for a more efficient development process because you can make changes to the project and see the results immediately on other devices. In addition, the web application can easily be [accessed from remote devices](https://nordvpn.com/meshnet/remote-access/) even during the development stage.

This article showcases how junior developers can use Meshnet to monitor the development of their Node.js project from other devices.

## Installing Node.js <a href="#installing-node.js" id="installing-node.js"></a>

To begin, you need to download and install Node.js on your device.

* Windows and macOS installation packages can be downloaded from the [Node.js downloads page.](https://nodejs.org/en/download)
* For Linux distributions, installation instructions are available on the [NodeSource GitHub page](https://github.com/nodesource/distributions).

## Creating a Node.js project <a href="#creating-a-node.js-project" id="creating-a-node.js-project"></a>

You can create and control Node.js projects using the node package manager (`npm`) commands via a command-line interface (CLI). The package manager comes with a package runner `npx`, which is used to run JavaScript packages from the `npm` registry.

### Prepare your application <a href="#prepare-your-application" id="prepare-your-application"></a>

To create a [Next.js](https://nextjs.org/docs/getting-started) application in your Node.js project:

1. Open **PowerShell** (on Windows) or **Terminal** (on macOS and Linux).
2. Create a new folder for your project using the `mkdir` command and navigate to it using `cd`.\
   &#x20;\
   **Example**

   <pre class="language-bash" data-overflow="wrap"><code class="lang-bash">mkdir node-projects
   cd node-projects
   </code></pre>

   &#x20;
3. Create your new application using the `create-next-app` package by running this command:\
   &#x20;

   <pre class="language-bash" data-overflow="wrap"><code class="lang-bash">npx create-next-app@latest
   </code></pre>

   &#x20;\
   If prompted, press **Enter** to install the `create-next-app` package.
4. Type in the name of your project and press **Enter**.
5. Select which options you want to use in your app.

   <figure><picture><source srcset="/files/2NdrrOaUOpqCYDRN1g5B" media="(prefers-color-scheme: dark)"><img src="/files/VemgeZ1eDQ1u4XKAunKw" alt="Selecting options for the Node.js application in the command line."></picture><figcaption></figcaption></figure>

   &#x20;
6. Wait for the dependencies to be installed.

You should receive a success message when the process finishes.

<figure><picture><source srcset="/files/JFNKJ63NPbHzxk18qBle" media="(prefers-color-scheme: dark)"><img src="/files/f3PacejyAVRmkCdAInzp" alt="Message indicating that the Next.js application has been created."></picture><figcaption></figcaption></figure>

### Test the development server <a href="#start-the-development-server" id="start-the-development-server"></a>

{% hint style="info" %}
**Note**

If you are using a CLI text editor and a device with a single terminal interface, you need to use a terminal multiplexer, such as [tmux](/how-to/joint-projects/pair-programming-tmux.md), to keep the server active and edit the app's files at the same time.
{% endhint %}

Once the project is created, you can start the development server to visually inspect it.

1. Using the command line, run the following command:\
   &#x20;

   ```
   npm run dev
   ```

   &#x20;\
   After a few seconds, your app should start and you should see a `ready` message.

   <figure><picture><source srcset="/files/Un3fHfGZW0WABYWNNU6u" media="(prefers-color-scheme: dark)"><img src="/files/A3TnK3mojvHElZpBNt2g" alt="Ready message indicating that the development server has been started."></picture><figcaption></figcaption></figure>

   &#x20;
2. Open your internet browser.
3. In the URL field, enter `localhost:3000/` and press **Enter**.

You should now see the default Next.js landing page in your browser.

<div align="left"><figure><img src="/files/zHS4WtQS4i7wmsGsjGHz" alt="URL of the Next.js landing page highlighted."><figcaption></figcaption></figure></div>

### Modify your landing page <a href="#modify-your-landing-page" id="modify-your-landing-page"></a>

After confirming that the server is running as expected, you can start developing your app by editing the project's files. For demonstration purposes, this article provides an example of modifying the landing page.

1. From the previously opened landing page, note the page file's location.

   <div align="left"><figure><img src="/files/0qimrnlRJuvt4aLbvfMJ" alt="Path to the &#x22;page.js&#x22; file highlighted on the Next.js app landing page." width="375"><figcaption></figcaption></figure></div>

   &#x20;\
   Depending on your choice when creating the project, it will be either:

   * `/app/page.js`
   * `/src/app/page.js` \
     &#x20;
2. Open the page.js file using a text or code editor of your choice, for example, Nano, Vim, Notepad, or Visual Studio Code.
3. Make any preferred changes to the landing page using JavaScript.
4. Save your changes and exit the file.

## Checking results using Meshnet <a href="#checking-results-using-meshnet" id="checking-results-using-meshnet"></a>

Your new web app should now be up and running. You can access it over Meshnet using any other device to see the app you created. To access your project:

1. Copy the Nord name of the device running Node.js from the NordVPN application.
2. Open your internet browser.
3. In the URL field, paste the copied Nord name, followed by `:3000`, and press **Enter**.

Now you should see the visual result of the `page.js` file.

<figure><img src="/files/nLZ8cRhz6Pnl6wEsjS0P" alt="Landing page of the Next.js application accessed using the Nord name."><figcaption></figcaption></figure>

Whenever you make a change to the `page.js` file and save it, the web interface will update automatically. This allows you to monitor the development progress from any device. Additionally, you can share your results with people from remote locations with ease.

<figure><img src="/files/7C5Yeh6syU8llYWLmIEY" alt="GIF showcasing real time updates of the landing page"><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://meshnet.nordvpn.com/how-to/joint-projects/nodejs-multi-screen-development.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.