Простое Node.JS приложение на локальной машине
В этой лекции вы узнаете как запустить простое web-приложение (html) при помощи NodeJS-пакета — express.js.
Для этих целей мы будем использовать Sublime, но вы можете использовать любой редактор, который вам удобен.
Шаг 0: создайте новую папку — mweb3waves и откройте ее в Sublime
Шаг 1: создайте новый HTML файл — index.html в папке mweb3waves
Step 2: установите Node.js отсюда
Шаг 3: откройте терминал/командную строку и проверьте версию node.js, а также его менеджера пакетов npm
Шаг 4: создайте файл package.json. Этот файл содержит список всех node.js-пакетов, которые будет использовать наше приложение
Шаг 5: Теперь установим пакет express.js. Откройте терминал и выполните “npm install” в папке mweb3waves
Появилась новая папка — node_modules — она содержит исходники всех зависимостей (пакетов и модулей).
Шаг 6: И так, теперь мы готовы создать наше первое одностраничное web-приложение. Создайте файл server.js. Этот сервер будет делать только одну вещь — отсылать файл index.html браузеру, когда пользователь открывает сайт.
Шаг 7: Запустим сервер node.js командой “node server.js”
Чтобы увидеть наш первый одностраничник откройте http://localhost:5000/.
Наше node.js одностраничное приложение (single page application — SPA) готово!
Простое React.JS приложение
Наш одностраничник получился просто потрясный, но малость скучноватый. Добавим-ка ему интерактивности!
JavaScript (JS) — это язык, превращающий статичный html в динамические страницы с интерактивным интерфейсом. ReactJS это мощнейший JavaScript-фреймворк для построения богатых интерактивностью одностраничных web-приложений.
На предыдущем уроке мы разобрались как собрать серверное приложение с помощью пакетного менеджера npm и файла конфигурации package.json. Та же логика справедлива и для client-side js-кода
Шаг 1: Чтобы коректно собрать компоненты интерфейса, нужно добавить новые пакеты в package.json и затем установить их командой “npm install”
Шаг 2: Опишем UI и логику его сборки
webpack.config.js
.babelrc
Шаг 3: Добавим еще немного логики в приложение.
app.js
main.js
Шаг 4: Соберем js-модули командой “npm run build”.
Вы можете заметить, что появились автоматически сгенерированная папка “dist” с файлом “build.js” — это результат сборки
Шаг 5: Теперь нам надо связать собранный “build.js” с главной HTML-страницей.
Шаг 6: Запустим сервер и откроем http://localhost:5000/, чтобы наконец уже кликнуть заветную кнопочку ОК 🙂
Наше первое веб-приложение на ReactJS+NodeJS готово!
Git, GitHub и Heroku
В этом уроке мы попрактикуемся с must have инструментом любого разработчика — Git.
Git — это распределенная система контроля версий для отслеживания изменений в исходном коде во время разработки. Он предназначен для координации работы программистов, но может использоваться для отслеживания изменений в любом наборе файлов.
Давайте создадим репозиторий для нашего потрясного одностраничника. Мы воспользуемся GitHub — самым популярным сервисом для размещения Git репозиториев.
Шаг 0: Установите git и проверьте его версию
Шаг 1: Создайте новый репозиторий на GitHub.
Шаг 2: Переименуйте папку и клонируйте данный репозиторий.
переместите файлы и папки проекта в корень репозитория
(! — это явно не best practice использования .git для удаленных репозиторией, но освоение git и других инструментов выходит за рамки данного курса)
Шаг 3: Создайте .gitignore-файл в корне проекта.
Шаг 4: Добавьте файл в трекер изменений, сделайте commit и затем push на GitHub.
Репозиторий GitHub готов!
Heroku
Размещаться на локальной машине, конечно, здорово, но, если всё-таки хочется поделиться своим веб-приложением с другими пользователями, то придется его разместить где-нибудь в облаке
Heroku — контейнерная облачная платформа или же “Платформа как сервис” (Platform as a Service — PaaS). Разработчики используют Heroku, чтобы удобно развертывать, управлять и масштабировать web-приложения. Если у вас не более 5 проектов, то его можно использовать бесплатно.
Шаг 1: Зарегистрируйтесь, откройте дашборд (dashboard) и создайте новый проект. Выберите пункт “импортировать с GitHub” ( “import from GitHub”).
Шаг 2: Убедитесь, что выбрана мастер-ветка и нажмите “Deploy branch” (
развернуть приложение из данной ветки). Кликните на кнопке “View” (вид).
Готово!
Waves Keeper
Последняя лекция в данном модуле отвечает на вопрос “Как подключить к нашему приложению Waves Keeper?”.
Waves Keeper это расширение браузера, которое позволяет пользователям управлять своими аккаунтами (учетными записями, учетками) и ключами, а также безопасно и прозрачно взаимодействовать с Waves-сервисами и распределенными приложениями (dApps).
Шаг 0: Следуя инструкции установите Waves Keeper и создайте/импортируйте учетную запись
Шаг 1: Внесите изменения в файл app.js. Мы будем вызывать функцию Auth Waves Keeper’а, когда пользователь нажимает кнопку авторизации.
Затем пересоберите javascript-код:
Запустите приложение и пройдите по ссылке http://localhost:5000/. Откройте “Инструменты разработчика” -> “Консоль”, чтобы увидеть объект, что вернул Waves Keeper
Шаг 2: Добавьте изменения, сделайте commit, затем push на GitHub. Откройте Heroku и кликните “Deploy” из основной (master) ветки. Откройте web-приложение.
Шаг 3: Добавьте домен Heroku в список доверенных ресурсов в настройках приватности (privacy settings) Waves Keeper’a, чтоб предотвратить ошибки типа “API отклонен пользователем” (API rejected by user)
Готово!
Поздравляем!
Это ваш первый challange на этом курсе:
В соответствии с пройденным материалом, создайте одностраничное приложение, залейте его на GitHub, разверните на Heroku и затем поделитесь ссылками на GitHub-репозиторий и рабочее приложение на Heroku.
Также отправьте выводы из консоли браузера (из инструментов разработчика Chrome)
Удачи!
Как написать и запустить вашу первую программу в Node.js
_Автор выбрал Open Internet / Free Speech Fund для получения пожертвования в рамках https://do.co/w4do-cta [Писать для DOnations] программа.
Вступление
Node.js — это популярная среда выполнения с открытым исходным кодом, которая может выполнять JavaScript за пределами браузера с помощью механизма V8 JavaScript, который является тем же механизмом, который используется для запуска JavaScript в браузере Google Chrome. Среда выполнения Node обычно используется для создания инструментов командной строки и веб-серверов.
Изучение Node.js позволит вам написать свой код переднего плана и код вашего внутреннего кода на одном языке. Использование JavaScript во всем стеке помогает сократить время на переключение контекста, а библиотеки легче делить между вашим внутренним сервером и внешними проектами.
Кроме того, благодаря поддержке асинхронного выполнения, Node.js отлично справляется с задачами с интенсивным вводом-выводом, что делает его таким подходящим для Интернета. Приложения реального времени, такие как потоковое видео, или приложения, которые непрерывно отправляют и получают данные, могут работать более эффективно при написании в Node.js.
В этом руководстве вы создадите свою первую программу со средой выполнения Node.js. Вы познакомитесь с некоторыми концепциями, специфичными для Node, и создадите программу, которая поможет пользователям проверять переменные среды в своей системе. Для этого вы узнаете, как выводить строки на консоль, получать данные от пользователя и получать доступ к переменным среды.
Предпосылки
Для завершения этого урока вам понадобится:
Node.js установлен на вашем компьютере разработчика. В этом руководстве используется Node.js версии 10.16.0. Чтобы установить это на macOS или Ubuntu 18.04, выполните действия, описанные в https://www.digitalocean.com/community/tutorials/how-to-install-node-js-and-create-a-local-development-environment-on -macos [Как установить Node.js и создать локальную среду разработки в macOS] или раздел «Установка с использованием PPA» на https://www.digitalocean.com/community/tutorials/how-to-install-node- js-on-ubuntu-18-04 [Как установить Node.js в Ubuntu 18.04].
Базовые знания JavaScript, которые вы можете найти здесь: How To Code in JavaScript
Шаг 1 — Вывод на консоль
Чтобы написать программу «Hello, World!», Откройте текстовый редактор командной строки, такой как + nano + , и создайте новый файл:
В открытом текстовом редакторе введите следующий код:
Объект + console + в Node.js предоставляет простые методы для записи в + stdout + , + stderr + или в любой другой поток Node.js, который в большинстве случаев является командной строкой. Метод + log печатает в поток` + stdout`, так что вы можете увидеть его в своей консоли.
В контексте Node.js streams — это объекты, которые могут принимать данные, например, поток + stdout + , или объекты, которые могут выводить данные, например, сетевой сокет или файл. В случае потоков + stdout + и + stderr + любые отправленные им данные будут показаны в консоли. Одна из замечательных особенностей потоков заключается в том, что они легко перенаправляются, и в этом случае вы можете, например, перенаправить вывод вашей программы в файл.
Сохраните и выйдите из + nano + , нажав + CTRL + X + , когда будет предложено сохранить файл, нажмите + Y + . Теперь ваша программа готова к запуску.
Шаг 2 — Запуск программы
Чтобы запустить эту программу, используйте команду + node + следующим образом:
Программа + hello.js + выполнит и отобразит следующий вывод:
Интерпретатор Node.js прочитал файл и выполнил + console.log (» Hello World «); + , вызвав метод + log + глобального объекта + console + . Строка » Hello World » была передана в качестве аргумента функции + log + .
Хотя кавычки необходимы в коде, чтобы указать, что текст является строкой, они не выводятся на экран.
Подтвердив, что программа работает, давайте сделаем ее более интерактивной.
Шаг 3 — Получение пользовательского ввода через аргументы командной строки
Каждый раз, когда вы запускаете программу Node.js «Hello, World!», Она выдает один и тот же результат. Чтобы сделать программу более динамичной, давайте получим ввод от пользователя и отобразим ее на экране.
Инструменты командной строки часто принимают различные аргументы, которые изменяют их поведение. Например, запуск + node + с аргументом + — version + выводит установленную версию вместо запуска интерпретатора. На этом шаге вы заставите свой код принимать ввод пользователя через аргументы командной строки.
Node.js tutorial in Visual Studio Code
Node.js is a platform for building fast and scalable server applications using JavaScript. Node.js is the runtime and npm is the Package Manager for Node.js modules.
Visual Studio Code has support for the JavaScript and TypeScript languages out-of-the-box as well as Node.js debugging. However, to run a Node.js application, you will need to install the Node.js runtime on your machine.
To get started in this walkthrough, install Node.js for your platform. The Node Package Manager is included in the Node.js distribution. You’ll need to open a new terminal (command prompt) for the node and npm command-line tools to be on your PATH.
To test that you have Node.js installed correctly on your computer, open a new terminal and type node —version and you should see the current Node.js version installed.
Linux: There are specific Node.js packages available for the various flavors of Linux. See Installing Node.js via package manager to find the Node.js package and installation instructions tailored to your version of Linux.
Windows Subsystem for Linux: If you are on Windows, WSL is a great way to do Node.js development. You can run Linux distributions on Windows and install Node.js into the Linux environment. When coupled with the WSL extension, you get full VS Code editing and debugging support while running in the context of WSL. To learn more, go to Developing in WSL or try the Working in WSL tutorial.
Hello World
Let’s get started by creating the simplest Node.js application, "Hello World".
Create an empty folder called "hello", navigate into and open VS Code:
Tip: You can open files or folders directly from the command line. The period ‘.’ refers to the current folder, therefore VS Code will start and open the Hello folder.
From the File Explorer toolbar, press the New File button:
and name the file app.js :
By using the .js file extension, VS Code interprets this file as JavaScript and will evaluate the contents with the JavaScript language service. Refer to the VS Code JavaScript language topic to learn more about JavaScript support.
Create a simple string variable in app.js and send the contents of the string to the console:
Note that when you typed console. IntelliSense on the console object was automatically presented to you.
Also notice that VS Code knows that msg is a string based on the initialization to ‘Hello World’ . If you type msg. you’ll see IntelliSense showing all of the string functions available on msg .
After experimenting with IntelliSense, revert any extra changes from the source code example above and save the file ( ⌘S (Windows, Linux Ctrl+S ) ).
Running Hello World
It’s simple to run app.js with Node.js. From a terminal, just type:
You should see "Hello World" output to the terminal and then Node.js returns.
Integrated Terminal
VS Code has an integrated terminal which you can use to run shell commands. You can run Node.js directly from there and avoid switching out of VS Code while running command-line tools.
View > Terminal ( ⌃` (Windows, Linux Ctrl+` ) with the backtick character) will open the integrated terminal and you can run node app.js there:
For this walkthrough, you can use either an external terminal or the VS Code integrated terminal for running the command-line tools.
Debugging Hello World
As mentioned in the introduction, VS Code ships with a debugger for Node.js applications. Let’s try debugging our simple Hello World application.
To set a breakpoint in app.js , put the editor cursor on the first line and press F9 or click in the editor left gutter next to the line numbers. A red circle will appear in the gutter.
To start debugging, select the Run and Debug view in the Activity Bar:
You can now click Debug toolbar green arrow or press F5 to launch and debug "Hello World". Your breakpoint will be hit and you can view and step through the simple application. Notice that VS Code displays a different colored Status Bar to indicate it is in Debug mode and the DEBUG CONSOLE is displayed.
Now that you’ve seen VS Code in action with "Hello World", the next section shows using VS Code with a full-stack Node.js web app.
Note: We’re done with the "Hello World" example so navigate out of that folder before you create an Express app. You can delete the "Hello" folder if you want as it is not required for the rest of the walkthrough.
An Express application
Express is a very popular application framework for building and running Node.js applications. You can scaffold (create) a new Express application using the Express Generator tool. The Express Generator is shipped as an npm module and installed by using the npm command-line tool npm .
Tip: To test that you’ve got npm correctly installed on your computer, type npm —help from a terminal and you should see the usage documentation.
Install the Express Generator by running the following from a terminal:
The -g switch installs the Express Generator globally on your machine so you can run it from anywhere.
We can now scaffold a new Express application called myExpressApp by running:
This creates a new folder called myExpressApp with the contents of your application. The —view pug parameters tell the generator to use the pug template engine.
To install all of the application’s dependencies (again shipped as npm modules), go to the new folder and execute npm install :
At this point, we should test that our application runs. The generated Express application has a package.json file which includes a start script to run node ./bin/www . This will start the Node.js application running.
From a terminal in the Express application folder, run:
The Node.js web server will start and you can browse to http://localhost:3000 to see the running application.
Great code editing
Close the browser and from a terminal in the myExpressApp folder, stop the Node.js server by pressing CTRL+C .
Now launch VS Code:
Note: If you’ve been using the VS Code integrated terminal to install the Express generator and scaffold the app, you can open the myExpressApp folder from your running VS Code instance with the File > Open Folder command.
The Node.js and Express documentation does a great job explaining how to build rich applications using the platform and framework. Visual Studio Code will make you more productive in developing these types of applications by providing great code editing and navigation experiences.
Open the file app.js and hover over the Node.js global object __dirname . Notice how VS Code understands that __dirname is a string. Even more interesting, you can get full IntelliSense against the Node.js framework. For example, you can require http and get full IntelliSense against the http class as you type in Visual Studio Code.
VS Code uses TypeScript type declaration (typings) files (for example node.d.ts ) to provide metadata to VS Code about the JavaScript based frameworks you are consuming in your application. Type declaration files are written in TypeScript so they can express the data types of parameters and functions, allowing VS Code to provide a rich IntelliSense experience. Thanks to a feature called Automatic Type Acquisition , you do not have to worry about downloading these type declaration files, VS Code will install them automatically for you.
You can also write code that references modules in other files. For example, in app.js we require the ./routes/index module, which exports an Express.Router class. If you bring up IntelliSense on index , you can see the shape of the Router class.
Debug your Express app
You will need to create a debugger configuration file launch.json for your Express application. Click on Run and Debug in the Activity Bar ( ⇧⌘D (Windows, Linux Ctrl+Shift+D ) ) and then select the create a launch.json file link to create a default launch.json file. Select the Node.js environment by ensuring that the type property in configurations is set to "node" . When the file is first created, VS Code will look in package.json for a start script and will use that value as the program (which in this case is "$
Save the new file and make sure Launch Program is selected in the configuration dropdown at the top of the Run and Debug view. Open app.js and set a breakpoint near the top of the file where the Express app object is created by clicking in the gutter to the left of the line number. Press F5 to start debugging the application. VS Code will start the server in a new terminal and hit the breakpoint we set. From there you can inspect variables, create watches, and step through your code.
Deploy your application
If you’d like to learn how to deploy your web application, check out the Deploying Applications to Azure tutorials where we show how to run your website in Azure.
Next steps
There is much more to explore with Visual Studio Code, please try the following topics:
Руководство по Node.js для новичков
Каждые несколько лет браузер с HTML5 изменяется — это совершенно нормально. Важно выбрать подходящие инструменты.
Иллюстрация: Оля Ежак для Skillbox Media
Чтобы создавать приложения на HTML5, нужно постоянно осваивать новые технологии и инструменты. Браузер с HTML5 — очень изменчивая платформа. Каждые несколько лет всё становится с ног на голову, а набор технологий для создания современного приложения изменяется.
Одно из таких «мастхэв-средств» разработки клиентских приложений — Node.js:
Что такое Node.js и почему он появился
Node.js — это среда выполнения JavaScript-программ, построенная на движке Chrome V8. Раньше на JS можно было делать только интерактивные сайты, так как это специализированный браузерный язык программирования. С программной платформой Node.js появилась возможность создавать «безбраузерные» приложения для компьютера. Это значит, что при необходимости на JavaScript теперь можно делать то же, что на Python и других скриптовых языках программирования общего назначения.
Язык JavaScript создавался в середине девяностых компанией Mozilla как простой скриптовый язык программирования, встраиваемый в код HTML-страниц. Как вспоминает его автор Брендан Эйх, разработчики ставили перед собой цель создать «язык для склеивания» составляющих частей веб-ресурса: изображений, плагинов и Java-апплетов, который был бы удобен для веб-дизайнеров и программистов, не обладающих высокой квалификацией. Он создавался для программирования как на стороне клиента, так и на стороне сервера.
Но, как часто бывает, со временем разработчики начали использовать JavaScript совсем иначе, чем было задумано. Самый неправильно понятый в мире язык программирования в итоге стал самым популярным. К настоящему времени он лидирует в качестве средства для разработки веб-приложений на стороне клиента. Это произошло из-за того, что эволюция веба двинулась в сторону интерактивных веб-приложений, хотя Сеть не была изначально предназначена для этого, как не был предназначен и JavaScript. Пришлось приспособиться.
Как платформа устроена изнутри
Для новой роли понадобился новый инструментарий. Постепенно JavaScript оброс целой инфраструктурой фреймворков, библиотек, компиляторов и протоколов. В том числе появилось несколько платформ исполнения серверных и клиентских приложений. Node.js — самая популярная из них. Эту платформу выпустил американский программист Райан Дал в 2009 году.
Программная платформа Node.js работает на движке V8, который транслирует JavaScript в машинный код. Грубо говоря, сама платформа является приложением C++, которое получает на входе JavaScript-код и выполняет его.
В среде исполнения есть собственный интерфейс на C++ для взаимодействия с устройствами ввода-вывода на компьютере. То есть эта платформа фактически превращает JavaScript из специализированного скриптового языка в язык общего назначения. Это означает, что на Node.js вы можете писать любые компьютерные программы.
Событийно-ориентированный подход
Главная особенность Node.js в том, что вместо традиционной модели параллелизма на основе потоков автор выбрал событийно-ориентированный подход. Это такая парадигма программирования, в которой выполнение программ определяется событиями. Например, это действие пользователя, поступление сетевого пакета, сообщение из другой программы и так далее.
Такой подход сильно упрощает программирование некоторых приложений, особенно при реализации удобного интерфейса ввода-вывода (I/O), как у Node.js. По легенде, идея создания пришла автору, когда он увидел полосу загрузки файлов на Flickr, которая не понимала реального процента загрузки файлов, то есть не имела обратной связи от браузера из-за отсутствия событийной привязки.
С распространением в интернете социальных сетей и других интерактивных сайтов резко выросла востребованность Node.js как платформы для приложений, реагирующих на действия пользователя: чатов, игр, инструментов совместной работы — теперь всё это делают на JavaScript с помощью среды исполнения.
Таким образом, Node.js — это событийно-ориентированный I/O-фреймворк на JavaScript. Технические особенности делают приложения на его основе легковесными и эффективными. Этим и объясняется его огромная популярность.
Разработку языка координирует OpenJS Foundation, который финансируется по программе поддержки свободных проектов Linux Foundation. Это свободный распределённый проект, в создании которого на безвозмездной основе участвуют тысячи разработчиков со всего мира.
Для чего нужен и где используется Node.js
Среда исполнения представляет собой платформу для написания JavaScript-приложений с использованием внешних библиотек.
Благодаря Node.js написанный для браузера код JavaScript получает доступ к глобальным объектам, таким как document и window, наряду с другими API и библиотеками. С помощью Node.js код обращается к жёсткому диску, базам данных и Сети. Это делает возможным написание любых приложений: от утилит командной строки и видеоигр до полноценных веб-серверов.
Чаще всего Node.js используется при написании веб-приложений с интенсивным вводом-выводом. Самый распространённый пример — это веб-серверы. Ещё платформу используют для создания приложений реального времени: чатов, коммуникационных программ и игр. Многие приложения имеют и серверную, и клиентскую части.
Пакетный менеджер NPM
Важной частью Node.js является пакетный менеджер NPM — Node Package Manager, который устанавливается вместе с интерпретатором (см. ниже).
Как установить и запустить Node.js
Последнюю версию Node.js можно скачать с официального сайта nodejs.org. Для большинства пользователей рекомендуется установка версии с долговременной поддержкой (LTS). На данный момент это 18.14.2.
Установленная среда исполнения предоставляет две утилиты командной строки: Node и NPM. Первая запускает софт, созданный на JavaScript.
Пишем первую программу на Node.js
Напишем простую программу на JavaScript, которая выводит в консоль текст:
Сохраним её в файл skillbox.js. Так вот, команда node может выполнить эту программу с JS-кодом:
Команда node выполнила программу skillbox.js — вывела в консоль текст «Skillbox test».
Кроме Node на компьютер устанавливается программа NPM — это система управления пакетами Node, необходимая для установки свободно распространяемых инструментов из Сети. Нам как раз впоследствии понадобятся некоторые из этих инструментов, которые нужно будет скачать после установки NPM. Все программы здесь скачиваются и устанавливаются стандартным путём:
console.log («Skillbox test»);
Получить список доступных пакетов и их краткое описание можно с помощью следующей команды:
Например, нам понадобится программа browser-sync для запуска примеров кода в браузере и автоматического обновления страницы при сохранении изменений в коде. Инструмент устанавливается такой командой (с параметром -g, который означает «глобальную» установку пакета для выполнения из любого каталога):
npm install -g browser-sync
Node.js как конструктор приложений
Платформа Node.js содержит огромное количество полезных модулей, помогающих при работе с файлами и каталогами, взаимодействии по Сети и обработке событий. Для Node.js выпущено более 650 000 пакетов свободного программного обеспечения, поэтому создание многих приложений похоже на сборку из кубиков конструктора.
Кроме Node и NPM нужно ещё установить редактор кода, если его у вас до сих пор нет. Есть несколько удобных редакторов, в том числе Visual Studio Code от Microsoft, Brackets от Adobe и популярный свободный редактор Atom. Все они бесплатные.