Comment regrouper une Réagir application dans un sous-répertoire sur un serveur?

J'ai une Réagir application que j'ai développé sur mon localhost. Je veux le copier sur un serveur dans un sous-répertoire appelé vensa.

Mon webpack fichier de configuration ressemble à ça..

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: 'build',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel'
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style', 'css!sass')
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style', 'css')
      },
      {
        test: /\.(png|eot|svg|ttf|woff(2)?)(\?v=\d+\.\d+\.\d+)?/,
        loader: 'url'
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('vensa-dashboard.css')
  ],
  devServer: {
    historyApiFallback: true,
    contentBase: './build'
  }
};

L'index.html fichier ressemble à ceci...

<!DOCTYPE html>
<html>
<head>
  <title>Vensa Development Test</title>
  <link rel="stylesheet" href="/vensa-dashboard.css">
</head>
<body>
  <div class="container"></div>
  <script src="/bundle.js"></script>
</body>
</html>

et mon routes.js fichier est...

import React from 'react';
import { Route, IndexRoute } from 'react-router';
import VensaDashboard from './components/VensaDashboard';
import Inbox from './components/Inbox';
import Todo from './components/Todo';
import Home from './components/Home';

export default (
  <Route path="/" component={VensaDashboard}>
    <IndexRoute component={Home} />
    <Route path="/message" component={Inbox} />
    <Route path="/todo/:todoPage" component={Todo} />
  </Route>
);

Cependant, si je n'il suffit d'exécuter webpack -p et copiez les 3 fichiers sur ce sous-répertoire, il ne fonctionne pas comme le chemin de la racine est / et il ne peut pas trouver les fichiers css et js. Je ne suis pas sûr de ce que (la meilleure façon) à changer (probablement de l'une ou de l'ensemble de ces 3 fichiers) pour qu'il fonctionne dans un sous-répertoire?

La totalité du code source de l'application est ici dans le cas qui aide.

Merci!

Presque semble plus facile de créer un sous-domaine au lieu de l'application, donc je n'ai pas à jouer avec la config de l'application?!

OriginalL'auteur magician11 | 2016-05-23

  1. 20

    Si vous utilisez Réagir Routeur v4, vous devriez être en mesure de définir à l'aide de basename={foobar}.

    <Router history={browserHistory} basename={'foobar'}>
  <Route path="/" component={App} />
</Router>

    Lien vers les docs: https://reacttraining.com/react-router/web/api/BrowserRouter

    Remarque: si vous utilisez créer-réagir-app dans un sous-répertoire que vous voulez aussi de définir "homepage": "/foobar/", dans votre forfait.fichier json. Donc, la production d'accumuler des points dans le droit chemin.

    cela fonctionne Jésus saint il fonctionne merci man, j'ai cherché cette solution pour les jours
    hey! pouvez-vous s'il vous plaît partager un exemple de cela? Je suis aussi coincé avec ce.
    Par exemple <BrowserRouter basename="/calendrier" /> <Lien="/aujourd'hui" /> .. rend <a href="/agenda/aujourd'hui"> à Partir de la documentation.
    Cela fonctionne pour la production, mais je suis toujours à la recherche d'une solution pour le développement sur le port :3000, j'ai utiliser une solution de contournement, par exemple: ajouter manuellement l'inclusion de l'ensemble avec un chemin d'accès relatif (le dev build produit un bsolute chemin de la racine) : j'ai ajouté <script type="text/javascript" src="static/js/bundle.js"></script> index.html
    omg, c'est super. sauvé ma journée, merci beaucoup!!!

    OriginalL'auteur trenthogan

  2. 2

    J'ai dû faire quelque chose de similaire récemment afin d'obtenir une réagir application qui s'exécute dans un sous-répertoire. Essayez de le ci-dessous et voir comment vous vous y prenez.

    import React from 'react';
import { Router, Route, IndexRoute, useRouterHistory  } from 'react-router';
import { createHistory } from 'history';
import VensaDashboard from './components/VensaDashboard';
import Inbox from './components/Inbox';
import Todo from './components/Todo';
import Home from './components/Home';

//specify basename below if running in a subdirectory or set as "/" if app runs in root
const appHistory = useRouterHistory(createHistory)({
  basename: "/vensa"
});

export default (
  <Router history={appHistory} />
    <Route path="/" component={VensaDashboard}>
      <IndexRoute component={Home} />
      <Route path="/message" component={Inbox} />
      <Route path="/todo/:todoPage" component={Todo} />
    </Route>
  </Router>
);

    Vous pouvez également mettre à jour le chemin d'accès à votre bundle.js fichier dans index.html comme indiqué ci-dessous

    <!DOCTYPE html>
<html>
<head>
  <title>Vensa Development Test</title>
  <link rel="stylesheet" href="/vensa-dashboard.css">
</head>
<body>
  <div class="container"></div>
  <script src="bundle.js"></script>
</body>
</html>

    OriginalL'auteur Rusta

  3. 1

    Utiliser le html-webpack-plugin pour générer votre final index.html avec le bon bundle noms automatiquement injecté dans.

    Puis définissez de sortie.publicPath dans votre webpack config dire webpack le sous-répertoire de votre actif sera déployé à:

    output: {
  path: 'build',
  publicPath: "/vensa/",
  filename: 'bundle.js'
},
    Cela ressemble beaucoup à la façon dont il s'est auto génère un fichier HTML avec le bon préfixe de chemin. Ai-je besoin de changer les routes de bien? Je suis [Error] Warning: [react-router] Location "/vensa/" did not match any routes
    Oui je crois que lorsque vous créez l'Histoire de l'objet de votre routeur, il y a une option basepath vous pouvez passer /vensa et puis routeur devrait fonctionner.
    Oui je vois github.com/reactjs/react-router/blob/master/docs/guides/... mais vous ne savez pas comment l'utiliser avec browserHistory que je suis en train de l'utiliser. Connaissez-vous @Brandon ?
    Ne pas utiliser le pré-créé browserHistory. Au lieu de créer votre propre en appelant createHistory - vous comme le premier exemple ici: github.com/reactjs/react-router/blob/master/docs/guides/... l'Utilisation que history les objets que vous créez au lieu de browserHistory.

    OriginalL'auteur Brandon

  4. 1

    Ou vous pouvez utiliser une variable d'environnement pour régler tous vos liens manuellement.

    const ENV = process.env.NODE_ENV || 'local'; //development
const config = {
    publicPath: ENV !== 'production' ? '/' : '/dev/'
};
plugins: ([
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(ENV),
            'process.env.config': JSON.stringify(config)
        })
})

    L'un de vos itinéraires:

    <Route path={process.env.config.publicPath + "account/"} component={Account} />

    Alors vos liens:

    <Link class="panel-close" href={process.env.config.publicPath + "account/"} >Account</Link>

    Cela a très bien fonctionné pour moi. Surtout depuis que je suis en utilisant preact, dont preact-routeur n'est pas vraiment favorable à l'basename en ce moment.

    <Router history={browserHistory} basename={'foobar'}>
  <Route path="/" component={App} />
</Router>

    OriginalL'auteur lastlink

  5. 1

    Ajoutant à trenthogan réponse, nous pouvons attribuer basename à l'emplacement.chemin

    const loc = window.location || {};
<Router history={browserHistory} basename={loc.pathname || 'foobar'}>
  <Route path="/" component={App} />
</Router>

    Avec ce changement, l'application fonctionne même si le sous-répertoire changements de chemin d'accès dans l'avenir.

    En fait, cela ne fonctionne pas lorsque vous accédez directement à une sous-page de votre application, en tant que sous-page, on considère que la page principale et tous les liens seront relatif à /home/sous-page, même si vos fichiers sont dans /home/js.js par exemple
    Oui Larzan vous avez raison lorsque nous passer directement à la page d'un problème, la page affiche désormais le principal contenu de la page. Mais les liens vers les fichiers problème ne vient pas ici, il ne vient que lorsque nous répéter ce comportement une fois de plus. Ont créer une démo pour la même chose.

    OriginalL'auteur Ramanathan Muthuraman

  6. 0

    Dans ma situation, j'avais besoin de l'appui d'un scénario, où il pourrait y avoir de 0 à de nombreux sous-dossiers avec des noms inconnus et de production utilise uniquement les fichiers statiques.

    Dans mon App.js, j'ai défini cette fonction simple:

    const getBasename = path => path.substr(0, path.lastIndexOf('/'));

    Que j'utilise pour définir le nom de base:

    <Router basename={getBasename(window.location.pathname)}>

    Cela fonctionne avec aucun sous-dossier ainsi que de nombreux sous-dossiers et il peut gérer la recharge.

    OriginalL'auteur Ragnar

  7. -1
    var sourcePath = path.resolve(__dirname, 'src', 'index.js');
var buildPath = path.resolve(__dirname, 'vensa');

module.exports = {
    entry: [sourcePath],
    output: {
        path: buildPath,
        filename: '[name]-[hash].js',
        hash: true
    }
    ...
    Pouvez-vous expliquer un peu s'il vous plaît? Il ressemble à l'entrée est la même chose dans ma config './src/index.js' et que le chemin qu'il va construire est vensa. Ce qui se passe avec le nom de fichier et de hachage? Merci @krotov
    Désolé, je suis en utilisant [name] comme je l'ai utiliser différents points d'entrée. [hash] is replaced by the hash of the compilation. Vous pouvez voir plus sur webpack config ici @magician11

    OriginalL'auteur Vladimirs Matusevics