Как запустить node js проект

Учебник. Создание приложения Node.js и Express в Visual Studio

Область применения:Visual Studio Visual Studio для Mac Visual Studio Code

В этой статье вы узнаете, как использовать Visual Studio для создания простого веб-приложения Node.js, использующего платформу Express.

Прежде чем приступить к работе, изучите краткий список вопросов и ответов, который познакомит вас с некоторыми основными понятиями.

• Что такое Node.js? Node.js — это серверная среда выполнения JavaScript, выполняющая код JavaScript.
• Что такое npm? Диспетчер пакетов упрощает использование и совместное использование библиотек исходного кода Node.js. npm —это стандартный диспетчер пакетов Node.js. Диспетчер пакетов npm упрощает установку, обновление и удаление библиотек.
• Что такое Express? Express — это серверная платформа веб-приложений, которую использует Node.js для создания веб-приложений. При использовании Express существует множество различных способов создания пользовательского интерфейса. Реализация, предоставляемая в этом руководстве, использует обработчик шаблонов по умолчанию генератора приложений Express, называемый Pug, для отрисовки внешнего интерфейса.

Необходимые компоненты

Обязательно установите следующие компоненты:

• Visual Studio 2022 версии 17.4 или более поздней версии с установленной рабочей нагрузкой ASP.NET и веб-разработки . Перейдите на страницу скачиваемых материалов Visual Studio, чтобы установить ее бесплатно. Если вам нужно установить рабочую нагрузку и у вас уже есть Visual Studio, перейдите в раздел Средства>Получить средства и компоненты. , после чего запустится Visual Studio Installer. Выберите рабочую нагрузку ASP.NET и разработка веб-приложений, а затем щелкните Изменить.
• npm (https://www.npmjs.com/), который входит в состав Node.js
• npx (https://www.npmjs.com/package/npx).

Создание своего приложения

1. В окне запуска (чтобы открыть его, щелкните Файл>Окно запуска) выберите Создание нового проекта.
2. Найдите Express в строке поиска в верхней части и выберите приложение JavaScript Express.
3. Присвойте имена проекту и решению.

Просмотр свойств проекта

Параметры проекта по умолчанию позволяют выполнить сборку и отладку проекта. Но если вам нужно изменить параметры, щелкните правой кнопкой мыши проект в Обозреватель решений, выберите Свойства, а затем перейдите в раздел Сборка или Отладка.

Файл launch.json хранит параметры запуска, связанные с кнопкой Запуск на панели инструментов отладки. В настоящее время файл launch.json должен находиться в папке .vscode.

Сборка проекта

Выберите Сборка>Собрать решение, чтобы собрать проект.

Запуск приложения

Нажмите клавишу F5 или кнопку Запуск в верхней части окна, чтобы открыть командную строку.

• npm под управлением команды node ./bin/www

Проверьте наличие в консоли сообщений, например сообщения с указанием обновить версию Node.js.

Затем появится базовое приложение Express!

Отладка приложения

Теперь мы рассмотрим несколько способов отладки приложения.

Во-первых, если приложение по-прежнему работает, нажмите клавиши SHIFT +F5 или нажмите красную кнопку остановки в верхней части окна, чтобы остановить текущий сеанс. Возможно, вы заметите, что остановка сеанса закрывает браузер, показывающий приложение, но оставляет позади окна командной строки, выполняющего процесс Node. На данный момент вернитесь и закройте все задерживающиеся командные строки. Далее в этой статье описано, почему может потребоваться оставить процесс узла запущенным.

Отладка процесса узла

В раскрывающемся списке рядом с кнопкой «Пуск » вы увидите следующие параметры запуска:

• localhost (Edge)
• localhost (Chrome)
• Отладка Dev Env
• Запуск узла и браузера

Перейдите вперед и выберите параметр «Запустить узел» и «Браузер «. Теперь, прежде чем нажать клавишу F5 или снова нажать кнопку «Пуск «, установите точку останова в index.js (в папке маршрутов ), выбрав левую полоску перед следующей строкой кода: res.render(‘index’, < title: 'Express' >);

Вы также можете поместить курсор в строку кода и нажать клавишу F9 , чтобы переключить точку останова для этой строки.

Затем нажмите клавишу F5 или выберите «Начать отладку отладки», чтобы отладить>приложение.

Вы увидите, что отладчик приостанавливается в простой точке останова. Пока оно приостановлено, вы можете проверить состояние приложения. При наведении указателя мыши на переменные можно изучить их свойства.

Завершив проверку состояния, нажмите клавишу F5 , чтобы продолжить работу, и приложение должно загрузиться должным образом.

На этот раз при нажатии кнопки «Остановить» вы увидите, что окно браузера и командной строки закрываются. Чтобы узнать, почему ознакомьтесь с файлом launch.json.

Общие сведения о launch.json

Файл launch.json в настоящее время находится в папке VSCODE . Если в Обозреватель решений не отображается папка VSCODE, выберите «Показать все файлы«.

Если вы работали с Visual Studio Code раньше, файл launch.json будет выглядеть знакомым. Файл launch.json здесь работает так же, как и в Visual Studio Code, чтобы обозначить конфигурации запуска, используемые для отладки. Каждая запись указывает один или несколько целевых объектов для отладки.

Первые две записи являются записями браузера, и они должны выглядеть примерно так:

 < "name": "localhost (Edge)", "type": "edge", "request": "launch", "url": "http://localhost:3000", "webRoot": "$\\public" >, < "name": "localhost (Chrome)", "type": "chrome", "request": "launch", "url": "http://localhost:3000", "webRoot": "$\\public" > 

В приведенных выше записях type отображается тип браузера. Если вы запускаете только тип браузера в качестве единственного целевого объекта отладки, Visual Studio отлаживать только процесс внешнего браузера, а процесс node будет запущен без подключения отладчика, то есть любые точки останова, заданные в процессе узла, не будут привязываться.

После остановки сеанса процесс узла также продолжит выполняться. Он намеренно остается запущенным, когда браузер является целевым объектом отладки, так как если работа выполняется исключительно на интерфейсе, то при непрерывном выполнении внутреннего процесса упрощается рабочий процесс разработки.

В начале этого раздела вы закрыли окно командной строки для установки точек останова в процессе Node. Чтобы процесс узла был отлаживаемым, его необходимо перезапустить с присоединенным отладчиком. Если не отладочный процесс узла не выполняется, попытка запустить процесс Узла в режиме отладки (без перенастройки порта) завершится ошибкой.

edge В настоящее время и chrome являются единственными поддерживаемыми типами браузеров для отладки.

Третья запись в файле launch.json указывает node тип отладки и должен выглядеть примерно так:

 < "name": "Debug Dev Env", "type": "node", "request": "launch", "cwd": "$/bin", "program": "$/bin/www", "stopOnEntry": true > 

Эта запись запустит только процесс узла в режиме отладки. Браузер не будет запущен.

Четвертая запись, указанная в файле launch.json*, является следующей конфигурацией составного запуска.

Эта составная конфигурация совпадает с конфигурацией составного запуска vscode и позволяет отлаживать интерфейсную и серверную части. Вы можете увидеть, что он просто ссылается на отдельные конфигурации запуска для процессов узла и браузера.

В конфигурации запуска можно использовать множество других атрибутов. Например, можно скрыть конфигурацию из раскрывающегося списка, но при этом можно ссылаться, задав hidden атрибут в объекте presentation значение true .

 < "name": "localhost (Chrome)", "type": "chrome", "request": "launch", "url": "http://localhost:3000", "webRoot": "$\\public", "presentation": < "hidden": true >> 

Нажмите кнопку » Параметры » для списка атрибутов, которые можно использовать для улучшения возможностей отладки. Обратите внимание, что на данный момент поддерживаются только конфигурации запуска . Любая попытка использовать конфигурацию подключения приведет к сбою развертывания.

Введение в Node JS

Node.js представляет среду выполнения кода на JavaScript, которая построена на основе движка JavaScript Chrome V8, который позволяет транслировать вызовы на языке JavaScript в машинный код. Node.js прежде всего предназначен для создания серверных приложений на языке JavaScript. Хотя также существуют проекты по написанию десктопных приложений (Electron) и даже по созданию кода для микроконтроллеров. Но прежде всего мы говорим о Node.js, как о платформе для создания веб-приложений.

Node.js является открытым проектом, исходники которого можно посмотреть на github.com.

Установка

Для загрузки перейдет на официальный сайт https://nodejs.org/en/. На главной странице мы сразу увидим две возможные опции для загрузки: самая последняя версия NodeJS и LTS-версия.

Загрузим последнюю версию. В моем случае это версия 16.1.0. Для Windows установщик представляет файл с расширением msi. После запуска откроется программа установщика:

После успешной установки вы можем ввести в командной строке/терминале команду node -v , и нам отобразится текущая версия node.js:

C:\WINDOWS\system32>node -v v16.1.0

Версии node.js для других операционных систем наряду с исходниками можно найти по адресу https://nodejs.org/en/download/

Инструменты разработки

Для разработки под Node JS достаточно простейшего текстового редактора, в частности, Notepad++. Также можно использовать более изощренные редакторы типа Atom, Sublime, Visual Studio Code, либо среды разработки, которые поддерживают работу с Node.JS, например, Visual Studio или WebStorm.

REPL

После установки NodeJS нам становится доступным такой инструмент как REPL. REPL (Read Eval Print Loop) представляет возможность запуска выражений на языке JavaScript в командной строке или терминале.

Так, запустим командную строку (на Windows) или терминал (на OS X или Linux) и введем команду node . После ввода этой команды мы можем выполнять различные выражения на JavaScript:

C:\WINDOWS\system32>node Welcome to Node.js v16.1.0 Type ".help" for more information. > 2+6 8 >

Или используем какую-нибудь функцию JS:

> console.log("Hello NodeJS"); Hello NodeJS undefined >

Можно определять свои функции и затем их вызывать, например, возведение числа в квадрат:

> function square(x) undefined >square(5) 25 >

Если мы введем что-то неправильно, то REPL укажет об ошибке:

Выполнение файла

Вместо того чтобы вводить весь код напрямую в консоль, удобнее вынести его во внешний файл. Например, создадим на жестком диске новый каталог, допустим, C:\node\helloapp , в который поместим новый файл app.js со следующим кодом:

console.log("Hello world");

В командной строке перейдем с помощью команды cd к каталогу helloapp, а затем выполним команду:

node app.js

Данная команда выполнит код из файла app.js:

Запуск сценариев TypeScript с помощью ts-node

TypeScript становится все популярнее, поскольку он является расширенным набором JavaScript и позволяет компилировать ваши файлы TypeScript в чистый JavaScript до того, как движок V8 сможет их понять. Также вы можете следить за изменениями файлов и автоматизировать компиляцию. Но иногда все эти функции не нужны – например, если вы просто хотите запустить свой скрипт и получить результаты. Здесь на помощь приходит ts-node, который позволяет с легкостью выполнять сценарии TypeScript.

Требования

• Последняя версия Node, установленная на вашем компьютере. Вы можете сделать это, следуя мануалу для вашего дистрибутива: Mac OS, Ubuntu, CentOS, Debian.
• Базовое знакомство с npm. Чтобы узнать больше о работе с этим инструментом, прочтите руководство Управление модулями Node.js с помощью npm и package.json.
• Навыки работы с TypeScript. Если не знаете, с чего начать, прочитайте статью Как создать новый проект TypeScript.

1: Начало работы

Для начала нужно установить typescript и ts-node:

npm install typescript ts-node

Поскольку ts-node — это исполняемый файл, который можно запускать, вам не нужно ничего импортировать в ваши сценарии или добавлять в требования.

Если у вас еще нет проекта TypeScript, на котором вы могли бы потренироваться, вы можете просто использовать этот скрипт reptile.ts:

class Reptile < private reptiles: Array= [ 'Alligator', 'Crocodile', 'Chameleon', 'Komodo Dragon', 'Iguana', 'Salamander', 'Snake', 'Lizard', 'Python', 'Tortoise', 'Turtle', ]; shuffle(): void < for (let i = this.reptiles.length - 1; i >0; i--) < let j: number = Math.floor(Math.random() * (i + 1)); let temp: string = this.reptiles[i]; this.reptiles[i] = this.reptiles[j]; this.reptiles[j] = temp; >> random(count: number = 1, allowDupes?: boolean): Array  < let selected: Array= []; if (!allowDupes && count > this.reptiles.length) < throw new Error(`Can't ensure no dupes for that count`); >for (let i: number = 0; i < count; i++) < if (allowDupes) < // Dupes are cool, so let's just pull random reptiles selected.push(this.reptiles[ Math.floor(Math.random() * this.reptiles.length) ]); >else < // Dupes are no go, shuffle the array and grab a few this.shuffle(); selected = this.reptiles.slice(0, count); >> return selected; > > const reptile = new Reptile(); console.log(`With Dupes: $`); console.log(`And Without: $`);

Приведенный выше скрипт извлекает случайные значения из массива и возвращает два списка данных: в одном из них могут быть повторы, во втором – нет. Опять же, вы можете использовать любой другой скрипт, если хотите.

Убедитесь, что ваш скрипт возвращает значение и выводит что-то в консоль. Теперь, когда ваш сценарий TypeScript готов, вы можете перейти к его запуску.

2: Запуск скриптов

Прежде чем приступить к работе с ts-node, давайте посмотрим, что происходит, когда вы запускаете сценарий TypeScript с помощью Node.

Запустите скрипт reptile.ts (или другой скрипт TypeScript) с помощью команды node:

После выполнения этой команды вы увидите сообщение об ошибке:

SyntaxError: Unexpected identifier

Сообщение SyntaxError указывает на переменную закрытого класса во второй строке reptile.ts.

Итак, использование Node для запуска скриптов TypeScript возвращает ошибку. Теперь, когда вы знаете, чего не следует делать и чего ожидать от Node, пора попробовать ts-node.

Используйте ts-node для запуска скрипта reptile.ts:

npx ts-node reptile.ts

Команда npx – это инструмент, который теперь поставляется с npm и позволяет запускать локальные для проекта двоичные файлы из командной строки.

Вы увидите такой вывод при запуске этого скрипта:

With Dupes: Komodo Dragon,Python,Tortoise,Iguana,Turtle,Salamander,Python,Python,Salamander,Snake And Without: Alligator,Iguana,Lizard,Snake,Tortoise,Chameleon,Crocodile,Komodo Dragon,Turtle,Salamander

Запуск reptile.ts через ts-node вернет два списка данных. Как видите, команда ts-node эффективно запускает сценарии TypeScript. Но есть способ сделать это еще быстрее.

3: Оптимизация ts-node

ts-node работает так: он берет ваш скрипт, выполняет базовую семантическую проверку, чтобы убедиться, что код не содержит ошибок, а затем компилирует TypeScript в JavaScript.

Это самый безопасный вариант. Но если вас не беспокоят ошибки, вы можете передать флаг -T или –transpileOnly. Тогда ts-node будет выполнять транспиляцию в JavaScript без проверки ошибок в коде TypeScript.

Хотя использовать этот флаг не всегда безопасно, есть сценарии, в которых это имеет смысл. Если вы пытаетесь запустить чужой скрипт или уверены, что ваш редактор и линтер перехватывают все ошибки, спокойно используйте флаг -T.

npx ts-node -T reptile.ts

Запуск этой команды даст вам тот же результат, что и этой:

npx ts-node reptile.ts

Но ts-node способен на большее – эта команда также предлагает поддержку TypeScript REPL.

4: Как работает TypeScript REPL

Еще одним дополнительным преимуществом ts-node является возможность использовать TypeScript REPL (read-evaluate-print loop), что работает аналогично команде node без каких-либо параметров.

Этот TypeScript REPL позволяет писать TypeScript прямо в командной строке, что очень удобно для быстрого тестирования чего-либо.

Чтобы получить доступ к TypeScript REPL, запустите ts-node без аргументов:

Теперь вы можете наслаждаться всеми преимуществами TypeScript прямо в своем любимом терминале.

Заключение

В этой статье вы узнали, что такое ts-node и как использовать его для запуска сценариев TypeScript. Также вы научились использовать TypeScript REPL с помощью ts-node.

Не понимаю, как запустить проект на node js

Я фрилансер, выполняю заказ. Проект писал не я, от меня требуется только написать авторизацию/регистрацию и мелкие фишки для сайта, работа на php. Я уже закончил работу, и хочу пофиксить баги, но не знаю как запустить проект т.к никогда не работал с файлами Phar, Composer, PHPUnit, Webpack. Заранее огромное спасибо.

Отслеживать
задан 19 дек 2019 в 20:57
GeorgeJornd GeorgeJornd
69 1 1 серебряный знак 6 6 бронзовых знаков

Почитайте как работать с node.js и менеджером пакетов npm. Обычно проект запускается через команды npm install для предварительной загрузки недостающих на машине пакетов и непостредственно npm start .

19 дек 2019 в 21:04

Вам стоит отказаться от заказа, «никогда не работал с файлами Phar, Composer, PHPUnit, Webpack» и вообще создание этого вопроса однозначно говорят о том, что грамотно реализовать «авторизацию/регистрацию» у вас не выйдет со всеми вытекающими.

19 дек 2019 в 21:16

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Поставь nodejs и запускай (для dev-режима)

npm start 

Если не получится, нужна секция scripts из package.json .

Отслеживать
ответ дан 19 дек 2019 в 21:02
122k 24 24 золотых знака 124 124 серебряных знака 299 299 бронзовых знаков

Я возможно все сделал правильно, но не знаю где его открывать в браузере. 127.0.0.1: и localhost пробовал. Проект лежит в папке htdocs, xampp

19 дек 2019 в 21:52

Вам нужно знать порт, по которому работает express сервер обрабатывающий http запросы. Обычно в файле app.js внизу что то типа.

app.listen(3000, () => console.log(‘server is working’));

Значит сервер обрабатывает запрос к 3000 порту, и адрес будет http://localhost:3000

Естественно при этом должен быть запущен node, команда npm start из каталога с проектом, или команда node app.js из каталога проекта, или ng serve. Смотря что у вас указанно в теге scripts файлы package.json

Отслеживать
ответ дан 28 дек 2019 в 17:27
59 1 1 серебряный знак 5 5 бронзовых знаков

• php
• node.js

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.