Развертывание React в XAMPP

#javascript #reactjs

Вопрос:

Я новичок в React и пытаюсь развернуть приложение на своей локальной машине с помощью XAMPP. Моя проблема в том, что, когда я попытался получить доступ к веб-странице, ее номер 404 не найден. При использовании npm start он работает должным образом.

введите описание изображения здесь

Я попробовал дать несколько советов по другому аналогичному вопросу, но это все еще не работает. Это мое index.js

 lt;React.StrictModegt;  lt;BrowserRouter basename='/react'gt;  lt;Route exact path="/" component={Home} /gt;  lt;/BrowserRoutergt; lt;/React.StrictModegt;  

И я вставил "homepage": "http://localhost/react/" package.json

 "homepage": "http://localhost/react/",  "name": "admin-dashboard-presensi",  

После этого я запускаю npm run build и перемещаю папку в htdocs/react

введите описание изображения здесь

Это то, что я положил внутрь .htaccess :

 Options -MultiViews RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.html [QSA,L]  

Комментарии:

1. Что у вас в начале npm? По праву, когда вы запускаете npm start, он должен показывать вам номер порта в терминале, поэтому ваш URL-адрес должен быть http://localhost:portnumber

2. Да, он работает правильно при использовании npm start и работает на порту 3000. Но я хочу развернуть его на XAMPP вместо использования npm start

3. Переместите содержимое build папки в htdocs/react нее , а не build в саму папку

4. @Фил, я вижу, большое тебе спасибо. Сейчас это работает.

Ответ №1:

Возможная Ошибка Sincaio:

1 — Вы добавляете URL-адрес в package.json перед сборкой

2 — отсутствует возможность перезапуска сервера XAMPP

3 — убедитесь, что имя сборки папки-react, иначе переименуйте каталог или измените базу lt;BrowserRouter basename='/react'gt; и перестройте

4 — также проверьте, что полный путь к каталогу правильный, и у него есть разрешение, которое позволяет вам его посещать.

Более подробная информация: (Переместите содержимое папки сборки в htdocs/react, а не саму папку сборки =gt; Скопировано с @Phil)

Если вышеперечисленные пункты не работают, вы можете проверить детали ниже: я думаю, вам не хватает хостов и/или конфигурации виртуального хоста:

 lt;VirtualHost localhost:80gt;  ServerName my-website.local  ServerAlias www.my-website.local  ServerAdmin webmaster@my-website.local  DocumentRoot "path/to/your/build"  lt;Directory path/to/your/buildgt;  Options Indexes FollowSymLinks MultiViews  AllowOverride all  Order Deny,Allow  Allow from all  Require all granted  lt;/Directorygt; lt;/VirtualHostgt;   

Также вам необходимо добавить свой новый домен на хосты: vim /etc/hosts и добавить:

 127.0.0.1 my-website.local  

Другая информация может помочь вам, если она отсутствует в вашей настройке

Кроме того, вам необходимо убедиться, что вы поместили файл .htaccess в общий каталог перед сборкой:

 Options -MultiViews RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.html [QSA,L]  

а затем добавьте: "homepage": "http://www.my-website.local" , к package.json

Перестройте снова и перезапустите XAMPP.

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

Комментарии:

1. Основываясь на моем ответе, пункт № 4-это решение проблемы для Ананды (на основе комментариев обсуждается)!