How to add and existing next.js app to a visual studio solution VS 2022

Question

I currently a visual studio solution with lots of diffrent projects.

I have an existing nextjs app that I want to add to the solution, so that I can using visual studio 2022 (not VS code) to develop and debug the application.

I have installed the node.js development using the visual studio installer, and now I have a new project template called.

'From existing Node.js code'

I also found this: http://codefoster.com/existingnode/ which looks like what I need.

I have tried to use this to add the existing next.js app to my project, but when I run the project it tried to run on localhost:RANDOMPort number and the site dosn't run.

I'm guessing that this is the correct project template to use, but I'm not sure how to configure it.

Hi, have you checked my answer, does it work on your side? :) — Bowman Zhu-MSFT, Feb 03 '23 at 03:12
@BowmanZhu-MSFT I'm still working on the same project but havent checked out your answer yet... but I will. - If it works I'll get back to you and mark it as the correct answer. — Ayo Adesina, Feb 03 '23 at 11:09

score 0 · Answer 1 · answered Jan 12 '23 at 10:02

I can import the ReactJS App from other place and then use VS2022 to run the App. Also include debug.

Below is the steps I do on my side:

1, Put these two files under the root directory of the project:

reactproject1.esproj

<Project Sdk="Microsoft.VisualStudio.JavaScript.Sdk/0.5.26-alpha">
  <PropertyGroup Label="Globals">
    <ProjectGuid>a9857706-c039-4a3c-8997-3f5756ae92a3</ProjectGuid>
  </PropertyGroup>
  <PropertyGroup>
    <StartupCommand>set BROWSER=none&amp;&amp;npm start</StartupCommand>
    <JavaScriptTestRoot>src\</JavaScriptTestRoot>
    <JavaScriptTestFramework>Jest</JavaScriptTestFramework>
  </PropertyGroup>
</Project>

reactproject1.esproj.user

<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="Current" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
  <PropertyGroup />
</Project>

After that, your react app will be able to run in VS2022, but still unable to debug.

If you need debug, you need to add a folder named '.vscode' under the root directory. After that, create a file named 'launch.json', this file is the configuration file for debug react app:

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "localhost (Chrome)",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    },
    {
      "type": "edge",
      "request": "launch",
      "name": "localhost (Edge)",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

This is the structure of the react app on my side: