Как запустить приложение node.js в браузере?

Как запустить приложение, что бы результат отобразился в браузере? Установил этот npm-пакет node-whois. Если в консоли ввести node app.js , то работает: Как сделать так, чтобы результат работы этого скрипта отображался не в консоли, а в браузере? Типа вот этого: Node.js

Отслеживать
67.9k 216 216 золотых знаков 77 77 серебряных знаков 219 219 бронзовых знаков
задан 11 янв 2016 в 19:05
13 1 1 серебряный знак 3 3 бронзовых знака
Попробуй заменить console.log на process.stdout.write
11 янв 2016 в 19:30
Код своего app.js покажите для начала.
11 янв 2016 в 19:34
@sergey-rufanov var whois = require(‘node-whois’) whois.lookup(‘google.com’, function (err, data) < console.log(data) >)
11 янв 2016 в 19:43
@Greyson process.stdout.write не работает?
11 янв 2016 в 19:54

@АлексейШиманский это не то, на втором скрине я лишь привел пример чего я хочу. В итоге мне нужно сделать так, что бы на html странице я мог в input вписать имя домена и это значение передалось в app.js. Т.е. как я могу подключить app.js к index.html? Если напрямую подключать , то выдает ошибку Uncaught ReferenceError: require is not defined, что логично.

11 янв 2016 в 20:08

1 ответ 1

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

У вас консольное приложение. Вам же нужно сделать из него веб-приложение, которое будет обрабатывать запросы браузера. В самом простом варианте, это выглядит как-то так(с использованием Express):

var express = require('express'); var whois = require('node-whois'); var app = express(); var port = 8080; app.get('/', function (req, res) < res.contentType('text/plain'); whois.lookup('google.com', function(err, data) < res.send(data) >); >); app.listen(port, function () < console.log('server running at http://localhost:%s', port); >);

Исходная задача выполненна — ура!

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

Для этого вам уже приведется изучить хотя бы базовые навыки верстки, а так-же освоить тот-же Express для написания бекенда.

Как установить Node.js на Windows: пошаговая инструкция

На JavaScript выполняется большая часть интерактивных элементов на сайтах и в мобильных приложениях. JavaScript отлично работает с HTML/CSS и интегрирован основные браузеры на рынке. Чистый JavaScript используется в вебе, а для общего применения JavaScript разработчики используют различные среды выполнения, например, Node.js.

Node.js — это среда выполнения кода JavaScript. Она позволяет использовать JavaScript как язык программирования общего назначения: создавать на нем серверную часть и писать полноценные десктопные приложения.

Основа Node.js — движок V8. Этот движок был разработан Google и используется в браузере Google Chrome. Он компилирует код JavaScript в машинный код, который понимает процессор. Однако, чтобы сделать из JavaScript язык общего назначения, одного движка недостаточно. Так, например, для создания серверной части нужно, чтобы язык умел работать с файлами, сетью и т.п. Для решения этой проблемы разработчики добавили к V8 дополнительные возможности, с помощью своего кода и сторонних библиотек. В итоге у них получился инструмент, который превращает JavaScript в язык общего назначения.

Node.js стала популярна среди разработчиков благодаря возможности создавать серверную и клиентскую часть на одном языке, скорости работы и NPM. В этом материале мы расскажем, как правильно установить Node.js на Windows 10.

Удаление старых версий

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

Проверим систему на наличие версий Node.js. Для этого в cmd (чтобы ее запустить, нажмите Win+R, введите cmd и нажмите Enter) выполняем команду nvm list :

C:\Users\Timeweb>nvm list 
18.9.0 
18.8.0 
16.17.0

Как видим, у нас установлено несколько версий. Удалим их:

Выполняем команду npm cache clean —force .
В «Установка и удаление программ» удаляем Node.js.
Перезагружаем компьютер.
Удаляем следующие каталоги. Некоторые из них могут существовать, а некоторые, наоборот, отсутствовать:
- C:\Program Files (x86)\Nodejs
- C:\Program Files\Nodejs
- C:\Users\\AppData\Roaming\npm
- C:\Users\\AppData\Roaming\npm-cache
- C:\Users\\.npmrc
- C:\Users\\AppData\Local\Temp\npm-*
Возвращаемся в командную строку и выполняем nvm uninstall к каждой версии, полученной с помощью nvm list :

C:\Users\Timeweb>nvm uninstall 18.9.0
Uninstalling node v18.9.0. done

C:\Users\Timeweb>nvm uninstall 18.8.0
Uninstalling node v18.9.0. done

C:\Users\Timeweb>nvm uninstall 16.17.0
Uninstalling node v18.9.0. done

Дополнительно проверим, что версии удалены:

C:\Users\Timeweb>nvm list
No installations recognized.

C:\Users\Timeweb>where node
ИНФОРМАЦИЯ: не удается найти файлы по заданным шаблонам.

C:\Users\Timeweb>where npm
ИНФОРМАЦИЯ: не удается найти файлы по заданным шаблонам.

Как установить Node.js на Windows 10

С помощью nvm-windows

Node Version Manager или сокращенно NVM — это диспетчер версий Node.js. Возможно, во время работы вам придется использовать различные версии Node и переключаться между ними. Версии часто меняются, поэтому при работе рекомендуется использовать диспетчер версий.

NVM — самый распространенный диспетчер версий, но, к сожалению, в Windows он не доступен, и вместо него используется адаптированный вариант nvm-windows.

Зайдите в репозиторий nvm-windows на github.
Загрузите установщик nvm-setup.exe последней версии диспетчера.
После загрузки осуществите установку.
По окончании работы установщика откройте PowerShell от имени администратора и проверьте работоспособность NVM:

PS C:\Windows\system32 > nvm list
No installations recognized.

Теперь нужно выбрать версию Node.js, которую вы будете устанавливать на свой компьютер. Команда nvm list available покажет частичный список доступных для загрузки версий:

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

Установим последний LTS. Возьмем номер версии из результата nvm list available и установим его с помощью nvm install :

PS C:\Windows\system32> nvm install 16.17.0
Downloading node.js version 16.17.0 (64-bit). 
Extracting. 
Complete
Creating C:\Users\Timeweb\AppData\Roaming\nvm\temp

Downloading npm version 8.15.0… Complete
Installing npm v8.15.0…

Installation complete. If you want to use this version, type

nvm use 16.17.0

Установка завершена. В ряде случаев при установке nvm-windows может возникнуть проблема: nvm не загрузит диспетчер пакетов NPM. В этом случае рекомендуем воспользоваться следующим способом установки.

Как установить node.js с помощью официального установщика

Зайдите на официальный сайт nodejs.org в раздел «Загрузка».
Выберите и загрузите нужную версию.
По завершению загрузки откройте файл, после чего начнется установка.
Следуйте инструкциям установщика.

Установка node.js в WSL2

Если вы хотите использовать Node.js вместе с Docker, планируете работать с командной строке Bash или просто любите Linux, то имеет смысл задуматься об установке среды выполнения в WSL2.

WSL (Windows Subsystem for Linux) — это программная прослойка для запуска приложений, созданных под Linux-системы, на ОС Windows. Возможно, вам уже приходилось работать в WSL с приложениями, у которых нет Windows-версий. Ранее мы уже рассматривали установку Node.js на Ubuntu 20.04. Поэтому в этом разделе будет размещена инструкция по установке WSL 2 — об установке Node.js на Ubuntu читайте в статье « Как установить Node.js в Ubuntu 20.04» .

Алгоритм установки WSL2 в Windows 10 зависит от версии операционной системы. Чтобы её узнать, нажмите Win+R и введите winver . После этого откроется такое окно:

Алгоритм для версий старше 2004

В PowerShell от имени администратора выполняем следующие команды:

wsl --install 
wsl --set-version Ubuntu 2

Для проверки результата воспользуемся командой wsl.exe -l -v :

PS C:\WINDOWS\system32> wsl.exe -l -v 
NAME STATE VERSION
* Ubuntu Stopped 2

Алгоритм для версий младше 2004 (как минимум потребуется ОС версии 1903)

В PowerShell (от имени администратора) активируем подсистему Windows для Linux.

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart

Затем активируем функцию виртуальной машины:

dism.exe /online /enable-feature /featurename: VirtualMachinePlatform /all /norestart

После выполнения этих действий нужно перезагрузить компьютер.

Читать:

Как создать apple id на макбуке

Когда компьютера запустится, скачиваем и устанавливаем пакет обновлений ядра Linux. Загрузить его можно по здесь .

В PowerShell выберем 2 версию WSL в качестве основной:

wsl --set-default-version 2

Теперь скачаем какую-нибудь операционную систему на Linux. Сделать это можно прямо магазине приложений Microsoft Store:

По окончании установки вы сможете зайти в консоль установленной системы через меню поиска:

Заключение

Node.js — это популярная среда разработки, которая используется множеством крупных компаний: PayPal, Yahoo, Ebay, General Electric, Microsoft и Uber. В рамках этого материала мы рассмотрели способы как установить Node.js на Windows 10.

Начало работы с Next.js в Windows

Это руководство поможет установить и настроить веб-платформу Next.js в среде Windows.

Next.js — это платформа для создания визуализируемых сервером приложений JavaScript на основе React.js, Node.js, Webpack и Babel.js. По сути, это шаблон проекта для React, в котором особое внимание уделяется рекомендациям, позволяющим создавать «универсальные» веб-приложения простым и согласованным способом практически без настройки. Эти «универсальные» визуализируемые сервером веб-приложения иногда называют изоморфными. Это означает, что для клиента и сервера используется общий код.

Дополнительные сведения о React и других платформах JavaScript на основе React см. в статье Общие сведения о React.

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

Для работы с этим руководством нужно настроить среду разработки Node.js. Для этого:

Установите последнюю версию Windows 10 (версия 1903+, сборка 18362+) или Windows 11.
Установите подсистему Windows для Linux (WSL), включая дистрибутив Linux (например, Ubuntu), и убедитесь, что она работает в режиме WSL 2. что можно проверить, открыв PowerShell и выполнив команду wsl -l -v ;
Установите Node.js в WSL 2, включая диспетчер версий, диспетчер пакетов, Visual Studio Code и расширение для удаленной разработки.

Рекомендуем при работе с приложениями Node.js использовать подсистему Windows для Linux для повышения производительности, обеспечения совместимости системных вызовов и контроля четности для серверов Linux и контейнеров Docker.

При установке дистрибутива Linux в WSL будет создан каталог \\wsl\Ubuntu-20.04 для хранения файлов (замените Ubuntu-20.04 дистрибутивом Linux, который вы используете). Чтобы открыть этот каталог в проводнике Windows, откройте командную строку WSL, выберите корневой каталог с помощью команды cd ~ , а затем введите команду explorer.exe . . Не устанавливайте Node.js и не настраивайте хранение файлов, с которыми вы будете работать, на подключенном диске C ( /mnt/c/Users/yourname$ ). Это существенно замедлит установку и сборку.

Установка Next.js

Чтобы установить Next.js, включая установку next, react и react-dom, сделайте следующее:

WSL-Remote Extension

Откройте командную строку WSL (например, в Ubuntu).
Создайте новую папку проекта mkdir NextProjects и войдите в этот каталог: cd NextProjects .
Установите Next.js и создайте проект (заменив my-next-app любым другим именем приложения): npx create-next-app my-next-app .
После установки пакета замените каталоги на папку нового приложения cd my-next-app , а затем используйте code . , чтобы открыть проект Next.js в VS Code. Это позволит просмотреть инфраструктуру Next.js, созданную для приложения. Обратите внимание на то, что экземпляр VS Code открыла приложение в среде WSL-Remote (как указано на зеленой вкладке в левом нижнем углу окна VS Code). Это означает, что хотя вы используете VS Code для редактирования в ОС Windows, приложение по-прежнему работает в ОС Linux.
После установки Next.js следует запомнить 3 команды:
- npm run dev для запуска экземпляра разработки с горячей перегрузкой, просмотра файлов и повторного выполнения задач;
- npm run build для компиляции проекта;
- npm start для запуска приложения в режиме рабочей среды.

Откройте терминал WSL, интегрированный в VS Code (Вид > Терминал). Убедитесь, что путь терминала указывает на каталог проекта (т. е. ~/NextProjects/my-next-app$ ). Затем попробуйте запустить экземпляр разработки нового приложения Next.js с помощью npm run dev

Локальный сервер разработки будет запущен, и после того как создание страниц проекта будет завершено, терминал отобразит сообщение «compiled successfully — ready on http://localhost:3000 » (Компиляция выполнена, приложение доступно по адресу http://localhost:3000). Выберите эту ссылку на localhost, чтобы открыть новое приложение Next.js в веб-браузере. Your Next.js app running in localhost:3000

Your Next.js app running in localhost:3000

Откройте файл pages/index.js в редакторе VS Code. Найдите заголовок страницы

Welcome to Next.js!

и измените его на

This is my new Next.js app!

. Если в веб-браузере по-прежнему открыт адрес localhost:3000, сохраните изменения и обратите внимание на то, что функция горячей перезагрузки автоматически выполняет компиляцию и отражает изменения в браузере.

Давайте посмотрим, как Next.js обрабатывает ошибки. Удалите закрывающий тег

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

This is my new Next.js app! . Сохраните это изменение и обратите внимание на то, что в браузере и терминале появилось сообщение об ошибке компиляции, в котором сказано, что ожидается закрывающий тег для

. Замените закрывающий тег

, сохраните проект, и страница будет перезагружена.

Вы можете использовать отладчик VS Code в приложении Next.js, нажав клавишу F5 или выбрав в строке меню Вид > Отладчик (Ctrl+Shift+D) и Вид > Консоль отладки (Ctrl+Shift+Y) в строке меню. Если выбрать значок шестеренки в окне «Отладка», будет создан файл конфигурации запуска ( launch.json ), в котором будут сохранены сведения о конфигурации отладки. Дополнительные сведения см. в разделе об отладке в VS Code.

VS Code debug window and launch.json config icon

Дополнительные сведения о Next.js доступны в документации по Next.js.

Как запустить код в VS Code?

Взялся изучать JS , установил VS Code . Написал код, однако запустить его не могу. Нажимаю отладка, запуск без отладки, и выдается ошибка. Вопрос: как запустить код в VS Code ?

javascript
visual-studio-code

Отслеживать
3,778 2 2 золотых знака 15 15 серебряных знаков 35 35 бронзовых знаков
задан 10 июл 2019 в 14:28
PythonLearner4823 PythonLearner4823
101 1 1 золотой знак 2 2 серебряных знака 9 9 бронзовых знаков
Ошибка какая.
10 июл 2019 в 15:00

@Dmitry Что то вроде этого [Running] node «c:\Users\Admin\Desktop\java.js» «node» �� �� ७�� 譥� ��, �ᯮ��塞�� ணࠬ�� 䠩��.

10 июл 2019 в 15:02

если не париться, то рядом положить файлик html и в нем подключить скрипт. запускаете html в браузере и скрипт работает. Или вы кроме скрипта js еще что-то юзаете?

26 сен 2019 в 9:48
можно ещё поставить расширение marketplace.visualstudio.com/… но это так для не сложных вычислений
4 дек 2019 в 9:01

4 ответа 4

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

В вопросе не указана ОС. Если Windows, то:

Установить Node.js
Установить расширение Code Runner для VS Code
Перезапустить VS Code
В VS Code в правом верхнем углу нажать запуск (Run Code) или Ctrl + Alt + N

В большинстве случаев никакие конфигурационные файлы править не нужно.

Также обратите внимание, что привычное для руководств alert(«Hello World»); работать не будет, попробуйте console.log(«Hello World»);

Отслеживать
ответ дан 4 дек 2019 в 8:54
Pavel Kudryavtcev Pavel Kudryavtcev
51 1 1 серебряный знак 3 3 бронзовых знака

Установить Node.js.
Создать файл file.js
Открыть терминал Ctrl + ~
Запустить команду node file.js .

P.S. По-умолчанию команда ищет файл от корня папки (workspace), которая открыта в vscode.

Отслеживать
ответ дан 28 окт 2019 в 13:09
1,811 1 1 золотой знак 9 9 серебряных знаков 29 29 бронзовых знаков

Ну тут есть несколько способов.

1) Скачиваете расширение Debugger for Chrome — должен появиться файл launch.json. Или он вместе с vs устанавливается, уже не помню. но он будет 100%.

введите сюда описание изображения

Указываете url как на картинке(путь к файлу, который вы собираетесь запустить). Создаёте базовый html и вставляете туда скрипт.

2) Способ похож на предыдущий, но немного лучше: надо скачать node js. Установка в несколько пунктов(загуглите). Запустить localhost. Тут уже никаких путей к файлу указывать не надо.