Bonjour à tous,

Voilà j'ai donc développé une application sous React (create-react-app) pour la partie frontend et lors du build je n'arrive pas à avoir le résultat que je voudrais.

J'arrive à build et à accéder à mon site mais pas de façon propre, je m'explique. Lorsque je tape l'url du serveur où est déployée l'application j'arrive sur cette page

https://ibb.co/nOkARU

J'arrive ensuite à accéder à mon site en cliquant sur build mais ce n'est pas ce que je veux.

Voici les morceaux de codes concernés.

Le homepage de mon package.json est bien défini à "." ("./")

Voici maintenant mon fichier .conf dans /etc/httpd/conf.d/

Listen 9090

<VirtualHost *:9090>
DocumentRoot /var/www/html/<DossierFrontEnd>
<Directory "/var/www/html/<DossierFrontEnd>">
    #
    # Possible values for the Options directive are "None", "All",
    # or any combination of:
    #   Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews
    #
    # Note that "MultiViews" must be named *explicitly* --- "Options All"
    # doesn't give it to you.
    #
    # The Options directive is both complicated and important.  Please see
    # http://httpd.apache.org/docs/2.4/mod/core.html#options
    # for more information.
    #
    AllowOverride All
    #
    # Controls who can get stuff from this server.
    #
    Require all granted
</Directory>
</VirtualHost>

J'ai aussi créé un fichier .htaccess dans le dossier public de l'application:

Options -MultiViews
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]
RewriteBase /

J'utilise react-router-dom pour effectuer la navigation entre mes pages

Mon fichier App.js se trouvant dans src/containers

Ceci est le contenu de mon composant qui est appelé par index.js

class App extends Component {
  render() {
    return (
      <div className="App">
        <Header />
        <Switch>
          <Route exact path={`/`} component={SaisiePage}/>
          <Route path={`/saisie/`} component={SaisiePage}/>
          <Route path={`/carto/`} component={Cartographie}/>
          <Route path={`/carnet/`} component={Carnet}/>
          <Route component={Page404} />
        </Switch>
        <Footer />
      </div>
    );
  }
}

Et maintenant mon Header où sont placés les liens qui permettent le click.

class Header extends React.Component {
   componentDidMount() {
   }

   render () {
     return (
       <Navbar>
           <Navbar.Header>
             <Navbar.Brand>
               <Link to="/carnet/">AppName</Link>
             </Navbar.Brand>
           </Navbar.Header>
           <Nav>
             <NavItem eventKey={1}>
              <Link to="/saisie/" className="btn btn-link">Saisie</Link>
             </NavItem>
             <NavItem eventKey={2}>
              <Link to="/carnet/" className="btn btn-link">Tableau de bord</Link>
             </NavItem>
           </Nav>
       </Navbar>
      )
   }
}

Donc voilà j'aurais aimé savoir pourquoi je me retrouve dans ce cas de figure.

Merci d'avance

-
Edité par Clément_44 10 août 2018 à 9:33:34

Bonjour,

J'avais déjà essayé cette solution mais sans succès, en fait le truc c'est que quand j'accède au site via build et que je navigue via les liens cela marche. Mais quand j'essaie d'accéder au site directement en tapant les adresses dans la barre d'url je me prend un 404.

Problème résolu, il fallait rajouter /build à la fin du path de la ligne de DocumentRoot dans mon fichier .conf.