Publicar um sistema react no Xamp - Resolvido

Fala ai Hermogenes, tudo bem? Você precisa realizar algumas configurações e precisa ver se montou a estrutura de pastas corretas.

Eu particularmente não acho que faz sentido publicar uma aplicação React dentro do XAMPP.

Recomendaria utilizar outro servidor, como por exemplo o NGINX:

https://codeburst.io/how-to-setup-nginx-for-react-a504f38f95ed

Espero ter ajudado

observando os erros percebo que falta algo na url observe a url errada http://localhost/static/css/main.d7314351.chunk.css

a url certa seria: http://localhost/NOME_MEU_PROJETO/static/css/main.d7314351.chunk.css

No entanto no browser estou chamando assim: <http://localhost/NOME_MEU_PROJETO/build

será que tem haver com algo relacionado a rotas?

att.

O que você pode tentar fazer é dentro do seu package.json definir um baseURL indicando a URL base para carregamento, no caso:

"baseURL": "http://localhost/NOME_MEU_PROJETO

Pode ser que dê certo, precisaria testar para validar a ideia.

Espero ter ajudado.

Olá Mateus, estou tentando usar com o não tá dando acerto, já instalei o react router < import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker';

import {Router, Route} from 'react-router';

ReactDOM.render(

(<Router basename={'/cdc-admin'}>
    <Route path='/' component={App}/>    
</Router>)

, document.getElementById('root'));

serviceWorker.unregister();

A questão é configurar o app react rodar em subpasta http://localhost/cdc-admin e não em http://localhost/ isso acontece tanto se eu executar no node ou no apache

eu preciso executar neste caminho: http://localhost/cdc-admin

no entanto o projeto está funcionando apenas neste caminho http://localhost

Eu tenho algumas dicas de como fazer isso, mas elas não se aplicam ao seu caso, elas são para servidores com Node

https://medium.com/@svinkle/how-to-deploy-a-react-app-to-a-subdirectory-f694d46427c1 https://dev.to/brettcnelson/getting-create-react-app-to-work-with-custom-domains-on-github-user-project-pages-2hp2

Eu fiz um teste rápido utilizando o XAMPP e usando um sistema pronto. Eu consegui fazer funcionar, mas de uma forma que você não deve usar no seu trabalho. A pasta build tem um arquivo HTML, o index.html. Eu editei o arquivo e alterei todos os caminhos, ao invés de "/arquivo.css" para "/meu_subdominio/arquivo.css'

No meu caso, a aplicação usa o "HashRouter".

Aqui tem um exemplo que eu acho que pode te ajudar

https://skryvets.com/blog/2018/09/20/an-elegant-solution-of-deploying-react-app-into-a-subdirectory/

Grande Daniel, o meu package.json está asim onde exatamente eu tenho que acrescentar atributo **homepage? < { "name": "cdc-admin", "version": "0.1.0", "private": true, "dependencies": { "express": "^4.17.1", "react": "^16.10.2", "react-dom": "^16.10.2", "react-router": "^5.1.2", "react-router-dom": "^5.1.2", "react-scripts": "3.2.0" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }

Você pode colocar no começo do seu arquivo, aqui tem um exemplo:

{
  "name" : "underscore",
  "description" : "JavaScript's functional programming helper library.",
  "homepage" : "http://documentcloud.github.com/underscore/",
  "keywords" : ["util", "functional", "server", "client", "browser"],
  "author" : "Jeremy Ashkenas <jeremy@documentcloud.org>",
  "contributors" : [],
  "dependencies" : [],
  "repository" : {"type": "git", "url": "git://github.com/documentcloud/underscore.git"},
  "main" : "underscore.js",
  "version" : "1.1.6"
}

Aqui tem um post com um problema igual ao seu:

https://pt.stackoverflow.com/questions/417344/deploy-site-react-em-subpasta-no-iis

Fala Hermogenes, tudo bem? Essa configuração não é responsabilidade do React Router e sim do seu servidor.

Você precisa configurar o dominio da aplicação e qual arquivo ele deve retornar, basicamente é uma configuração de rota no lado do servidor.

O que você precisa fazer é adicionar um * para sempre retornar o index.html:

http://localhost:3000/meu-projeto/* => index.html

Essa configuração varia de servidor para servidor, no caso do XAMPP:

https://blog.mxcursos.com/criar-virtual-host-com-xampp/

Esse conceito é também conhecido como Virtual Host.

Espero ter ajudado.

Obrigado Daniel Bins era isso mesmo que você disse sobre homepage o sistema reconheceu os css e js estou seguindo esse tutorial aqui parecido com o que você indicou https://medium.com/@svinkle/how-to-deploy-a-react-app-to-a-subdirectory-f694d46427c1

** mas apesar de tudo ao subir o sistema abre uma tela em branco mas não é mostrado erro algum de script ou outra coisa, deve ser um detalhe que está faltando, vou tentar identificar

*Obrigado Mateus, * no apache uso o .htacess para contornar o problema com esses comandos Options +FollowSymLinks -SymLinksIfOwnerMatch -MultiViews -Indexes

RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d [OR] RewriteCond %{REQUEST_FILENAME} *.php$ RewriteRule ^(.*)$ /cdc-admin/index.php?url=$1 [QSA,L]

Olá pessoal, Mateus e Daniel! resolvido muito obrigado pela ajuda basicamente a solução estava na ultima dica do Daniel se alguém tiver a mesma duvida e eu sei que vai ter segue os links de referencias https://create-react-app.dev/docs/deployment/ https://medium.com/@svinkle/how-to-deploy-a-react-app-to-a-subdirectory-f694d46427c1 https://skryvets.com/blog/2018/09/20/an-elegant-solution-of-deploying-react-app-into-a-subdirectory/ https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string

Mas em resumo o pulo do gato é configurar o packege.json colocando a tag: "homepage" : "http://localhost_ou_nome dominio/Nome_projeto",

Obs: os tutoriais recomenda utilizar o Router mas por algum motivo não funcionou pra mim então fiz assim:

ReactDOM.render(

// // <Route path={${process.env.PUBLIC_URL}/} //component={App} /> // */ , document.getElementById('root'));

serviceWorker.unregister();

Boa Hermogenes, fico feliz que tenha resolvido o problema.

Sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.