Självstudie: Skapa en Node.js- och React-app i Visual Studio

Artikel
01/26/2025

Med Visual Studio kan du enkelt skapa ett Node.js projekt och använda IntelliSense och andra inbyggda funktioner som stöder Node.js. I den här handledningen skapar du ett Node.js webbapplikationsprojekt från en Visual Studio-mall. Sedan skapar du en enkel app med React.

I den här handledningen lär du dig att:

Skapa ett Node.js projekt
Lägga till npm-paket
Lägga till React-kod i din app
Transpile JSX
Bifoga felsökningsprogrammet

Viktig

Från och med Visual Studio 2022 kan du också skapa ett React-projekt med hjälp av den rekommenderade CLI-baserade projekttypen. En del av informationen i den här artikeln gäller endast för Node.js projekttypen (.njsproj). Mallen som används i den här artikeln är inte längre tillgänglig från och med Visual Studio 2022 version 17.8 Preview 2.

Innan du börjar, här är en snabb FAQ för att presentera några viktiga begrepp:

Vad är Node.js?

Node.js är en JavaScript-körningsmiljö på serversidan som kör JavaScript-kod.
Vad är npm?

Standardpakethanteraren för Node.js är npm. En pakethanterare gör det enklare att publicera och dela Node.js källkodsbibliotek. NPM-pakethanteraren förenklar biblioteksinstallation, uppdatering och avinstallation.
Vad är React?

React är ett frontend-ramverk för att skapa ett användargränssnitt (UI).
Vad är JSX?

JSX är ett JavaScript-syntaxtillägg som vanligtvis används med React för att beskriva gränssnittselement. Du måste transpilera JSX-kod till oformaterad JavaScript innan den kan köras i en webbläsare.
Vad är webpack?

Webpack paketerar JavaScript-filer så att de kan köras i en webbläsare och kan även transformera eller paketera andra resurser och tillgångar. Webpack kan ange en kompilator, till exempel Babel eller TypeScript, för att transpilera JSX- eller TypeScript-kod till oformaterad JavaScript.

Förutsättningar

Den här handledningen kräver följande förutsättningar:

Visual Studio med utvecklingsarbetsbelastningen Node.js installerad.

Om du inte har installerat Visual Studio ännu:
1. Gå till Visual Studio-nedladdningssidan för att installera Visual Studio gratis.
2. I Visual Studio Installer väljer du arbetsbelastningen Node.js utveckling och väljer Installera.
Om du har Visual Studio installerat men behöver arbetsbelastningen Node.js:
1. I Visual Studio går du till Tools>Hämta verktyg och funktioner.
2. I Visual Studio Installer väljer du utvecklingsarbetsbelastningen Node.js och väljer Ändra för att ladda ned och installera arbetsbelastningen.
Node.js runtime har installerats.

Om du inte har installerat Node.js körtidsmiljön, så installera LTS-versionen från Node.js:s webbplats. LTS-versionen har den bästa kompatibiliteten med andra ramverk och bibliotek.

Node.js-verktygen i Visual Studio Node.js-arbetsbelastningen stöder både Node.js 32-bitars- och 64-bitarsarkitekturversioner. Visual Studio kräver bara en version och installationsprogrammet för Node.js stöder bara en version i taget.

Visual Studio identifierar vanligtvis den installerade Node.js körningen automatiskt. Annars kan du konfigurera ditt projekt så att det refererar till den installerade runtimemiljön.
1. När du har skapat ett projekt högerklickar du på projektnoden och väljer Egenskaper.
2. I fönstret Egenskaper anger du sökvägen Node.exe för att referera till en global eller lokal installation av Node.js. Du kan ange sökvägen till en lokal tolk i vart och ett av dina Node.js projekt.

Den här självstudien testades med Node.js 12.6.2.

Skapa ett projekt

Skapa först ett Node.js webbappsprojekt.

Öppna Visual Studio.
Skapa ett nytt projekt.

Tryck på Esc för att stänga startfönstret. Skriv Ctrl + Q för att öppna sökrutan, skriv Node.jsoch välj sedan Blank Node.js Web Application – JavaScript. (Även om den här självstudien använder TypeScript-kompilatorn kräver stegen att du börjar med mallen JavaScript.)

I dialogrutan som visas väljer du Skapa.

Om du inte ser projektmallen Blank Node.js Web Application måste du lägga till arbetsbelastningen för Node.js utveckling. Detaljerade instruktioner finns i Krav.

Visual Studio skapar den nya lösningen och öppnar projektet.

(1) Markerat i fetstil är ditt projekt, med hjälp av namnet du gav i dialogrutan Nytt projekt. I filsystemet representeras projektet av en .njsproj fil i projektmappen. Du kan ange egenskaper och miljövariabler som är associerade med projektet genom att högerklicka på projektet och välja Egenskaper (eller trycka på Alt + Retur). Du kan använda andra utvecklingsverktyg för att göra round-tripping, eftersom projektfilen inte gör några anpassade ändringar i Node.js:s projektkälla.

(2) På den översta nivån finns en lösning som som standard har samma namn som projektet. En lösning som representeras av en .sln fil på disken är en container för ett eller flera relaterade projekt.

(3) Noden npm visar alla installerade npm-paket. Du kan högerklicka på npm-noden för att söka efter och installera npm-paket med hjälp av en dialogruta eller installera och uppdatera paket med hjälp av inställningarna i package.json och högerklicka på alternativen i npm-noden.

(4) package.json är en fil som används av npm för att hantera paketberoenden och paketversioner för lokalt installerade paket. Mer information finns i Hantera npm-paket.

(5) Projektfiler som server.js visas under projektnoden. server.js är projektets startfil och därför visas den i fetstil. Du kan ange startfilen genom att högerklicka på en fil i projektet och välja Ange som Node.js startfil.

Lägga till npm-paket

Den här appen kräver att följande npm-moduler körs korrekt:

reagera
react-dom
uttrycka
stig
ts-loader
TypeScript
webpack
webpack-cli

Så här installerar du ett paket:

I Solution Explorerhögerklickar du på noden npm och väljer Installera nya npm-paket.
I dialogrutan Installera nya npm-paket söker du efter reagera paketet och väljer Installera paket för att installera det.

I dialogrutan Installera nya npm-paket kan du välja att installera den senaste paketversionen eller ange en version. Om du väljer att installera de aktuella versionerna, men får oväntade fel senare, kan du prova att installera de exakta paketversionerna som anges i nästa steg.

Fönstret Utdata i det nedre fönstret i Visual Studio visar paketinstallationens förlopp. Öppna fönstret Utdata genom att välja Visa>utdata eller trycka på Ctrl+Alt+O. I fältet Visa utdata från i fönstret Utdata väljer du Npm.

När det har installerats visas react-paketet under noden npm i Solution Explorer.

Projektets package.json-fil uppdateras med den nya paketinformationen, inklusive paketversionen.

I stället för att använda användargränssnittet för att söka efter och lägga till resten av paketen en i taget kan du klistra in den nödvändiga paketkoden i package.json.

Öppna package.json i Visual Studio-redigeraren från Solution Explorer. Lägg till följande dependencies avsnitt före slutet av filen:
```
"dependencies": {
  "express": "^4.18.2",
  "path": "^0.12.7",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "ts-loader": "^9.4.2",
  "typescript": "^5.0.2",
  "webpack": "^5.76.3",
  "webpack-cli": "^5.0.1"
},
```
Om filen redan har ett dependencies avsnitt ersätter du den med föregående JSON-kod. Mer information om hur du använder filen package.json finns i package.json konfiguration.
Tryck på Ctrl+S eller välj Fil>Spara package.json för att spara ändringarna.
I Solution Explorerhögerklickar du på noden npm i projektet och väljer Installera npm-paket.

Det här kommandot kör kommandot npm install direkt för att installera alla paket som anges i packages.json.

Välj fönstret Utdata i den nedre panelen för att se installationsstatus. Installationen kan ta några minuter och du kanske inte ser resultat direkt. Kontrollera att du väljer Npm i fältet Visa utdata från i fönstret Utdata.

Efter installationen visas npm-modulerna i noden npm i Solution Explorer.

Not

Du kan också installera npm-paket med hjälp av kommandoraden. I Solution Explorerhögerklickar du på projektnamnet och väljer Öppna kommandotolken här. Använd standardkommandon för Node.js för att installera paket.

Lägga till projektfiler

Lägg sedan till fyra nya filer i projektet.

app.tsx
webpack-config.js
index.html
tsconfig.json

För den här enkla appen lägger du till de nya projektfilerna i projektroten. För de flesta appar lägger du till filerna i undermappar och justerar relativa sökvägsreferenser i enlighet med detta.

I Solution Explorerväljer du projektnamnet och trycker på Ctrl+Skift+A, eller högerklickar på projektnamnet och väljer Lägg till>nytt objekt.

Om du inte ser alla objektmallar väljer du Visa alla mallaroch väljer sedan objektmallen.
I dialogrutan Lägg till nytt objekt väljer du TypeScript JSX-fil, anger namnet app.tsxoch väljer Lägg till eller OK.
Upprepa de här stegen för att lägga till en JavaScript-fil med namnet webpack-config.js.
Upprepa de här stegen för att lägga till en HTML-fil med namnet index.html.
Upprepa de här stegen för att lägga till en TypeScript JSON-konfigurationsfil med namnet tsconfig.json.

Lägga till appkod

I Solution Exploreröppnar du server.js och ersätter den befintliga koden med följande kod:
```
'use strict';
var path = require('path');
var express = require('express');

var app = express();

var staticPath = path.join(__dirname, '/');
app.use(express.static(staticPath));

// Allows you to set port in the project properties.
app.set('port', process.env.PORT || 3000);

var server = app.listen(app.get('port'), function() {
    console.log('listening');
});
```
Föregående kod använder Express för att starta Node.js som webbprogramserver. Koden anger porten till det portnummer som konfigurerats i projektegenskaperna, som som standard är 1337. Om du behöver öppna projektegenskaperna högerklickar du på projektnamnet i Solution Explorer och väljer Egenskaper.

Öppna app.tsx och lägg till följande kod:

declare var require: any

var React = require('react');
var ReactDOM = require('react-dom');

export class Hello extends React.Component {
    render() {
        return (
            <h1>Welcome to React!!</h1>
        );
    }
}

ReactDOM.render(<Hello />, document.getElementById('root'));

Föregående kod använder JSX-syntax och React för att visa ett meddelande.

Öppna index.html och ersätt avsnittet body med följande kod:
```
<body>
    <div id="root"></div>
    
    <script src="./dist/app-bundle.js"></script>
</body>
```
Den här HTML-sidan läser in app-bundle.js, som innehåller JSX- och React-koden som överförs till oformaterad JavaScript. För närvarande är app-bundle.js en tom fil. I nästa avsnitt konfigurerar du alternativ för att transpilera koden.

Konfigurera webbpaket- och TypeScript-kompilatoralternativ

Sedan lägger du till konfigurationskod för webpack i webpack-config.js. Du lägger till en enkel webpack-konfiguration som anger en indatafil, app.tsxoch en utdatafil, app-bundle.js, för att paketera och transpilera JSX till oformaterad JavaScript. Du kan även konfigurera vissa TypeScript-kompilatoralternativ för att transpilera. Den här grundläggande konfigurationskoden är en introduktion till webpack och TypeScript-kompilatorn.

I Solution Exploreröppnar du webpack-config.js och lägger till följande kod.

module.exports = {
    devtool: 'source-map',
    entry: "./app.tsx",
    mode: "development",
    output: {
        filename: "./app-bundle.js"
    },
    resolve: {
        extensions: ['.Webpack.js', '.web.js', '.ts', '.js', '.jsx', '.tsx']
    },
    module: {
        rules: [
            {
                test: /\.tsx$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'ts-loader'
                }
            }
        ]
    }
}

Konfigurationskoden för webpack instruerar webpack att använda TypeScript-inläsaren för att transpilera JSX.

Öppna tsconfig.json och ersätt innehållet med följande kod, som anger TypeScript-kompilatoralternativen:

{
  "compilerOptions": {
    "noImplicitAny": false,
    "module": "commonjs",
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "jsx": "react"
  },
  "exclude": [
    "node_modules"
  ],
  "files": [
    "app.tsx"
  ]
}

Koden anger app.tsx som källfil.

Tryck Ctrl+Shift+S eller välj Fil>Spara Allt för att spara alla ändringar.

Transpilera JSX

I Solution Explorerhögerklickar du på projektnamnet och väljer Öppna kommandotolken här.
I kommandotolken anger du följande webpack-kommando:

node_modules\.bin\webpack --config webpack-config.js

Kommandotolken visar resultatet.

Om du ser några fel i stället för föregående utdata måste du lösa dem innan appen fungerar. Om npm-paketversionerna skiljer sig från de versioner som anges i den här handledningen kan det leda till fel. Prova följande för att åtgärda felen:
- Använd de exakta versioner som visas i det tidigare steget, om du inte redan har gjort det
  
  Eller om du fortfarande ser fel:
- Installera de senaste versionerna av npm-paketen genom att högerklicka på noden npm i Solution Explorer och välja Installera npm-paket.
Om en eller flera paketversioner är inaktuella och resulterar i ett fel kan du behöva installera en nyare version för att åtgärda fel. Information om hur du använder package.json för att styra npm-paketversioner finns i package.json konfiguration.
I Solution Explorerhögerklickar du på projektnoden och väljer Lägg till>befintlig mapp.
Välj mappen dist och välj sedan Välj mapp.

Visual Studio lägger till mappen dist, som innehåller app-bundle.js och app-bundle.js.map, i projektet.
Öppna app-bundle.js för att se den transpilerade JavaScript-koden.
Om du uppmanas att ladda om externt ändrade filer, väljer du Ja för alla.

När du gör ändringar i app.tsx-måste du köra webpack-kommandot igen. Om du vill automatisera det här steget kan du lägga till ett byggskript för att transpilera JSX.

Lägga till ett byggskript för att transpilera JSX

Visual Studio-versioner som börjar med Visual Studio 2019 kräver ett byggskript. I stället för att transpilera JSX på kommandoraden, som du ser i föregående avsnitt, kan du transpilera JSX när du skapar från Visual Studio.

Öppna package.json och lägg till följande avsnitt efter avsnittet dependencies:
```
"scripts": {
 "build": "webpack-cli --config webpack-config.js"
}
```
Spara ändringarna.

Kör appen

I verktygsfältet Felsökning väljer du antingen Web Server (Microsoft Edge) eller Web Server (Google Chrome) som felsökningsmål.

Om du vet att det önskade felsökningsmålet är tillgängligt på datorn, men det inte visas som ett alternativ, väljer du Bläddra med i listrutan för felsökningsmål. Välj standardwebbläsarens mål i listan och välj Ange som standard.
Om du vill köra appen trycker du på F5, väljer den gröna pilknappen eller väljer Felsök>Starta felsökning.

Ett Node.js konsolfönster öppnas som visar lyssningsporten för felsökningsprogrammet.

Visual Studio startar appen genom att starta startfilen server.js.
Stäng webbläsar- och konsolfönstren.

Ange en brytpunkt och kör appen

Brytpunkter är den mest grundläggande och viktiga funktionen för tillförlitlig felsökning. En brytpunkt anger var Visual Studio ska pausa koden som körs. Du kan sedan observera variabelvärden, minnesbeteende eller om en kodgren körs.

I server.jsklickar du i marginalen till vänster om staticPath-deklarationen för att ange en brytpunkt.
Om du vill köra appen trycker du på F5 eller väljer Felsöka>Starta felsökning.

Debuggern pausar vid den brytpunkt du har ställt in, med den aktuella instruktionen markerad. Nu kan du inspektera apptillståndet genom att hovra över variabler som för närvarande finns i omfånget med hjälp av felsökningsfönster som Locals och Watch windows.
Om du vill fortsätta köra appen trycker du på F5, väljer Fortsätt i verktygsfältet Felsökning eller väljer Felsökning>Fortsätt.

Om du vill använda Chrome Developer Tools eller F12 Tools för Microsoft Edge trycker du på F12. Du kan använda dessa verktyg för att undersöka DOM och interagera med appen med hjälp av JavaScript-konsolen.
Stäng webbläsar- och konsolfönstren.

Ange och tryck på en brytpunkt i React-koden på klientsidan

I föregående avsnitt kopplade du felsökningsprogrammet till Node.js kod på serversidan. Om du vill koppla till och träffa brytpunkter i React-koden på klientsidan måste du koppla felsökningsprogrammet till rätt process. Här är ett sätt att aktivera en webbläsare och bifoga en process för felsökning.

Aktivera webbläsaren för felsökning

Du kan använda antingen Microsoft Edge eller Google Chrome. Stäng alla fönster för målwebbläsaren. För Microsoft Edge stänger du även av alla instanser av Chrome. Eftersom båda webbläsarna delar Chromium-kodbasen ger avstängning av båda webbläsarna bästa resultat.

Andra webbläsarinstanser kan förhindra att webbläsaren öppnas med felsökning aktiverat. Webbläsartillägg kan förhindra fullständigt felsökningsläge. Du kan behöva använda Aktivitetshanteraren för att hitta och avsluta alla chrome-instanser som körs.

Så här startar du webbläsaren med felsökning aktiverat:

Välj Bläddra med från rullgardinsmenyn i verktygsfältet Debug.
På skärmen Bläddra med, när din föredragna webbläsare är markerad, välj Lägg till.
Ange flaggan --remote-debugging-port=9222 i fältet Argument.
Ge webbläsaren ett nytt eget namn, till exempel Edge med felsökning eller Chrome med felsökning, och välj sedan OK.
På skärmen Bläddra med väljer du Bläddra.

Du kan också öppna kommandot Kör genom att högerklicka på knappen Windows Starta och ange:

msedge --remote-debugging-port=9222

eller

chrome.exe --remote-debugging-port=9222

Webbläsaren börjar med felsökning aktiverat. Appen körs inte än, så webbläsarsidan är tom.

Koppla felsökningsprogrammet till skriptet på klientsidan

I Visual Studio-redigeraren anger du en brytpunkt i antingen app-bundle.js eller app.tsx källkod.
- För app-bundle.jsanger du brytpunkten i funktionen render(). Om du vill hitta funktionen render() i filen app-bundle.js trycker du på Ctrl+F eller väljer Redigera>Sök och Ersätt>Snabbsökningoch anger rendera i sökfältet.
- För app.tsxanger du brytpunkten i funktionen render() på return-instruktionen.
  
  Om du anger brytpunkten i app.tsxuppdaterar du även webpack-config.js för att ersätta följande kod och sparar ändringarna.
  
  Ersätt den här koden:
```
output: {
    filename: "./app-bundle.js",
},
```
  Med den här koden:
```
output: {
    filename: "./app-bundle.js",
    devtoolModuleFilenameTemplate: '[resource-path]'  // removes the webpack:/// prefix
},
```
  Den här inställningen endast för utveckling möjliggör felsökning i Visual Studio. Webbpaketreferenser i källmappningsfilen innehåller som standard prefixet webpack:///, vilket hindrar Visual Studio från att hitta källfilen app.tsx. Den här inställningen åsidosätter de genererade referenserna i källmappningsfilen app-bundle.js.mapnär appen skapas. Mer specifikt ändrar den här inställningen referensen till källfilen från webpack:///./app.tsx till ./app.tsx, vilket möjliggör felsökning.
Välj målwebbläsaren som felsökningsmål i Visual Studio och tryck sedan på Ctrl+F5eller välj Felsök>Starta utan att felsöka, för att köra appen i webbläsaren.

Om du har skapat en felsökningsaktiverad webbläsarkonfiguration med ett eget namn väljer du webbläsaren som felsökningsmål.

Appen öppnas på en ny webbläsarflik.
Välj Felsök>Koppla till processeller tryck på Ctrl+Alt+P.

Tips

När du ansluter till processen första gången kan du snabbt ansluta till samma process igen genom att välja Felsöka>Koppla om till Process eller trycka på Skift+Alt+P.
I dialogrutan Koppla till process hämtar du en filtrerad lista över webbläsarinstanser som du kan koppla till.

Kontrollera att rätt felsökningsprogram för målwebbläsaren, JavaScript (Chrome) eller JavaScript (Microsoft Edge – Chromium), visas i fältet Koppla till. Skriv krom eller kant i filterrutan för att filtrera resultatet.
Välj webbläsarprocessen med rätt värdport, localhost i det här exemplet. Portnumret 1337 eller localhost kan också visas i fältet Rubrik för att hjälpa dig att välja rätt process.
Välj Koppla.

I följande exempel visas fönstret Koppla till process för Microsoft Edge-webbläsaren.

Tips

Om felsökningsprogrammet inte bifogas och du ser meddelandet Det går inte att ansluta till processen. En åtgärd är inte laglig i det aktuella tillståndet.använder du Aktivitetshanteraren för att stänga alla instanser av målwebbläsaren innan du startar webbläsaren i felsökningsläge. Webbläsartillägg kan köras och förhindra fullständigt felsökningsläge.
Eftersom koden med brytpunkten redan har körts uppdaterar du webbläsarsidan för att träffa brytpunkten.

Beroende på din miljö, webbläsartillstånd och vilka steg du följde tidigare kan du träffa brytpunkten i app-bundle.js eller dess mappade plats i app.tsx. Hur som helst kan du gå igenom kod och undersöka variabler.

När felsökningsprogrammet är pausat kan du undersöka apptillståndet genom att hovra över variabler och använda felsökningsfönster. Om du vill gå igenom kod trycker du på F11 eller väljer Felsöka>Steg in ieller trycker på F10 eller väljer Felsöka>Steg över. Om du vill fortsätta köra koden trycker du på F5 eller väljer Fortsätt. Mer information om grundläggande felsökningsfunktioner finns i Titta först på felsökningsprogrammet.
- Om du inte kan gå in i koden i app.tsx, försök igen med Koppla till process för att ansluta felsökningsprogrammet enligt beskrivningen i föregående steg. Kontrollera att din miljö är korrekt konfigurerad:
  - Stäng alla webbläsarinstanser, inklusive Chrome-tillägg, med hjälp av Aktivitetshanteraren. Kontrollera att du startar webbläsaren i felsökningsläge.
  - Kontrollera att källmappningsfilen innehåller en referens till ./app.tsx och inte webpack:///./app.tsx, vilket hindrar Visual Studio-felsökningsprogrammet från att hitta app.tsx.
  Du kan också prova att använda debugger;-instruktionen i app.tsxeller ange brytpunkter i Chrome Developer Tools eller F12 Tools för Microsoft Edge i stället.
- Om du inte kan dela upp koden i app-bundle.jstar du bort källmappningsfilen app-bundle.js.map-.