0

У меня есть несколько сверстанных страниц, и мне нужно, чтобы по команде npm start страницы выводились в localhost:8080. Также нужно, чтобы все страницы рендерились в js, и страницы должны выводиться в соответствии с алиасом. Как можно выполнить эту задачу? Возможно вопрос глупый, но конкретного ответа я не нашел

2 ответа 2

1

Закинуть в папку с html проектом index.js с содержимим (примитивный серв.):

const http = require('http');
const url = require('url');
const fs = require('fs');

const setMime = {
    css: 'text/css',
    js: 'application/javascript',
    html: 'text/html',
    png: 'image/png',
    webp: 'image/webp',
    ttf: 'font/ttf',
    woff2: 'font/woff2',
    woff: 'font/woff',
    eot: 'font/eot',
    ico: 'image/x-icon',
    wav: 'audio/x-wav',
    ogg: 'audio/ogg',
    mp3: 'audio/mpeg',
    svg: 'image/svg+xml',
}

const define = function (req, res, postData) {
    const urlParsed = url.parse(req.url, true);
    let path = urlParsed.pathname;
    prePath = __dirname;

    if(path == '/'){
        path = '/index.html'
    }

    fs.stat(prePath + path, function (err, stat) {
        if (err == null && stat.isFile()) {

            let type = path.split('.').pop(),
            mime = 'text/plain',setHead = {}
            if(typeof setMime[type] != 'undefined'){
                mime =  setMime[type]
                setHead['Content-Type'] = mime
                if(type != 'html'){
                    //setHead['cache-control'] = 'max-age=5184000'// кеш
                }
            }
            res.writeHead(200, setHead);
            let readStream = fs.createReadStream(prePath + path);
            readStream.pipe(res);
            return;

        } else if (err == null && stat.isDirectory()) {
            console.log('Some other error: ', err);
            res.writeHead(404, {'Content-Type': 'text/plain'});
            res.end("Not found!");
            return;
        } else {
            console.log('Some other error: ', err.code);
            res.writeHead(404, {'Content-Type': 'text/plain'});
            res.end("Not found");
            return;
        }
    });
};

let server = new http.Server(function (req, res) {
    var jsonString = '';
    res.setHeader('Content-Type', 'text/html');
    req.on('data', (data) => {
        jsonString += data;
    });
    req.on('end', () => {
        define(req, res, jsonString);
    });
});
server.listen(8080,()=>{
    require('child_process').exec('start http://localhost:8080');
});

И вызвать его в консоли "C:\Users\Desktop\MainProjectName>node index.js"

Или для удобства сделать ярлык, и в его свойствах в самом начале изменить путь. Добавив в начало путь exe-шника ноды через пробел "C:\Program Files\nodejs\node.exe" "C:\Users\Desktop\MainProjectName\index.js"

0

Вам нужно реализовать сервер на node.js который будет отдавать статику (html) или рендерить страницу средсвами js (SSR), начните с изучения этой статьи - одно из распространенных решений на npde.js

для запуска через npm start - нужно в файле package.json добавить эту команду

PS. также можно реализовать фронтовую часть средствами React.js vue Ember.js ....

2
  • а как можно это реализовать на vue? Было бы отлично увидеть пример
    – righty_dev
    Commented 25 мар. 2021 в 7:52
  • Вот большое кол-во примеров vuejsexamples.com
    – Dmitry
    Commented 25 мар. 2021 в 16:42

Ваш ответ

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.