ReactJS - 使用Express的公共/管理應用程序

我目前正在嘗試使用ReactJS中的管理員的單獨SPA構建單頁應用程序。我開始構建基本結構（我已經看過/閱讀過/隨同4-5端到端教程），但現在我很困惑如何將應用程序的管理部分構建爲單獨的應用程序。我如何能夠快速地在admin.localhost:3000或localhost:3000/admin以及另一個（公共站點）根目錄上爲一個應用程序提供服務？我將如何去重組我的項目？目前我的Gulp設置已將/app中的所有內容捆綁到/public文件夾中。我想我可以想出如何設置Gulp來捆綁這兩個應用程序，我只需要幫助Express和結構。ReactJS - 使用Express的公共/管理應用程序

在此先感謝！

此外，建立ReactJS應用程序後端的任何其他建議將不勝感激 - 這不是你經常在教程中看到的東西，所以我不確定我的出發點是否有效。

以下是我的項目根目錄下的server.js文件。

var config = require('./config'); 

// Models 
var Show = require('./models/show'); 
var People = require('./models/people'); 
var Network = require('./models/network'); 

var app = express(); 

mongoose.connect(config.database); 
mongoose.connection.on('error', function(){ 
    console.info('Error: Could not connect to MongoDB. Did you forget to run `mongod?'); 
}) 

app.set('port', process.env.PORT || 3000); 
app.use(logger('dev')); 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ extended: false })); 
app.use(express.static(path.join(__dirname, 'public'))); 

app.use(function(req, res) { 
    Router.match({ routes: routes.default, location: req.url }, function(err, redirectLocation, renderProps) { 
    if (err) { 
     res.status(500).send(err.message) 
    } else if (redirectLocation) { 
     res.status(302).redirect(redirectLocation.pathname + redirectLocation.search) 
    } else if (renderProps) { 
     var html = ReactDOM.renderToString(React.createElement(Router.RoutingContext, renderProps)); 
     var page = swig.renderFile('views/index.html', { html: html }); 
     res.status(200).send(page); 
    } else { 
     res.status(404).send('Page Not Found') 
    } 
    }); 
}); 

var server = require('http').createServer(app); 
server.listen(app.get('port'), function() { 
    console.log('Express server listening on port ' + app.get('port')); 
});

目前，我的項目的結構，像這樣：

. 
├── Gulpfile.js 
├── app 
│   ├── actions 
│   │   ├── ... 
│   ├── alt.js 
│   ├── components 
│   │   ├── ... 
│   ├── main.js 
│   ├── routes.js 
│   ├── stores 
│   │   ├── ... 
│   └── stylesheets 
│    └── ... 
├── bower.json 
├── config.js 
├── models 
│   ├── ... 
├── package.json 
├── public 
│   ├── css 
│   │   └── main.css 
│   ├── favicon.png 
│   ├── fonts 
│   │   ├── ... 
│   ├── img 
│   │   ├── ... 
│   └── js 
│    ├── bundle.js 
│    ├── bundle.js.map 
│    ├── vendor.bundle.js 
│    └── vendor.js 
├── server.js 
└── views 
    └── index.html

來源

2016-06-08 Taylor Bourne

爲您管理的東西創建一個新的視圖/頁，就像你與你的主頁做了，那麼可以創建一個新的路線「/管理員」或任何你喜歡的返回管理頁面..

app.get('/admin', function(req, res) { 
    res.render('your admin page'); 
});

然後添加一些中間件到航線驗證管理認證

來源

2016-06-08 21:00:52 Geraint

ReactJS - 使用Express的公共/管理應用程序

回答

相關問題