Question

localhost:9400/始终在浏览器中打印我的index.js文件。 /之后的所有网址均按预期工作。我还想知道这是服务器端渲染还是客户端渲染，因为我将bundle.js作为脚本文件发送到index.html中。

index.js：

/ import React from "react"
// import { renderToString } from "react-dom/server"
// import { StaticRouter, matchPath } from "react-router-dom"
// import serialize from "serialize-javascript"
// import App from '../shared/App'
// import routes from '../shared/routes'

process.env.NODE_ENV = process.env.NODE_ENV || 'development';
process.env.PORT = process.env.PORT || 9400;
process.env.MONGO_HOST = process.env.MONGO_HOST || '192.168.1.81';
process.env.JWT_EXPIRE = process.env.JWT_EXPIRE || 200;

var _ = require('lodash');
var path = require('path');

var express = require('express');
var config = require('core-npm').config;
var db = require('core-npm').mongoose;



var app = express();

config.root = path.normalize(__dirname + '/..');
// expose the function to start the server instance
app.startServer = startServer;
app.serverShutdown = serverShutdown;

// Setup Express
require('core-npm').express(app);

var coreNPM = require('core-npm');


/////configure routes for frontend UI routing////////
// app.use('/api/users', coreNPM.userRoutes());

// Setup Routes
require('../../server/routes')(app);

// register the shutdown handler to close the database connection on interrupt signals
process
.on('SIGINT', serverShutdown)
.on('SIGTERM', serverShutdown);



/**
* Create an express http server and return it
* @api private
* @return
*/
function startServer() {
    var server = require('http').createServer(app);
    return server;
}
var coreNPM = require('core-npm');





// start sockets for this instance and start server
app.startServer().listen(app.get('port'), app.get('ip'), function serverStarted() {
    console.log('OPRS App started server on ip %s on port %d, in %s mode',
        app.get('ip'), app.get('port'), app.get('env'));
});



/**
* Shutdown handler
* Closes the database connection on iterrupt and exits the process
* @api private
*/
////enable script if mongodb connection establishment in environment
function serverShutdown() {
    db.connection.close(function connectionClose() {
        console.log('Database connection disconnected through app termination'); 
        process.exit(0);
    });
}

routes.js在快递服务器中：

use strict';
console.log("routes executed");
var path = require('path');
var coreNPM = require('core-npm');
var middleware = coreNPM.middleware;

module.exports = function (app) {

    // extend response with custom methods
    app.use(middleware.extendResponse);

    // default CUD middleware
    app
        .put(middleware.removeReservedSchemaKeywords)
        .patch(middleware.removeReservedSchemaKeywords)
        .delete(middleware.removeReservedSchemaKeywords)
        .post(middleware.removeReservedSchemaKeywords);

        // Insert routes below

        app.use('/api/users', coreNPM.userRoutes());
        app.use('/auth',  coreNPM.auth);


    // All undefined asset or api routes should return a 404
    app.route('/:url(api|auth|components|app|bower_components|assets)/*')
        .get(function invalidRoute(req, res) { return res.notFound();   });

    // All other routes should redirect to the index.html
    app.route('/*')
        .get(function getIndexFile(req, res) {
            console.log("app path from router ============================"+app.get('appPath'));
            res.sendFile('/home/pavan/Downloads/rrssr-master/src/server/index.html');
        });

    // register the default error handler
    app.use(middleware.defaultErrorHandler);
};

我的src中的另一个routes.js：

import Home from './components/Home'
import SignIn from './components/SignIn';

const routes =  [
  {
    path: '/home',
    exact: true,
    component: Home,
  },
  {
    path: '/login',
    exact: true,
    component: SignIn
  },
  {
    path: '/',
    exact: true,
    component: SignIn
  }
]

export default routes

webpack.config.js：

var path = require('path')
var webpack = require('webpack')
var nodeExternals = require('webpack-node-externals')

var browserConfig = {
  entry: './src/browser/index.js',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  module: {
    rules: [
      { test: /\.(js)$/, use: 'babel-loader' },
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      __isBrowser__: "true"
    })
  ]
}

var serverConfig = {
  entry: './src/server/index.js',
  target: 'node',
  externals: [nodeExternals()],
  output: {
    path: __dirname,
    filename: 'server.js',
  },
  module: {
    rules: [
      { test: /\.(js)$/, use: 'babel-loader' },
      {
        test : /\.css$/,
        use : [
        {
        loader : 'style-loader'
        }
        ]
        },
        {
          test : /\.css$/,
          use : [
          {
          loader : 'css-loader'
          }
          ]
          }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      __isBrowser__: "false"
    })
  ]
}

module.exports = [browserConfig, serverConfig]

最后是我的index.html文件

index.html：

  <html>
    <head>
      <title>SSR with RR</title>
      <script src="/bundle.js" defer></script>
    </head>
    <body>
      <div>
        <div id="app"></div>
      </div> 
    </body>
  </html>

localhost：port /打印index.js文件

0 个答案: