1
현재 ReactJS의 admin 용 별도 SPA로 단일 페이지 응용 프로그램을 빌드하려고합니다. 필자는 기본 구조를 작성하기 시작했는데 (자습서를 끝내고 4-5 끝까지 보았습니다.) 이제는 응용 프로그램의 관리 섹션을 별도의 응용 프로그램으로 빌드하는 방법이 혼란 스럽습니다. admin.localhost:3000 또는 localhost:3000/admin에 하나의 앱을 제공하기 위해 특급을받을 수 있고 루트에 다른 공개 사이트를 제공하려면 어떻게해야하나요? 그리고 어떻게하면 프로젝트를 구조 조정할 수 있을까요? 현재 내 꿀꺽 꿀꺽 소리 설정에는 /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