Почему localhost react не работает

Почему сборка React не запускается в браузере?

Я пытаюсь создать свое приложение реакции, используя инструмент сборки реаги. Когда я пытаюсь «npm start», приложение работает нормально.

На http: // localhost: 3000 => я могу получить доступ к приложению.

Но когда я собираю приложение и пытаюсь получить доступ к файлу «index.html» в папке сборки, оно не работает, и я сталкиваюсь с белым пустым экраном.

Это папка сборки, которая была создана после запуска npm run build.

И это index.html

Я делаю что-то неправильно? Не могу ли я получить доступ к встроенному файлу index.html на моем веб-сервере apache?

5 ответов

Возможно, вы еще не заметили, но я не думаю, что ваш HTML-файл может правильно импортировать CSS и файлы сценариев. Когда я смотрю на вашу файловую структуру, я вижу, что все о сборке находится в папке сборки. Но в вашем html-файле есть косые черты («/») перед путями к файлам. Вот почему браузер ищет эти файлы под родительским элементом «сборки». Попробуйте удалить косые черты.

Вышеупомянутая проблема может быть преодолена, если вы добавите — «homepage»: «.»,

В вашем package.json. Это не официальный, но хороший взлом для подражания.

Чтобы решить эту проблему, перейдите в папку build , затем вы увидите файл manifest.json , откройте его и увидите, что у вас manifest.json есть:

Измените это на

Есть альтернативный способ решения проблемы:

Перед сборкой реагирующего проекта перейдите в файл package.json и укажите свойство homepage со значением . или, возможно, с базовым URL вашего сайта, см. пример:

Вам следует попробовать использовать пакет обслуживания здесь для запуска одностраничного приложения.

• npm install -g serve для глобальной установки
• serve help чтобы увидеть тексты помощи
• serve —single build для обслуживания одностраничного приложения. I сервер будет запущен, с которого вы можете получить доступ к вашему приложению реакции

Вам необходимо установить плагин / расширение для локального сервера.

Если вы являетесь пользователем vscode, найдите расширение сервера и установите его. Тогда в нижней части вашего редактора появится опция «Перейти к жизни».

Для другого пользователя редактора (atom / sublime) ищите плагины сервера.

Источник

create-react-app-почему localhost не работает?

После создания нового приложения react с помощью create-react-app, как только я запускаю dev-сервер через npm start, сервер запускается и показывает это:

Я уверен, что до прошлой недели я мог открыть http://localhost:3000 , чтобы увидеть новое созданное приложение в браузере, но теперь оно больше не работает и показывает это:

Но это работает, если я открываю http: / / 192.168.119:3000

Я ничего не изменил в своем файле .hosts.

Кто-нибудь знает, почему я больше не могу использовать http://localhost:3000 ?

3 ответа

Я пытаюсь установить react с помощью команды terminal: npm установка-g create-react-app Но это, кажется, не работает, и я получаю следующий результат: create-react-app выход Кто-нибудь знает, в чем здесь может быть проблема?

Я новичок в create-react-app . Я хочу знать, почему открытие index.html формы сборки не работает ?? Я знаю, что для обслуживания сборки serve -s build следует использовать, но я хочу знать, почему приложение build react не может быть запущено без обслуживания. Я объясню дальше: Вот что я делаю.

Спасибо за вашу помощь, ребята. После очистки кэша браузера и очистки DNS он снова работает.

Вы использовали агента?

пинг localhost, проверьте, что это 127.0.0.1?

Немного поздно, но я столкнулся с той же проблемой; оказалось, что мое приложение vpn работает, не позволяя мне получить доступ к приложению на http://localhost:3000. Таким образом, выключение vpn должно решить эту проблему

Похожие вопросы:

Я установил create-react-app точно так, как указано на странице инструкции facebook ( https:/ / facebook.github.io / react/blog/2016/07/22/create-apps-with-no-configuration.html ): Во-первых.

create-react-app build не работает в подкаталоге на веб-сервере. Я использовал веб-сервер express node. ‘create-react-app build’ работает в корневом каталоге. Но он не работает в подкаталоге.

Я использую create-react-app для загрузки своего приложения react, я сделал это в своем package.json proxy:http://localhost:3001 поскольку мой сервер api работает на 3001, но я запускаю запрос с.

Я пытаюсь установить react с помощью команды terminal: npm установка-g create-react-app Но это, кажется, не работает, и я получаю следующий результат: create-react-app выход Кто-нибудь знает, в чем.

Я новичок в create-react-app . Я хочу знать, почему открытие index.html формы сборки не работает ?? Я знаю, что для обслуживания сборки serve -s build следует использовать, но я хочу знать, почему.

я пытаюсь начать с проекта react и установил create-react-app с npm. Когда я выполняю команду create-react-app pseudogram, я получаю следующую ошибку: Aborting installation. Unexpected error. Please.

Я хочу создать приложение typescript react с помощью этого инструмента Microsoft/TypeScript-React-Starter . Я следовал инструкциям со страницы github: 1. npm install -g create-react-app 2.

Я побежал пряжа добавить react-native-cli, следуя по пряжа добавить react-native. К тому времени все, казалось, было установлено правильно. Затем я использовал create-react-native-app my-app, что.

Источник

React App localhost: логотип 3000 не крутится

Первый пост от меня. Вот оно.

Я установил Visual Studio Code и хотел создать свое первое приложение React. Я прочитал документацию, использовал синтаксис:

Npx создать-реагировать-приложение мое-реагировать-приложение

Также используется npm start

Я успешно скомпилировал! сообщение в терминале. Страница http: localhost3000 откроется в новой вкладке. Отображается логотип React. По какой-то причине логотип React для меня является статическим изображением. Я редактировал текст в тегах P страницы, и они обновляются в реальном времени. Расширение Live Server, похоже, тоже работает.

Этот логотип крутится почти в каждом видеоуроке. Меня беспокоит неправильная настройка React или даже Visual Studio Code с самого начала. Я пробовал удалить и переустановить 3x сейчас. У меня такое же статичное изображение.

Есть мысли, переживания или даже теории заговора? Логотип React крутится для вас? или статические, как у меня? Есть ли способ заставить его вращаться каждый раз, когда я создаю новое приложение React? Каждый раз, когда мой код не работает (скорее всего, это происходит с моим кодом), я все время думаю о логотипе React.

Версия узла 14.16.0 npm 6.14.11

2 ответа

Так что, как я уже сказал в комментариях, не нужно беспокоиться об анимированном логотипе. Просто файл SVG.

Вы также можете создать свой собственный Проверить здесь

Кроме того, я создал новый проект, и мой логотип вращается.

Сначала проверьте, есть ли у вас файл logo.svg, а затем проверьте файл App.css.

Кроме того, вам необходимо, чтобы они импортировались в ваш App.js, как .css, так и .svg.

Версия create-react-app (CRA) с вращающимся логотипом уже кажется довольно старой, пакет CRA быстро меняется, поэтому вы можете ожидать некоторых отличий.

Ваше приложение запущено достаточно хорошо, и это все, о чем вам нужно заботиться.

Источник

Не запускается локальный сервер

Прохожу книгу React in Action, скачал репозиторий автора з 4 главы? вставил в корне диска C
«https://github.com/react-in-action/letters-social/tree/chapter-4»

пробую запустить его с консоли в браузере ввожу команду npm run dev и получаю ошибку!!

Помощь в написании контрольных, курсовых и дипломных работ здесь.

локальный сервер
здравствуйте,вот я сделал локальный сервер раздаваемая через wifi как мне сделать чтобы при.

Локальный COM сервер
У меня получилось использовать библиотеку классов написанную на C# через COM. Сейчас задача стоит.

Локальный сервер
настроил свой сервер , проверил , все работает , но люди которые в моей локальной сети состоят.

Локальный сервер
Поставил xampp. Возникают ошибки при обработке любого PHP файла, даже если он пуст (только » 20

Ну вот ввел я npm install вылезла тонна ошибок на 2 страницы :Р
Но в итоге папка node_modules появилась)
Затем ввел npm run dev и снова ошибок на 2 страницы
Если верить автору то после команды npm run dev я могу зайти на http://localhost:3000/ и посмотреть на проект, но он не запустился
почему то
автор вот пишет что должно заработать после dev

With that, you can run the development command (npm run dev) and your app
should at least boot up and be available in the browser. If you haven’t already, make sure
you run npm run db:seed at least once to generate sample data for your database.
Running npm run dev will do a few things for you:
Start up the Webpack build process and development server
Start the JSON*server API so you can respond to network requests
Create a development server (useful for server*side rendering in chapter 12)
Hot*reload your app when changes occur (so you don’t have to refresh the app every
time you save a file)
Notify you of build errors (these should show up in the command line and the
browser if and when they occur)
When the app is up and running in development mode, you should be able to view the
running app at http://localhost:3000.

Ошибка на предпоследнем скрине у меня иногда тоже выскакивала. Для этого нужна удалить папку node_modules и затем заново установить все пакеты.

Добавлено через 1 минуту
У вас на последнем скрине выбило ошибку. Сделайте скрин, чтобы можно было видеть, какие действия делали до появления ошибки.

Источник

URL-адреса React-маршрутизатора не работают при обновлении или записи вручную

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

Например, я нахожусь в localhost/joblist и все хорошо, потому что я приехал сюда, нажимая на ссылку. Но если я обновлю веб-страницу, я получу:

По умолчанию это не сработало. Сначала у меня были URL localhost/#/ и localhost/#/joblist , и они отлично работали. Но мне не нравится этот вид URL, поэтому, пытаясь стереть этот # , я написал:

Эта проблема не возникает с localhost/ , эта всегда возвращает то, что я хочу.

РЕДАКТИРОВАТЬ: Это приложение одностраничное, поэтому /joblist не нужно ничего спрашивать на каком-либо сервере.

EDIT2: весь мой маршрутизатор.

28 ответов

Если вы размещаете свое приложение реагирования в IIS, просто добавьте файл web.config, содержащий:

Это скажет серверу IIS возвращать главную страницу клиенту вместо ошибки 404, и нет необходимости использовать историю хэшей.

Для React Router V4 пользователей:

Если вы попытаетесь решить эту проблему с помощью техники Hash History, упомянутой в других ответах, обратите внимание, что

Не работает в V4, используйте вместо этого HashRouter :

Если вы используете firebase, все, что вам нужно сделать, это убедиться, что у вас есть свойство rewrites в файле firebase.json в корне вашего приложения (в разделе хостинга).

Надеюсь, что это сэкономит кому-то еще кучу разочарования и потерянного времени.

Дальнейшее чтение по теме:

Добавление дополнительной информации в ответ Джошуа Дейка.

Если вы используете Firebase и хотите использовать как корневой маршрут, так и маршрут подкаталога, вам нужно добавить следующий код в firebase.json :

Вы создаете сайт для клиента. Вы хотите, чтобы владелец веб-сайта добавил информацию в https://your.domain.com/management тогда как пользователи веб-сайта будут переходить на https://your.domain.com.

В этом случае ваш firebase.json файл будет выглядеть так:

Если вы используете Express или какой-либо другой фреймворк в бэкэнде, вы можете добавить аналогичную конфигурацию, как показано ниже, и проверить открытый путь Webpack в конфигурации, он должен работать нормально даже при перезагрузке, если вы используете BrowserRouter

Если вы используете приложение Create React:

Тем не менее, вы можете найти множество решений для многих основных хостинговых платформ, которые вы можете найти ЗДЕСЬ на странице создания приложения React. Например, я использую React Router v4 и Netlify для своего кода внешнего интерфейса. Все, что нужно, это добавить 1 файл в мою общую папку («_redirects») и одну строку кода в этом файле:

Теперь мой веб-сайт правильно отображает пути, такие как mysite.com/pricing, при входе в браузер или при обновлении.

Предположим, у вас есть следующее определение маршрута Home

В вашем домашнем компоненте вы можете перехватить запрос в событии ComponentWillMount,

Теперь вместо вызова / joblist по URL вы можете запросить /? Joblist, и Компонент автоматически перенаправит запрос в / joblist (обратите внимание на дополнительный знак вопроса в пути)

У меня была такая же проблема, и это 0

Поскольку я использую .Net Core MVC, мне помогло нечто подобное:

В основном на стороне MVC все несоответствующие маршруты попадут в Home/Index , как указано в startup.cs . Внутри Index можно получить исходный URL-адрес запроса и передать его там, где это необходимо.

Исправление ошибки «невозможно получить / URL» при обновлении или при непосредственном вызове URL.

Сконфигурируйте свой webpack.config.js , чтобы он ожидал, что по данной ссылке маршруты будут такими.

Мне нравится этот способ справиться с этим. Попробуйте добавить: yourSPAPageRoute / * на стороне сервера, чтобы избавиться от этой проблемы.

Я пошел с этим подходом, потому что даже собственный API истории HTML5 не поддерживает правильное перенаправление при обновлении страницы (насколько я знаю).

Примечание: в выбранном ответе это уже учтено, но я пытаюсь быть более конкретным.

Протестировал и просто хотел этим поделиться.

Надеюсь, это поможет.

Попробуйте добавить файл «.htaccess» в общую папку с помощью приведенного ниже кода.

Добавьте это к webpack.congif.js

Рабочий стек: React, React Router v4, BrowswerRouter, Express, Nginx

1) Пользователь BrowserRouter для красивых URL

2) Добавьте index.html ко всем неизвестным запросам, используя /*

3) связать веб-пакет с webpack -p

4) запустить nodemon server.js или node server.js

РЕДАКТИРОВАТЬ: Вы можете позволить nginx обрабатывать это в блоке сервера и игнорировать шаг 2:

В случае, если кто-нибудь здесь ищет решение для React JS SPA с Laravel. Принятый ответ — лучшее объяснение того, почему такие проблемы случаются. Как уже объяснялось, вы должны настроить как клиентскую, так и серверную сторону. В свой шаблон блэйда включите файл js в комплекте, убедитесь, что вы используете URL facade вот так

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

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

Проблема, которая возникает, заключается в том, что сначала загружается шаблон блейда, а затем маршрутизатор реакции. Итак, когда вы загружаете ‘/setting-alerts’ , он загружает HTML и JS. Но когда вы загружаете ‘/setting-alerts/about’ , он сначала загружается на стороне сервера. Поскольку на стороне сервера в этом месте ничего нет, возвращается не найдено. Когда у вас есть этот дополнительный маршрутизатор, он загружает ту же страницу, и загружается реагирующий маршрутизатор, а затем реагирующий загрузчик решает, какой компонент показать. Надеюсь это поможет.

У сервера Webpack Dev есть возможность включить это. Откройте package.json и добавьте —history-api-fallback . Это решение работало для меня.

Для тех, кто использует IIS 10, это то, что вы должны сделать, чтобы сделать это правильно. Убедитесь, что вы используете browserHistory с этим. Что касается справки, я дам код для маршрутизации, но это не имеет значения, важен следующий шаг после кода компонента ниже:

Поскольку проблема заключается в том, что IIS получает запрос от клиентских браузеров, он будет интерпретировать URL-адрес так, как если бы он запрашивал страницу, а затем возвращает страницу 404, поскольку страница недоступна. Сделайте следующее:

1. Откройте IIS
2. Разверните Сервер, затем откройте папку «Сайты».
3. Нажмите на сайт / приложение
4. Перейти на страницы ошибок
5. Откройте пункт состояния ошибки 404 в списке
6. Вместо параметра «Вставить содержимое из статического файла в ответ об ошибке» измените его на «Выполнить URL на этом сайте» и добавьте «/» значение косой черты в URL.

И теперь это будет работать нормально.

Я надеюсь, что это помогает. 🙂

Я использовал create-реагировать-приложение, чтобы сделать веб-сайт прямо сейчас, и здесь была представлена та же проблема. Я использую BrowserRouting из пакета react-router-dom . Я работаю на сервере Nginx, и я решил добавить следующее в /etc/nginx/yourconfig.conf

Что соответствует добавлению следующего к .htaccess в случае, если вы используете Apache

Это также кажется решением, предложенным самими Facebook, и его можно найти здесь

Это может решить вашу проблему

Я также столкнулся с той же проблемой в приложении ReactJS в режиме производства. Вот 2 решения проблемы.

1. Измените историю маршрутизации на «hashHistory» вместо browserHistory вместо

Теперь создайте приложение с помощью команды

Затем поместите папку сборки в папку var / www /. Теперь приложение работает нормально с добавлением тега # в каждом URL. лайк

Localhost / # / home localhost / # / aboutus

Решение 2. Без тега # с помощью browserHistory,

Установите вашу историю = в вашем маршрутизаторе, теперь соберите ее с помощью sudo npm run build.

Вам нужно создать файл «conf» для решения страницы 404 not found, файл conf должен быть таким.

Откройте свой терминал введите ниже команды

Cd / etc / apache2 / sites-available ls nano sample.conf Добавьте в него содержимое ниже.

Теперь вам нужно включить файл sample.conf с помощью следующей команды

Затем он попросит вас перезагрузить сервер apache, используя sudo service apache2 reload или restart.

Затем откройте папку localhost / build и добавьте файл .htaccess с содержанием ниже.

Теперь приложение работает нормально.

Примечание: измените 0.0.0.0 ip на ваш локальный IP-адрес.

Если есть какие-либо сомнения по этому поводу, не стесняйтесь поднять комментарий.

Я надеюсь, что это полезно для других.

Эта тема немного устарела и решаема, но я хотел бы предложить вам простое, ясное и лучшее решение. Это работает, если вы используете веб-сервер.

Каждый веб-сервер имеет возможность перенаправить пользователя на страницу ошибки в случае http 404. Для решения этой проблемы вам необходимо перенаправить пользователя на страницу индекса.

Если вы используете базовый сервер Java (tomcat или любой сервер приложений Java), решение может быть следующим:

• ПОЛУЧИТЕ http://example.com/about
• Веб-сервер выдает http 404, потому что эта страница не существует на стороне сервера
• конфигурация страницы ошибки сообщает серверу, что отправляет страницу index.jsp обратно пользователю
• тогда JS выполнит остальную часть работы на стороне клиента, потому что URL-адрес на стороне клиента по-прежнему http: // пример. ком / о.

Вот и все, больше никаких магических потребностей 🙂

Если у вас есть запасной вариант для вашего index.html, убедитесь, что в вашем файле index.html есть следующее:

Это может отличаться от проекта к проекту.

Вы можете изменить свой .htaccess файл и вставить это:

Я использую react: «^16.12.0» и react-router: «^5.1.2» Этот метод является Catch-all и, вероятно, самый простой способ начать работу.

В ваш index.html head добавьте следующее:

Затем при работе с сервером webpack dev используйте эту команду.

—history-api-fallback важная часть

Если вы хостинг в IIS; Добавление этого в мой webconfig решило мою проблему

Вы можете сделать аналогичную конфигурацию для любого другого сервера

Я нашел решение для моего SPA с реагирующим маршрутизатором (Apache). Просто добавьте в .htaccess

Маршрутизатор можно вызывать двумя различными способами, в зависимости от того, происходит ли навигация на клиенте или на сервере. Он настроен для работы на стороне клиента. Ключевым параметром является второй в метод запуска, местоположение ,

Когда вы используете компонент React Router Link, он блокирует навигацию в браузере и вызывает transitionTo для выполнения навигации на стороне клиента. Вы используете HistoryLocation, поэтому он использует API истории HTML5, чтобы завершить иллюзию навигации, имитируя новый URL в адресной строке. Если вы используете старые браузеры, это не сработает. Вам нужно будет использовать компонент HashLocation.

Когда вы нажимаете кнопку обновления, вы обходите весь код React и React Router. Сервер получает запрос на /joblist и должен что-то вернуть. На сервере вам нужно передать запрошенный путь методу run , чтобы он отображал правильное представление. Вы можете использовать ту же карту маршрутов, но вам, вероятно, понадобится другой вызов Router.run . Как указывает Чарльз, вы можете использовать переписывание URL для этого. Другой вариант — использовать сервер node.js для обработки всех запросов и передачи значения пути в качестве аргумента location.

В экспрессе, например, это может выглядеть так:

Обратите внимание, что путь запроса передается в run . Для этого вам понадобится механизм просмотра на стороне сервера, в который вы можете передать обработанный HTML. Существует ряд других соображений, касающихся использования renderToString и запуска React на сервере. Как только страница отображается на сервере, когда ваше приложение загружается в клиент, оно будет отображаться снова, обновляя отображаемый HTML на стороне сервера по мере необходимости.

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

Мой основной JSX содержит это:

Это прекрасно работает для первой подходящей ссылки, но когда: id изменяется в выражениях
, вложенных в страницу сведений об этой модели, URL-адрес изменяется в панели браузера, но содержимое страницы изначально не изменялось, чтобы отразить связанную модель ,

Проблема была в том, что я использовал props.params.id для установки модели в componentDidMount . Компонент монтируется только один раз, поэтому это означает, что первая модель — это та, которая прикреплена на странице, а последующие ссылки изменяют реквизиты, но оставляют страницу неизменной.

Установка модели в состояние компонента как в componentDidMount , так и в componentWillReceiveProps (где она основана на следующих подпорках) решает проблему, и содержимое страницы изменяется, отражая требуемую модель.

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

HistoryApiFallback — это то, что исправило эту проблему для меня. Теперь маршрутизация работает правильно, и я могу обновить страницу или ввести URL-адрес напрямую. Не нужно беспокоиться об обходах на вашем сервере узлов. Этот ответ, очевидно, работает только при использовании веб-пакета.

Источник