Как запустить сайт на node js?

Question

[mr jeery]

Тренируюсь на вакансию frontend разработчика, сделал сайт. У меня html,js,css код, который запускаю просто двойным щелчком через бразуер. Около 20-файлов + 200-300 изображений.
Хочу запустить это все теперь на сервере, затем тунелировать через https://ngrok.com/ для теста загрузки и дальнейшей оптимизации.

Не думал, что будет настолько геморно с серверной частью, но это ад какой-то.
Установил node.js по какому-то гайду, но возникла проблема с подгрузкой css,js,jpeg через статику. Ругается на неверный путь, кое как загрузил css стиль, но jpeg не стал загружать, потом стал, потом снова перестал. .Психанул - удалил.

Поставил node express,

install express-generator -g
...
DEBUG=myapp:* npm start

Создана шаблон приложения вроде бы, который запускается со словами приветствия "Welcome to Express". НО ГДЕ эти html файлы c кодом типа <h1> Welcome to Express </h1>?
my app
--bin
--node_modules
--public
--routes
--views
app.js

Можете смеяться, тут даже нужно смеяться. Но мне плакать хочется. На ютубе уроки аля "запуск сервера на node.js" заканчиваются тем, что мы в прямо в файле server.js напишем и html, css, js код и порадуемся.
А как запустить нормальный проект с кучей файлов и папок ?

Comments

[Сергей delphinpro]

Один вопрос только: зачем фронтендеру бэкэнд?
Если просто для запуска сервера — возьмите готовые сборки на php: OpenServer, Xampp, Denver. Для теста загрузки используйте инструмент «Network Throttling» в средствах разработчика в браузере.



Зачем вам сейчас углубляться в написание собственного бэкэнда...

[mr jeery]

Сергей, Наверное что-то такое я и хотел услышать. Думал, все будет куда проще ) За Network Throttling отдельное спасибо!

[Станислав]

mr jeery, с нодой все просто если есть наброски =) с ноля делать что то всегда сложно. А так вам даже и PHP не нужно, просто перелинковку страниц сделать и всё

[Олег Петров]

Сергей delphinpro, А как Network Throttling включить? В опциях Chrome Такого нет

[Сергей delphinpro]

Олег Петров,
F12 чтобы открыть консоль dev-tools
Потом F1 чтобы открыть настройки dev-tools
Скрин оттуда

Для использования - F12 -> вкладка Network -> Выпадающий список Online

Answer 1

[mrxakerrus]

Создай папку какую-нибудь, зайди в нее через консоль и установи в нем через npm модуль node-static (npm install node-static), затем создай в папке(которую только что создал), папку с названием public туда скидываешь все свои html+css+js все что на клиентской стороне (это статика), затем шаг назад в директорию первой созданной папки создаешь index.js файл и в нем пишешь var static = require('node-static');

//
// Create a node-static server instance to serve the './public' folder
//
var file = new static.Server('./public');

require('http').createServer(function (request, response) {
request.addListener('end', function () {
//
// Serve files!
//
file.serve(request, response);
}).resume();
}).listen(8080);

Сохраняешь и в консоли прописываешь node index.js, открываешь браузер и пишешь 127.0.0.1:8080 и открывается твой сайт (если ты свой html файл назвал index.html, если нет, то добавляешь /и пишешь название файла html), открываешь консоль, смотришь на ошибки, понимаешь что что-то не загружается (а может и все сразу заработает), если не работает что-то и в консоли ошибки, то скорее всего просто у тебя в файлах статики указаны абсолютные пути к файлам, убираешь эти пути и вместо них прописываешь относительные пути, если пишет что-то другое в консоли, то в интернете много статей уже имеется

Comments

[Jadavin]

Спасибо, помогло.

Answer 2

[gill-sama]

Эти html файлы с кодом типа <h1> Welcome to Express </h1>
лежат в папке views. должны лежать.

Comments

[mr jeery]

Там лежат три файла c форматом .pug
Это веря гуглу, препроцессор html. Мне теперь на него код переписывать ? ))

[gill-sama]

mr jeery, если хотите использовать pug, то придется переписать. есть возможность использовать другие шаблонизаторы, можете поискать подходящий Вам.

[ой всё]

mr jeery, mustache точно на ноде работает

[kirill255]

mr jeery, html2pug.herokuapp.com

Answer 3

[abberati]

$ npm i -g lite-server
$ lite-server

Comments

[mr jeery]

Что это такое ?

[abberati]

mr jeery, это две команды. одна устанавливает пакет lite-server, вторая запускает его. пакет делает как раз то, что нужно