Как остановить сервер react

Начало нового проекта React¶

Если вы хотите создать новое приложение или новый сайт полностью на React, мы рекомендуем выбрать один из популярных в сообществе фреймворков на базе React. Фреймворки предоставляют функции, которые в конечном итоге необходимы большинству приложений и сайтов, включая маршрутизацию, получение данных и генерацию HTML.

Для локальной разработки необходимо установить Node.js. Вы можете также выбрать использование Node.js в производстве, но это не обязательно. Многие фреймворки React поддерживают экспорт в статическую папку HTML/CSS/JS.

React-фреймворки производственного класса¶

Next.js¶

Next.js — это полнофункциональный React-фреймворк. Он универсален и позволяет создавать React-приложения любого размера — от преимущественно статичного блога до сложного динамического приложения. Чтобы создать новый проект Next.js, выполните в терминале команду:

npx create-next-app 

Если вы новичок в Next.js, ознакомьтесь с учебником Next.js.

Next.js поддерживается Vercel. Вы можете развернуть приложение Next.js на любом Node.js или бессерверном хостинге, или на своем собственном сервере. Полностью статические приложения Next.js могут быть развернуты на любом статическом хостинге.

Remix¶

Remix — это полностековый фреймворк React с вложенной маршрутизацией. Он позволяет разбить ваше приложение на вложенные части, которые могут загружать данные параллельно и обновляться в ответ на действия пользователя. Чтобы создать новый проект Remix, запустите:

npx create-remix 

Если вы новичок в Remix, ознакомьтесь с учебником по Remix blog tutorial (краткий) и app tutorial (длинный).

Remix поддерживается Shopify. Когда вы создаете проект Remix, вам нужно выбрать цель развертывания. Вы можете развернуть приложение Remix на любом Node.js или бессерверном хостинге, используя или написав адаптер.

Gatsby¶

Gatsby — это React-фреймворк для быстрых сайтов на базе CMS. Его богатая экосистема плагинов и слой данных GraphQL упрощают интеграцию контента, API и сервисов в один сайт. Чтобы создать новый проект Gatsby, выполните команду:

npx create-gatsby 

Если вы новичок в Gatsby, ознакомьтесь с руководством Gatsby tutorial.

Gatsby поддерживается Netlify. Вы можете развернуть полностью статический сайт Gatsby на любом статическом хостинге. Если вы хотите использовать только серверные функции, убедитесь, что ваш хостинг-провайдер поддерживает их для Gatsby.

Expo (для нативных приложений)¶

Expo — это фреймворк React, позволяющий создавать универсальные приложения для Android, iOS и веб-приложения с действительно нативным пользовательским интерфейсом. Он предоставляет SDK для React Native, который упрощает использование нативных частей. Чтобы создать новый проект Expo, выполните:

npx create-expo-app 

Если вы новичок в Expo, ознакомьтесь с Expo tutorial.

Expo поддерживается Expo (компания). Создание приложений с помощью Expo бесплатно, и вы можете отправлять их в магазины приложений Google и Apple без ограничений. Expo дополнительно предоставляет платные облачные сервисы.

Могу ли я использовать React без фреймворка?

Вы определенно можете использовать React без фреймворка — именно так вы будете использовать React для части вашей страницы. Однако, если вы создаете новое приложение или сайт полностью на React, мы рекомендуем использовать фреймворк.

Даже если поначалу вам не нужна маршрутизация или выборка данных, вы, скорее всего, захотите добавить некоторые библиотеки для них. Поскольку ваш набор JavaScript растет с каждой новой функцией, вам, возможно, придется придумать, как разделить код для каждого маршрута в отдельности. По мере усложнения процесса получения данных вы можете столкнуться с сетевыми водопадами между сервером и клиентом, из-за которых ваше приложение будет работать очень медленно. Поскольку ваша аудитория включает больше пользователей с плохими сетевыми условиями и устройствами низкого класса, вам может понадобиться генерировать HTML из ваших компонентов для отображения содержимого на ранних этапах — либо на сервере, либо во время сборки. Изменение настроек для запуска части кода на сервере или во время сборки может быть очень сложным.

Эти проблемы не являются специфичными для React. Именно поэтому у Svelte есть SvelteKit, у Vue есть Nuxt и т.д. Чтобы решить эти проблемы самостоятельно, вам нужно будет интегрировать ваш бандлер с вашим маршрутизатором и с вашей библиотекой получения данных. Добиться первоначальной настройки несложно, но есть много тонкостей, связанных с созданием приложения, которое быстро загружается, даже если оно растет со временем. Вы захотите передать минимальное количество кода приложения, но сделать это за один цикл клиент-сервер, параллельно с любыми данными, необходимыми для страницы. Скорее всего, вы захотите, чтобы страница была интерактивной еще до запуска кода JavaScript, для поддержки прогрессивного улучшения. Возможно, вы захотите создать папку полностью статичных HTML-файлов для ваших маркетинговых страниц, которые можно разместить где угодно и продолжать работать с отключенным JavaScript. Создание таких возможностей самостоятельно требует реальной работы.

React-фреймворки на этой странице решают подобные проблемы по умолчанию, без дополнительной работы с вашей стороны. Они позволяют вам начать с минимальных затрат и затем масштабировать приложение в соответствии с вашими потребностями. У каждого фреймворка React есть сообщество, поэтому найти ответы на вопросы и обновить инструментарий проще. Фреймворки также придают структуру вашему коду, помогая вам и другим людям сохранять контекст и навыки между различными проектами. Напротив, с пользовательской установкой проще застрять на неподдерживаемых версиях зависимостей, и в итоге вы создадите свой собственный фреймворк — пусть и без сообщества и путей обновления (и если он похож на те, что мы создавали в прошлом, то более бессистемно).

Если вы все еще не убеждены, или ваше приложение имеет необычные ограничения, не обслуживаемые этими фреймворками, и вы хотите создать свою собственную настройку, мы не можем вас остановить — действуйте! Возьмите react и react-dom из npm, настройте свой собственный процесс сборки с помощью бандлера, например Vite или Parcel, и добавьте другие инструменты по мере необходимости для маршрутизации, генерации статики или рендеринга на стороне сервера, и многое другое.

Передовые фреймворки React¶

Изучая пути дальнейшего совершенствования React, мы поняли, что более тесная интеграция React с фреймворками (в частности, с маршрутизацией, обвязкой и серверными технологиями) — наша самая большая возможность помочь пользователям React создавать лучшие приложения. Команда Next.js согласилась сотрудничать с нами в исследовании, разработке, интеграции и тестировании не зависящих от фреймворка передовых функций React, таких как React Server Components.

Эти функции с каждым днем становятся все ближе к готовности к производству, и мы ведем переговоры с другими разработчиками бандлеров и фреймворков об их интеграции. Мы надеемся, что через год или два все фреймворки, перечисленные на этой странице, будут иметь полную поддержку этих функций. (Если вы являетесь автором фреймворка, заинтересованным в сотрудничестве с нами для экспериментов с этими функциями, пожалуйста, сообщите нам об этом!)

Next.js (App Router)¶

Next.js’s App Router — это редизайн API Next.js, направленный на реализацию видения полностековой архитектуры команды React. Он позволяет вам получать данные в асинхронных компонентах, которые запускаются на сервере или даже во время сборки.

Next.js поддерживается Vercel. Вы можете развернуть приложение Next.js на любом Node.js или бессерверном хостинге, или на своем собственном сервере. Next.js также поддерживает статический экспорт, который не требует сервера.

App Router в Next.js находится в настоящее время в бета-версии и пока не рекомендуется для производства (по состоянию на март 2023 года). Чтобы поэкспериментировать с ним в существующем проекте Next.js, следуйте этому руководству по постепенной миграции.

Какие функции составляют видение архитектуры полного стека команды React?

Пакет App Router в Next.js полностью реализует официальную спецификацию React Server Components specification. Это позволяет вам смешивать в одном дереве React компоненты времени сборки, серверные и интерактивные компоненты.

Например, вы можете написать серверный компонент React в виде функции async , которая считывает данные из базы данных или из файла. Затем вы можете передавать данные из него в ваши интерактивные компоненты:

 1 2 3 4 5 6 7 8 9 10 11 12 13

// This component runs *only* on the server (or during the build). async function Talks( confId >)  // 1. You're on the server, so you can talk to your data layer. // API endpoint not required. const talks = await db.Talks.findAll( confId >); // 2. Add any amount of rendering logic. // It won't make your JavaScript bundle larger. const videos = talks.map((talk) => talk.video); // 3. Pass the data down to the components that will run in the browser. return SearchableVideoList videos=videos> />; > 

App Router от Next.js также интегрирует выборку данных с Suspense . Это позволяет задавать состояние загрузки (как скелетный заполнитель) для различных частей пользовательского интерфейса непосредственно в дереве React:

1 2 3

Suspense fallback=TalksLoading />>> Talks confId=conf.id> /> /Suspense> 

Server Components и Suspense — это скорее особенности React, чем особенности Next.js. Однако их внедрение на уровне фреймворка требует участия и нетривиальной работы по реализации. На данный момент наиболее полной реализацией является Next.js App Router. Команда React работает с разработчиками бандлеров, чтобы облегчить внедрение этих функций в следующее поколение фреймворков.

Ссылки¶

Оптимизация производительности

React использует несколько умных подходов для минимизации количества дорогостоящих DOM-операций, необходимых для обновления пользовательского интерфейса. Для многих приложений, использование React приведёт к быстрому пользовательскому интерфейсу без особых усилий по оптимизации производительности. Тем не менее, существует несколько способов ускорить React-приложение.

Если вы испытываете проблемы с производительностью в React-приложении, убедитесь в том, что вы проводите тесты с настройками минифицированной продакшен-сборки.

По умолчанию в React есть много вспомогательных предупреждений, очень полезных при разработке. Тем не менее, они делают React больше и медленнее, поэтому вам обязательно следует использовать продакшен-версию при деплое приложения.

Если вы не уверены в том, что процесс сборки настроен правильно, вы можете проверить это, установив React Developer Tools for Chrome. Если вы посетите сайт, работающий на React в продакшен-режиме, иконка будет с чёрным фоном:

Если вы посетите сайт с React в режиме разработки, у иконки будет красный фон:

Как правило, режим разработки используется во время работы над приложением, а продакшен-режим при деплое приложения для пользователей.

Ниже вы можете найти инструкцию по сборке своего приложения для продакшена.

Create React App

Если ваш проект сделан с помощью Create React App, выполните:

npm run build

Эта команда создаст продакшен-сборку вашего приложения в папке build/ вашего проекта.

Помните, что это необходимо только перед деплоем на продакшен. Для обычной разработки используйте npm start .

Мы предлагаем готовые для продакшена версии React и React DOM в виде отдельных файлов:

script src="https://unpkg.com/react@18/umd/react.production.min.js"> script> script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"> script>

Помните, что для продакшена подходят только те файлы, которые заканчиваются на .production.min.js .

Для наиболее эффективной продакшен-сборки с Brunch, установите плагин terser-brunch .

# В случае использования npm npm install --save-dev terser-brunch # В случае использования Yarn yarn add --dev terser-brunch

Затем, для создания продакшен сборки, добавьте флаг -p к команде build :

brunch build -p

Помните, что это нужно делать только для продакшен-сборки. Вам не нужно использовать флаг -p или применять этот плагин во время разработки, потому что это скроет вспомогательные предупреждения React и замедлит процесс сборки.

Для наиболее эффективной продакшен-сборки с Browserify, установите несколько плагинов:

# В случае использования npm npm install --save-dev envify terser uglifyify # В случае использования Yarn yarn add --dev envify terser uglifyify

При создании продакшен-сборки, убедитесь, что вы добавили эти пакеты для преобразования (порядок имеет значение):

• Плагин envify обеспечивает правильную среду для сборки. Сделайте его глобальным ( -g ).
• Плагин uglifyify удаляет импорты, добавленные при разработке. Сделайте его глобальным ( -g ).
• Наконец, полученная сборка отправляется к terser для минификации (прочитайте, зачем это нужно).

browserify ./index.js \ -g [ envify --NODE_ENV production ] \ -g uglifyify \ | terser --compress --mangle > ./bundle.js

Помните, что это нужно делать только для продакшен-сборки. Вам не следует использовать эти плагины в процессе разработки, потому что это скроет вспомогательные предупреждения React и замедлит процесс сборки.

Для наиболее эффективной продакшен-сборки с Rollup, установите несколько плагинов:

# В случае использования npm npm install --save-dev rollup-plugin-commonjs rollup-plugin-replace rollup-plugin-terser # В случае использования Yarn yarn add --dev rollup-plugin-commonjs rollup-plugin-replace rollup-plugin-terser

При создании продакшен-сборки, убедитесь, что вы добавили эти плагины (порядок имеет значение):

• Плагин replace обеспечивает правильную среду для сборки.
• Плагин commonjs обеспечивает поддержку CommonJS в Rollup.
• Плагин terser сжимает и оптимизирует финальную сборку.

plugins: [ // . require('rollup-plugin-replace')( 'process.env.NODE_ENV': JSON.stringify('production') >), require('rollup-plugin-commonjs')(), require('rollup-plugin-terser')(), // . ]

Полный пример настройки можно посмотреть здесь.

Помните, что это нужно делать только для продакшен-сборки. Вам не следует использовать плагин terser или плагин replace со значением ‘production’ в процессе разработки, потому что это скроет вспомогательные предупреждения React и замедлит процесс сборки.

Примечание:

Если вы используете Create React App, пожалуйста, следуйте инструкциям выше.
Этот раздел подойдёт для тех, кто самостоятельно настраивает webpack.

Webpack 4.0 и выше по умолчанию минифицирует код в продакшен-режиме.

const TerserPlugin = require('terser-webpack-plugin'); module.exports =  mode: 'production', optimization:  minimizer: [new TerserPlugin( /* additional options here */ >)], >, >;

Вы можете узнать об этом больше в документации webpack.

Помните, что это нужно делать только для продакшен-сборки. Вам не стоит использовать TerserPlugin в процессе разработки, потому что тогда скроются вспомогательные предупреждения React и замедлится процесс сборки.

Анализ производительности компонентов с помощью инструмента разработки «Profiler»

Пакеты react-dom версии 16.5+ и react-native версии 0.57+ предоставляют расширенные возможности анализа производительности в режиме разработки с помощью инструментов разработчика React Profiler. Обзор профайлера можно найти в посте блога «Введение в React Profiler». Пошаговое видео-руководство также доступно на YouTube.

Если вы ещё не установили инструменты разработчика React, вы можете найти их здесь:

• Chrome Browser Extension
• Firefox Browser Extension
• Standalone Node Package

Примечание

Профилирование продакшен-пакета для react-dom также доступно как react-dom/profiling . Подробнее о том, как использовать этот пакет, читайте на fb.me/react-profiling

Примечание

До React 17 мы использовали стандартный User Timing API для профилирования компонентов с помощью вкладки Performance браузера Chrome. Более подробнее об этом способе можно узнать в статье Бена Шварца (Ben Schwarz).

Виртуализация длинных списков

Если ваше приложение рендерит длинные списки данных (сотни или тысячи строк), мы рекомендуем использовать метод известный как «оконный доступ». Этот метод рендерит только небольшое подмножество строк в данный момент времени и может значительно сократить время, необходимое для повторного рендера компонентов, а также количество создаваемых DOM-узлов.

react-window и react-virtualized — это популярные библиотеки для оконного доступа. Они предоставляют несколько повторно используемых компонентов для отображения списков, сеток и табличных данных. Если вы хотите использовать что-то более специфическое для вашего конкретного случая, то вы можете создать собственный компонент с оконным доступом, как это сделано в Twitter.

React создаёт и поддерживает внутреннее представление отображаемого пользовательского интерфейса. Оно также включает React-элементы возвращаемые из ваших компонентов. Это представление позволяет React избегать создания DOM-узлов и не обращаться к текущим без необходимости, поскольку эти операции могут быть медленнее, чем операции с JavaScript-объектами. Иногда его называют «виртуальный DOM», но в React Native это работает точно так же.

Когда изменяются пропсы или состояние компонента, React решает нужно ли обновление DOM, сравнивая возвращённый элемент с ранее отрендеренным. Если они не равны, React обновит DOM.

Несмотря на то, что React обновляет только изменённые DOM-узлы, повторный рендеринг всё же занимает некоторое время. В большинстве случаев это не проблема, но если замедление заметно, то вы можете всё ускорить, переопределив метод жизненного цикла shouldComponentUpdate , который вызывается перед началом процесса ререндеринга. Реализация этой функции по умолчанию возвращает true , указывая React выполнить обновление:

shouldComponentUpdate(nextProps, nextState)  return true; >

Если вы знаете ситуации, в которых ваш компонент не нуждается в обновлении, вы можете вернуть false из shouldComponentUpdate , чтобы пропустить весь процесс рендеринга, включая вызов render() и так далее ниже по иерархии.

В большинстве случаев вместо того, чтобы писать shouldComponentUpdate() вручную, вы можете наследоваться от React.PureComponent . Это эквивалентно реализации shouldComponentUpdate() с поверхностным сравнением текущих и предыдущих пропсов и состояния.

shouldComponentUpdate в действии

Вот поддерево компонентов. Для каждого из них SCU указывает что возвратил shouldComponentUpdate , а vDOMEq указывает эквивалентны ли отрендеренные React-элементы. Наконец, цвет круга указывает требуется ли согласовать компонент или нет.

Поскольку shouldComponentUpdate возвратил false для поддерева с корнем C2, React не пытался отрендерить C2, следовательно не нужно вызывать shouldComponentUpdate на C4 и C5.

Для C1 и C3 shouldComponentUpdate возвратил true , поэтому React пришлось спуститься к листьям и проверить их. Для C6 shouldComponentUpdate вернул true , и поскольку отображаемые элементы не были эквивалентны, React должен был обновить DOM.

Последний интересный случай — C8. React должен был отрисовать этот компонент, но поскольку возвращаемые им React-элементы были равны ранее предоставленным, ему не нужно обновлять DOM.

Обратите внимание, что React должен был делать изменения только для C6. Для C8 этого удалось избежать сравнением отрендеренных React-элементов, а для поддеревьев C2 и C7 даже не пришлось сравнивать элементы, так как нас выручил shouldComponentUpdate и render не был вызван.

Если единственный случай изменения вашего компонента это когда переменная props.color или state.count изменяются, вы могли бы выполнить проверку в shouldComponentUpdate следующим образом:

class CounterButton extends React.Component  constructor(props)  super(props); this.state = count: 1>; > shouldComponentUpdate(nextProps, nextState)  if (this.props.color !== nextProps.color)  return true; > if (this.state.count !== nextState.count)  return true; > return false; > render()  return ( button color=this.props.color> onClick=() => this.setState(state => (count: state.count + 1>))>> Счётчик: this.state.count> button> ); > >

В этом коде shouldComponentUpdate — это простая проверка на наличие каких-либо изменений в props.color или state.count . Если эти значения не изменяются, то компонент не обновляется. Если ваш компонент стал более сложным, вы можете использовать аналогичный паттерн «поверхностного сравнения» между всеми полями props и state , чтобы определить должен ли обновиться компонент. Этот механизм достаточно распространён, поэтому React предоставляет вспомогательную функцию для работы с ним — просто наследуйтесь от React.PureComponent . Поэтому, следующий код — это более простой способ добиться того же самого эффекта:

class CounterButton extends React.PureComponent  constructor(props)  super(props); this.state = count: 1>; > render()  return ( button color=this.props.color> onClick=() => this.setState(state => (count: state.count + 1>))>> Счётчик: this.state.count> button> ); > >

В большинстве случаев вы можете использовать React.PureComponent вместо написания собственного shouldComponentUpdate . Но он делает только поверхностное сравнение, поэтому его нельзя использовать, если пропсы и состояние могут измениться таким образом, который не сможет быть обнаружен при поверхностном сравнении.

Это может стать проблемой для более сложных структур данных. Например, вы хотите, чтобы компонент ListOfWords отображал список слов, разделённых через запятую, с родительским компонентом WordAdder , который позволяет кликнуть на кнопку, чтобы добавить слово в список. Этот код работает неправильно:

class ListOfWords extends React.PureComponent  render()  return div>this.props.words.join(',')>div>; > > class WordAdder extends React.Component  constructor(props)  super(props); this.state =  words: ['словцо'] >; this.handleClick = this.handleClick.bind(this); > handleClick()  // Данная секция содержит плохой код и приводит к багам const words = this.state.words; words.push('словцо'); this.setState(words: words>); > render()  return ( div> button onClick=this.handleClick> /> ListOfWords words=this.state.words> /> div> ); > >

Проблема в том, что PureComponent сделает сравнение по ссылке между старыми и новыми значениями this.props.words . Поскольку этот код мутирует массив words в методе handleClick компонента WordAdder , старые и новые значения this.props.words при сравнении по ссылке будут равны, даже если слова в массиве изменились. ListOfWords не будет обновляться, даже если он содержит новые слова, которые должны быть отрендерены.

Сила иммутабельных данных

Лучший способ решения этой проблемы — избегать мутирования значений, которые вы используете как свойства или состояние. К примеру, описанный выше метод handleClick можно переписать с помощью concat следующим образом:

handleClick()  this.setState(state => ( words: state.words.concat(['словцо']) >)); >

ES6 поддерживает синтаксис расширения для массивов, который поможет сделать это проще. Если вы используете Create React App, то этот синтаксис доступен там по умолчанию.

handleClick()  this.setState(state => ( words: [. state.words, 'словцо'], >)); >;

Таким же образом вы можете переписать код, который мутирует объекты. К примеру, мы имеем объект с именем colormap и хотим написать функцию, которая изменяет colormap.right на ‘blue’ . Мы могли бы написать:

function updateColorMap(colormap)  colormap.right = 'blue'; >

Чтобы написать это без мутирования исходного объекта, мы можем использовать метод Object.assign:

function updateColorMap(colormap)  return Object.assign(>, colormap, right: 'blue'>); >

Функция updateColorMap теперь возвращает новый объект, вместо того, чтобы мутировать исходный. Метод Object.assign входит в ES6 и требует полифила.

Синтаксис расширения свойств объекта упрощает обновление объектов без мутаций:

function updateColorMap(colormap)  return . colormap, right: 'blue'>; >

Этот синтаксис был добавлен в JavaScript в ES2018.

Если вы используете Create React App, то Object.assign и синтаксис расширения объектов доступны вам по умолчанию.

При работе с глубоко вложенными объектами, постоянное их обновление может запутать. Если вы столкнулись с такой проблемой, обратите внимание на Immer или immutability-helper. Эти библиотеки позволяют писать хорошо читаемый код, не теряя преимуществ иммутабельности.

Как остановить create-react-app правильно?

Здравствуйте, выполнил команду create-react-app my-app + npm start.
Открылся сайт в localhost:3000
закрыл вкладку с этой страницей
запустил другой app через npm start
спросило что 3000 порт занят
решил закрыть его
гугл дал такой вариант

< "name": "alga-react", "version": "0.1.0", "private": true, "dependencies": < "jquery": "^3.3.1", "react": "^16.7.0", "react-dom": "^16.7.0", "react-html-id": "^0.1.5", "react-html-parser": "^2.0.2", "react-router-dom": "^4.3.1", "react-scripts": "2.1.3", "react-slick": "^0.23.2", "slick-carousel": "^1.8.1" >, "scripts": < "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "stop": "taskkill -F -IM node.exe" >, "eslintConfig": < "extends": "react-app" >, "browserslist": [ ">0.2%", "not dead", "not ie

«stop»: «taskkill -F -IM node.exe»
выполнил команду npm stop
теперь не могу установить компоненты через npm install nameOfComponent

0 info it worked if it ends with ok 1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe', 1 verbose cli 'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js', 1 verbose cli 'install', 1 verbose cli 'jquery' ] 2 info using npm@6.4.1 3 info using node@v10.15.1 4 verbose npm-session 8907af06ae674f82 5 silly install loadCurrentTree 6 silly install readLocalPackageData 7 timing stage:rollbackFailedOptional Completed in 2ms 8 timing stage:runTopLevelLifecycles Completed in 2712ms 9 verbose stack Error: Failed to parse json 9 verbose stack Unexpected token > in JSON at position 404 while parsing near '. t-scripts eject", 9 verbose stack >, 9 verbose stack "eslintConfig". ' 9 verbose stack at parseError (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:452:11) 9 verbose stack at parseJson (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:104:26) 9 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:51:5 9 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\graceful-fs.js:78:16 9 verbose stack at FSReqWrap.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:53:3) 10 verbose cwd D:\Вёрстка\React\alga-react-1.0.1 11 verbose Windows_NT 6.1.7601 12 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "jquery" 13 verbose node v10.15.1 14 verbose npm v6.4.1 15 error file D:\Вёрстка\React\alga-react-1.0.1\package.json 16 error code EJSONPARSE 17 error JSON.parse Failed to parse json 17 error JSON.parse Unexpected token > in JSON at position 404 while parsing near '. t-scripts eject", 17 error JSON.parse >, 17 error JSON.parse "eslintConfig". ' 18 error JSON.parse Failed to parse package.json data. 18 error JSON.parse package.json must be actual JSON, not just JavaScript. 19 verbose exit [ 1, true ]

• Вопрос задан более трёх лет назад
• 3338 просмотров

2 комментария

Простой 2 комментария

Как остановить npm?

Я запускаю сайт на node.js на vds хостинге с помощью npm start server.js . Все работает, консоль выводит логи, другие могут заходить по ip. Если нужно перезапустить node, приходится перезагружать весь сервер и заново запускать node. У себя на компе (на windows) я просто закрывал консоль. Как реализовать остановку и рестарт node из консоли для хостинга?

Отслеживать
11.9k 5 5 золотых знаков 28 28 серебряных знаков 40 40 бронзовых знаков
задан 17 янв 2018 в 12:59
Данис Хамидуллин Данис Хамидуллин
67 1 1 золотой знак 2 2 серебряных знака 7 7 бронзовых знаков

Ну, если вы орудуете через putty, то проще всего поставить утилиту screen и работать в ней. По моему чтобы завершить процесс, нужно всего лишь выполнить команду ctrl+c.

17 янв 2018 в 13:03
Возможный дубликат вопроса: Как сделать, чтобы nodeJs сервер работал без активированной консоли?
17 янв 2018 в 15:00

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Используй сочетание кнопок CTRL + C чтобы остановить. И научись пользоваться screen, я скинул тебе мануал как работать с ним в CentOS, но для других ОС тоже есть и использование аналогично, установка немного различна, но суть почти одна и та же.

Создай файл run.sh и запускай через него, будет в будущем удобно, особенно когда нормально разберешься.

#Путь до проекта cd /www/test.com/ #Запуск проекта, Test - название процесса screen -S Test npm run start 

Скрипт можешь добавить в автозагрузку, тогда сервер будет стартовать сразу же после включения

В packege.json укажи

"scripts": < "start": "node start server.js" >, 

Если ты во время разработки постоянно перезапускаешь сервер, то можешь воспользоваться nodemon, он следит за файлами и если, что-то изменилось, то перезапускается