Jak utworzyć podstawową zawartość do uruchomienia na localhost przy użyciu kodu Visual Studio?

Question

Więc jestem noob z większością technologii hostingu, więc jest to prawdopodobnie bardzo podstawowe pytanie. Znam przyzwoitą ilość o kodowaniu w ogóle i o tym, jak CSS, Javascript i HTML współpracują ze sobą, ale gubię się z koncepcją hostowania/uruchamiania czegoś i dołączania do niego, w przeciwieństwie do otwarcia przeglądarki z plikiem w górę (file: // /C:/Test/index.html). Wiem, że możesz użyć pliku tasks.json, który może przejść do ulubionej przeglądarki i otworzyć w nim stronę: How to view my HTML code in browser with Visual Studio Code?. Jednak nie jest to tworzenie działającego procesu na lokalnym hoście, do którego należy się przyłączyć.

Próbuję spojrzeć na tutoriale kodu Visual Studio tutaj: https://code.visualstudio.com/docs/editor/debugging. Ale wydaje się, że myślę, że mam zdolność do uruchomienia procesu na lokalnym hoście i dołączenia do niego, kiedy tego nie robię.

Pobrałem rozszerzenie dla debuggera dla Chrome i mój launch.json teraz wygląda tak:

{ 
"version": "0.2.0", 
"configurations": [ 
    { 
     "name": "Launch Chrome against localhost, with sourcemaps", 
     "type": "chrome", 
     "request": "launch", 
     "url": "http://localhost:3000", 
     "sourceMaps": true, 
     "webRoot": "${workspaceRoot}" 
    }, 
    { 
     "name": "Attach to Chrome, with sourcemaps", 
     "type": "chrome", 
     "request": "attach", 
     "port": 9222, 
     "sourceMaps": true, 
     "webRoot": "${workspaceRoot}" 
    } 
] 
} 

Próbowałem to zmienić na podstawie tutoriali, aby uruchomić treści, ale to nie działa, ponieważ nie samouczka Określa, że ​​robią to za pomocą node.js jako przykładu i był ciekawy, czy można zrobić tylko podstawowy.

Jak mogę kod hosta dla zwykłego jane html, javascript i css z kodem Visual Studio? Chcę po prostu rozpocząć testowanie trochę javascript w kółko bez NPM, Gulp lub innych platform. Czy mogę po prostu przejąć ten plik lub inny, aby go uruchomić i uruchomić w usługach IIS lub innej platformie hostingowej? Czy to nie ma znaczenia? Robiłem samouczek dla Angular 2 z NPM i z npm po prostu robisz polecenie konsoli "npm start" w twojej lokalizacji, a następnie, robi to wszystko dla ciebie i rezerwuje port na lokalnym hoście i robi to wszystko (http://localhost:3000 teraz pokazuje moje treści). Czy mogę to zrobić w przypadku niektórych procesów w kodzie VS lub niektórych poleceń, które mogę utworzyć?

Answer 1

Potrzebny jest jakiś serwer WWW. Kątowy 2 przewodnik szybkiego startu używa serwera LITE. To jest serwer sieciowy o małym węźle. Możesz po prostu zainstalować go z npm.

npm init 

npm install lite-server --save-dev 

niż w swoim package.json dodać do skryptów

"start": "lite-server" 

Upewnij się, że plik index.html w tym folderze, a nie tylko uruchomić

npm start 

i Twojego serwera WWW uruchamia się i wyświetla twoją stronę w przeglądarce.

---

Można również utworzyć własny serwer WWW, a następnie dołączyć do niego debuggera, ale wymaga to użycia węzła lub innych narzędzi.

łatwym sposobem na zrobienie jest utworzenie pliku server.js za pomocą prostego, ekspresowego serwera.

Initialize npm: npm startowych

Instalacja ekspresowa z KMP: npm zainstalować express flagą --save

niż utworzyć plik server.js:

var express = require('express'); 
var app = express(); 

app.listen(3000, function() { 
    console.log('Listening on port 3000'); 
}); 

//Change the './' to point to the root of your angular app 
app.use(express.static(path.resolve('./'))); 

//Send everything to your index.html page 
app.get('/*', function(req, res) { 
    res.sendFile(path.resolve('./index.html')); 
}); 

Teraz w launch.json dodać odpowiednia konfiguracja.Na przykład:

{ 
     "name": "Launch", 
     "type": "node", 
     "request": "launch", 
     "program": "${workspaceRoot}/index.js", 
     "stopOnEntry": false, 
     "args": [], 
     "cwd": "${workspaceRoot}", 
     "preLaunchTask": null, 
     "runtimeExecutable": null, 
     "runtimeArgs": [ 
      "--nolazy" 
     ], 
     "console": "internalConsole", 
     "sourceMaps": false, 
     "outDir": null 
    }, 

Jeśli po uruchomieniu kodu Visual Studio debugera Twoja strona będzie służył z localhost: 3000

nadzieję, że to jest to, czego szukasz :)

Answer 2

używam pakiet o nazwie węzła reload w tym celu. Dobrą rzeczą jest to, że automatycznie odświeża zmiany plików i nie potrzebujesz żadnych plików konfiguracyjnych. Podawanie prostych treści statycznych html jest łatwe.

Najpierw trzeba zainstalować reload:

npm install [-g] [--save-dev] reload 

potem CD w folderze z index.html służyć plik indeksu.

reload -b