Ответы пользователя по тегу Node.js
  • Почему переменная __dirname показывает неправильный путь?

    rockon404
    @rockon404
    Frontend Developer
    target: 'node',
    node: {
      __dirname: false,
    }

    или:
    plugins: [
      new webpack.DefinePlugin({
        $dirname: '__dirname',
      }),
    ]
    Ответ написан
    Комментировать
  • Для чего нужны эти методы?

    rockon404
    @rockon404
    Frontend Developer
    Ответ написан
    Комментировать
  • Express + Handlebars?

    rockon404
    @rockon404
    Frontend Developer
    Вы, конечно, извините, но:
    1. Читайте документацию и смотрите исходники.
    2. Читайте документацию и смотрите исходники.
    3. Читайте документацию и смотрите исходники.

    Раз вам мало знать, что вьюхи лежат по-умолчанию в папке views, лайауты в layouts, а в шаблоны можно передавать данные вторым аргументом метода render, то изучайте исходники и увидите собственными глазами как именно это все работает.
    Ответ написан
    1 комментарий
  • Удаление объекта из массива в NodeJS или неправленый скрипт?

    rockon404
    @rockon404
    Frontend Developer
    const groupedRoutes = Object.values(routes.reduce((map, { path, methods }) => {
      map[path] =  map[path] ?
       { path, methods: [ ...map[path].methods, ...methods ] } :
       { path, methods };
    
      return map;
    },{}));
    Ответ написан
    1 комментарий
  • Как собрать проект при помощи webpack?

    rockon404
    @rockon404
    Frontend Developer
    В первую очередь в директории проекта выполняете:
    npm install
    этой командой вы установите все зависимости проекта. Они перечислены в package.json в свойствах dependencies и devDependencies.
    Затем выполните:
    npm run build:example
    или:
    npm run build:browser
    эти скрипты вы можете найти в package.json в свойстве scripts
    Ответ написан
  • Api запрос из react приложения выполняется только один раз, что делать?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    render() {
      const { res } = this.state;
      const shouldFlimDisplayShown = !!res;
    
      return (
        <div>
          <form onSubmit={this.handleSubmit}>
            <label htmlFor="title">Enter title</label>
            <input id="title" name="title" type="text" />
            <button>Send data!</button>
          </form>
          {shouldFlimDisplayShown && <FilmDisplay filmName={res}/>}
       </div>
      );
    }


    import React from 'react';
    
    class FilmDisplay extends React.Component {
       constructor() {
        super();
    
        this.state = {
          filmData: null
        };
      }
    
      componentDidMount() {
        this.fetchMovie();
      }
    
      componentDidUpdate(prevProps) {
        if (prevProps.filmData !== this.props.filmData) {
          this.fetchMovie();
        }
      }
     
      fetchMovie() {
        const { filmName } = this.props;
        const URL = "http://www.omdbapi.com/?t=" + filmName + "&apikey=6540f2ec&";
    
        fetch(URL).then(res => res.json()).then(json => {
          this.setState({ filmData: json });
        });
      }
    
      render() {
        const { filmData } = this.state;
    
        if (!filmData) return <div>Loading</div>;
      
        return <div>{JSON.stringify(filmData)}</div>;
      }
    }
    
    export default FilmDisplay;
    Ответ написан
    Комментировать
  • Что выбрать для server side rendering react?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    Лучше сразу писать изоморфный проект, так как есть множество ньюансов которые стоит учитывать при разработке таких приложений. На github можно найти готовые боилерплейты. На написание своего может уйти от пары часов до пары дней, в зависимости от требуемого набора инструментов. Так же вы можете посмотреть в сторону таких инструментов как next.js, razzle, after . Но точно не знаю, насколько легко, при необходимости, мигрировать с таких решений.
    Ответ написан
    6 комментариев
  • Адекватный ли конструктор?

    rockon404
    @rockon404
    Frontend Developer
    Не понимаю назначения этой сущности, но это не конструктор. Метод viewer назван неправильно, так как название не говорит ничего о том, что этот метод делает.
    Конструкгор это когда так:
    spoiler
    function SetUserManager(config) {
      this.client = new ClientUser();
      this.clientManager = new ClientManager({
        user: this.client
      });
    
      this.options = {
        name: config.name,
        key: config.key
      };
    
      this.cookies = [];
    
      client.login(options);
      this.viewer();
    }
    
    SetUserMagager.prototype.viewer = function() {
      this.client.on('login', () => {
        this.client.setLogin();
      });
    
      this.client.on('msg', (session) => {
        serveSession(session);
      });
    
      this.clientManager.on('user', (data) => {
        serveNewUser(data);
      });
    }

    или так:
    spoiler
    class SetUserMagager {
      constructor(config) {
        this.client = new ClientUser();
        this.clientManager = new ClientManager({
          user: this.client
        });
    
        this.options = {
          name: config.name,
          key: config.key
        };
    
        this.cookies = [];
    
        client.login(options);
        this.viewer();
      }
      
      viewer() {
        this.client.on('login', () => {
          this.client.setLogin();
        });
    
        this.client.on('msg', (session) => {
        	serveSession(session);
        });
    
        this.clientManager.on('user', (data) => {
          serveNewUser(data);
        });
      }
    }

    Складывается впечатление, что вы везде пытаетесь использовать ООП и плодите сущности там, где они не нужны и где лучше использовать функциональный стиль.

    Насчет ваших обработчиков ничего не скажешь так как не ясно, ни что такое ClientUser и ни что такое ClientUserManager.
    Ответ написан
    2 комментария
  • Как вернуть значени из модуля из асинхроной функции?

    rockon404
    @rockon404
    Frontend Developer
    Если вы хотели вернуть результат из person то так:
    module.exports.person = async () => await sqlQuery();

    Другое дело, что async/await тут и не нужны.
    Их использование было бы оправдано сели бы надо было сделать что-то вроде:
    module.exports.person = async () => [await sqlQuery1(), await sqlQuery2()];

    или:
    module.exports.person = async id => {
      const user = await getUser(id);
      const permissions = await getPermissions(user.role);
     
      return {
        user,
        permissions,
      };
    }

    В вашем случае достаточно:
    module.exports.person = args => sqlQuery(args);
    А использовать уже можно в асинхронных функциях:
    const user = async person(id);
    Ответ написан
    Комментировать
  • Переменная NODE_ENV на продакшене должна быть установлена в 'production' только во время сборки проекта или же и во время его жизни?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    Для того чтобы сделать production сборку, запускайте webpack с ключoм -p:
    webpack -p
    либо устанавливайте переменную process.env.NODE_ENV и используйте UglifyJsPlugin:
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
    }),
    new webpack.optimize.UglifyJsPlugin({
           // options 
        }),

    при запуске с ключом -p, в кофиг добавляются именно эти строки.

    Еще вариант:
    plugins: [
      new webpack.EnvironmentPlugin(['NODE_ENV']),
      new webpack.optimize.UglifyJsPlugin({
          // options 
        }),
    ],


    Строка:
    new webpack.EnvironmentPlugin(['NODE_ENV']),
    аналогична:
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
    }),


    А c NODE_ENV вы production сборку не сделаете, надо использовать именно process.env.NODE_ENV.
    Ответ написан
    1 комментарий
  • Почему у меня выводит в запросе html страницу?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    Потому что у вас первый роут всегда срабатывает:
    .get('*', async ctx => {
      await ctx.render('index');
    })


    Поменяйте местами:
    .get('/api/logout', async ctx => {
      console.log('router');
      ctx.logout();
      console.log(ctx.state.user);
    })
    .get('*', async ctx => {
      await ctx.render('index');
    })
    Ответ написан
    Комментировать
  • Как передать текущего user через socket io react?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    componentDidMount() {
      this.initSocket();
    }
    
    initSocket() {
    
      // set user
      socket.on('init', data => {
        this.setState({
          player: data.nickname,
        }, () => {
          alert(this.state.player);
        });
      });
    }


    1. Используйте componentDidMount, вместо componentWillMount.
    2. Никогда не меняйте state напрямую, для этого есть асинхронный метод setState. Иначе ваш компонент не обновится.
    3. Эту логику лучше вынести из компонента в redux-saga или redux-thunk.
    4. В самом компоненте пока не получили пользователя показывайте лоадер:
    render() {
      const { user } = this.state;
      
      if (!user) return <Loader />  
      
      return (
       ...
      );
    }
    Ответ написан
    1 комментарий
  • Как добавить в массив по двум выборкам for?

    rockon404
    @rockon404
    Frontend Developer
    Ответ прост:
    test.map((question, i) => question.answers = answers[i]);

    или:
    for(let i = 0; i < test.length; i++) {
      test[i].answers = answers[i];
    }
    Ответ написан
    Комментировать
  • Почему консоль nodejs после результата выводит undefined?

    rockon404
    @rockon404
    Frontend Developer
    Особенность работы консоли. Это значит, что выражение ничего не возвращает.

    Попробуйте ввести такие данные:
    function foo(x) { return x + 1 }
    foo(2)

    Результат:
    function foo(x) { return x + 1 }
    undefined // объявление функции ничего не возвращает, хотя Function Declaration еще как!
             // консоль же интерпретирует это выражение как Function Expression
    foo(2)
    3 // вызов a возвращает значение 3
    
    (function bar(x) { return x * x })  // объявление функции, обернутое в скобки,
    (function bar(x) { return x * x }) //  интерпретируется как Function Declaration

    Пример с arrow function:
    (x) => x + 1
    (x) => x + 1 // объявление arrow function возвращает саму функцию


    Вызов же console.log отправляет в стандартный вывод строку, построенную на основе аргументов, при этом не возвращая какого-либо значения. Поэтому вы видите результат ее выполнения и undefined.
    Демо: https://jsfiddle.net/1qwaq2m0/
    Ответ написан
    Комментировать
  • Использование Api сайтом, нужно ли?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    Почему нельзя, просто, выделить common часть для обоих модулей?
    А в модель поста можно прописать метод который будет доставать и мапить результаты.

    Тогда у вас будет примерно такой код в rest:
    router.get('/', routeCache.cacheSeconds(20), async (req, res) => {
        const posts = await models.Post.getPostsList({ limit: 10 });
    
        res.json(posts);
    });


    и такой для сайта:
    router.get('/', async (req, res) => {
        const posts = await models.Post.getPostsList({ limit: 10 });
    
        res.render('index', { posts_list: posts });
    });


    Все просто и никаких костылей.
    Обращения сервера сайта к rest это лишний код и лишние операции.

    Метод res.json() сам добавляет к ответу заголовок Content-Type со значением 'application/json' если он не добавлен до этого.
    Ответ написан
    Комментировать
  • Можно ли установить 2 проекта на один VPS?

    rockon404
    @rockon404
    Frontend Developer
    Запускаете, например, на 3000 и 3001.
    если хотите с одного хоста, то настраиваете NGINX как-то так:
    server {
        listen 80;
        server_name example.com;
        access_log /var/log/nginx/example.com;
    
        location / {
            proxy_pass         http://127.0.0.1:3000;
        }
    
        location /second-project-path {
            proxy_pass         http://127.0.0.1:3001;
        }
    }


    Корневой путь для первого проекта, /second-project-path для второго.

    Если хосты тоже хотите разные, то так:
    server {
        listen       80;
        server_name  first-project.com;
        access_log /var/log/nginx/first-project.com;
    
        location / {
            proxy_pass http://127.0.0.1:3000;
        }
    }
    
    server {
        listen       80;
        server_name  second-project.com;
        access_log /var/log/nginx/second-project.com;
    
        location / {
            proxy_pass http://127.0.0.1:3001;
        }
    }
    }
    Ответ написан
    Комментировать
  • Как выложить landing page (node js) на VPS SSD хостинге?

    rockon404
    @rockon404
    Frontend Developer
    Самый простой вариант.

    1. Создаем рабочую директорию:
    mkdir workplace

    2. Переходим в рабочую директорию:
    cd workplace

    3. Загружаем репозиторий со своим проектом:
    git clone [path to project]

    4. Переходим в директорию проекта:
    cd [project directory name]

    5. Устанавливаем зависимости:
    npm install

    6. Если есть конфиги, секреты и api ключи, добавляем.

    7. Настраиваем NGINX
    server {
        listen 80;
        server_name example.com;
        access_log /var/log/nginx/example.com;
    
        location / {
            proxy_pass         "http://127.0.0.1:3000";
        }
    }


    8. Запускаем:
    npm start
    Ответ написан
    Комментировать
  • Как ввести данные с клавиатуры в программу node.js?

    rockon404
    @rockon404
    Frontend Developer
    Используйте readline-sync:
    const readline = require('readline-sync');
    
    const name = readline.question("What is your name?");
    
    console.log("Hi " + name + ", nice to meet you.");


    Пакет необходимо предварительно установить:
    npm install readline-sync -S
    Ответ написан
    1 комментарий