Давайте узнаем, как разместить локальный сервер с помощью JavaScript.
Прежде чем мы начнем, необходимо обратить внимание на несколько важных моментов:
Что такое Node.js?
Node.js — это серверная среда выполнения JavaScript с открытым исходным кодом, которая позволяет запускать код JavaScript вне веб-браузера. Он использует движок JavaScript Chrome V8 для выполнения кода JavaScript на сервере, обеспечивая управляемую событиями неблокирующую модель ввода-вывода (ввода/вывода), которая делает его эффективным и масштабируемым для создания сетевых приложений.
Установка Node JS на вашем компьютере
Пожалуйста, посетите веб-сайт Node JS, чтобы загрузить последнюю версию (версию LTS)
После установки вы можете проверить, была ли установка успешной или нет, используя следующую команду в CMD:
node --version
Что такое NPM?
Node Package Manager — это менеджер пакетов для Node.js, который позволяет разработчикам легко управлять повторно используемым кодом JavaScript и делиться им. С помощью npm разработчики могут устанавливать, обновлять и удалять пакеты или библиотеки, а также управлять их зависимостями.
Вместе с установкой узла устанавливается и npm. Чтобы проверить, была ли установка успешной или нет, используйте следующую команду в CMD:
npm --version
Теперь давайте начнем с настройки проекта.
Шаг 1:
Откройте код Visual Studio и откройте новый терминал.
Шаг 2:
Теперь выполните приведенную ниже команду, чтобы инициализировать проект Node.js с помощью терминала. Команда -y используется для настройки вашего проекта с использованием конфигурации по умолчанию.
npm init -y
Эта команда автоматически создает файл package.json с некоторыми значениями по умолчанию в формате JSON.
Ниже вы увидите такой файл:
{
"name": "tutorial",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Шаг 3.
Теперь давайте создадим файл сценария, назвав его index.js. Здесь мы настроим локальный сервер вручную.
const httpInstance = require('http');
const portNumber = 8080;
// Create a server instance
const httpServer = httpInstance.createServer((req, res) => {
// Write a response to the client
res.write('Response from server');
res.statusCode = 200;
// End the response
res.end();
});
// Setup the server to listen on port 8080
httpServer.listen(portNumber, () => {
console.log('Server is listening on port ' + portNumber);
});
Шаг 4:
Теперь запустите следующую команду в терминале:
node index.js
Когда вы запускаете вышеуказанную команду, она выполняет файл JavaScript index.js, используя среду выполнения Node.js.
Шаг 5.
После запуска команды, если вы проверите браузер, используя URL-адрес: http://localhost:8080/, он будет выглядеть следующим образом:
Теперь добавим HTML-шаблоны, как показано ниже:
Далее вы также можете создавать маршруты API. Давайте посмотрим ниже:
const httpInstance = require('http');
const httpStatusInstance = require('http-status-codes');
const fsInstance = require('fs');
const portNumber = 8080;
// Create a server instance
const httpServer = httpInstance.createServer((req, res) => {
if (req.url === '/page1') {
// Write an html response to the client
res.writeHead(httpStatusInstance.StatusCodes.OK, {
"Content-Type": "text/html"
});
readFile(redirectToHtml(`pages/page1`), res);
} else if (req.url === '/page2') {
// Write an html response to the client
res.writeHead(httpStatusInstance.StatusCodes.OK, {
"Content-Type": "text/html"
});
readFile(redirectToHtml(`pages/page2`), res);
} else {
// Write an html response to the client
res.writeHead(httpStatusInstance.StatusCodes.OK, {
"Content-Type": "text/html"
});
readFile(redirectToHtml(`index`), res);
}
});
// Concat the url with `html` extension
const redirectToHtml = (url) => {
return `${url}.html`;
};
// Read file
const readFile = (file_path, res) => {
if (fsInstance.existsSync(file_path)) {
fsInstance.readFile(file_path, (error, data) => {
if (error) {
console.log(error);
handleError(res);
return;
}
res.write(data);
res.end();
});
} else {
handleError(res);
}
};
const handleError = res => {
res.writeHead(httpStatusInstance.StatusCodes.NOT_FOUND, {
"Content-Type": "text/html"
});
res.write(`<h1>HTML file not found!</h1>`);
res.end();
};
// Setup the server to listen on port 8080
httpServer.listen(portNumber, () => {
console.log(`Server is listening on port ${portNumber}`);
});
В браузере это выглядит так:
Вы должны внести изменения в index.html, добавив новый скрипт для обработки события нажатия кнопки.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <script src='action.js'></script> -->
</head>
<body>
<b>Please select a router URL from - (1)
<button style="cursor: pointer" id="page1">Page 1</button>
or (2)
<button style="cursor: pointer" id="page2">Page 2</button></b>
</body>
<script type="text/javascript">
document.getElementById('page1').addEventListener('click', function () {
console.log('page1 clicked');
window.open('/page1', '_self')
})
document.getElementById('page2').addEventListener('click', function () {
console.log('page2 clicked');
window.open('/page2', '_self')
})
</script>
</html>
Давайте проверим это в действии:
Что такое Nodemon?
Возможно, вы сталкивались с ручным перезапуском терминала при изменении кода. Итак, чтобы избежать подобных проблем, вы можете использовать Nodemon.
Nodemon — это инструмент, который помогает в разработке приложений Node.js, автоматически перезапуская сервер всякий раз, когда в исходный код вносятся изменения. Это особенно полезно в процессе разработки, так как устраняет необходимость вручную перезапускать сервер после внесения изменений.
Как установить Nodemon?
Вы можете установить Nodemon на свой компьютер глобально или локально в конкретном проекте в зависимости от требований проекта.
Вы можете использовать следующие команды в терминале:
// Globally npm install -g nodemon // Locally npm install nodemon --save-dev
Теперь вместо node index.js можно начать использовать команду nodemon index.js.
Что такое package.json?
Возможно, вы видели файл с именем package.json при инициализации проекта Node.js с помощью команды npm init -y.
Этот файл используется в проектах Node.js для описания проекта, управления зависимостями пакетов, указания различных параметров конфигурации, и вы можете добавить внутрь все команды сценария.
{
"name": "tutorial",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"http-status-codes": "^2.2.0"
}
}
Что такое package-lock.json?
Этот файл создается вместе с файлом package.json. Он служит файлом блокировки, обеспечивающим детерминированное разрешение зависимостей и согласованную установку пакетов в разных средах. Этот файл включает не только прямые зависимости, но и все транзитивные зависимости (зависимости внутри зависимостей), требуемые проектом.
Что такое node_modules?
Следуя приведенному выше исходному коду, вы, возможно, видели, что новая папка с именем node_modules автоматически создается в каталоге при установке зависимостей с помощью команды NPM.
Когда вы добавляете зависимость пакета в свой проект, используя npm install <package name> . npm загружает пакет из реестра npm и помещает его в каталог node_modules. Каталог node_modules действует как локальный репозиторий для этих пакетов. Вы можете вызвать эти библиотеки, используя ключевые слова require или import в файле скрипта.
Вы увидите список пакетов, которые вы использовали в приведенном выше исходном коде. Вы сможете увидеть добавленную библиотеку в зависимостях файла package.json.
Исходный код находится здесь:
Выводы:
В этой статье мы узнали о том, как настроить локальный сервер для проекта node.js, не используя среду Express, а используя ванильный JavaScript. Позже я планирую написать статью о том, как настроить локальный сервер с помощью Express framework.
Я рад, что мы дошли до конца этой статьи. Надеюсь, вам понравилось, если вы найдете эту статью полезной, пожалуйста, хлопните в ладоши и не стесняйтесь поделиться статьей.
