0
私はmongoDBと対話するためのExpress APIを使って作成した反応アプリを持っています。私は今、私のserver.jsファイルにサーバー側のレンダリングを設定しようとしています。なぜ私のクライアントがサービスされているのlocalhost:3000ではなく、私のAPIポートlocalhost:3899/apiでブラウザで文字列がレンダリングされているだけです。クライアントの代わりにAPIポート上でサーバ側のレンダリングを行う
私がcurl http://localhost:3899になると、私のコンソールにhtml文字列が表示されます。私がcurl http://localhost:3000のとき、私はpublic/index.htmlスケルトンを取得します。
クライアントとサーバーのディレクトリが同じレベルにあります。
- node_modules
- 反応-UI
- サーバー
...
//server.js
import express from 'express';
import path from 'path';
import React from 'react';
import 'ignore-styles';
import ReactDOMServer from 'react-dom/server';
import render from './render';
import App from '../react-ui/src/App';
import mongoose from 'mongoose';
import cors from 'cors';
import bodyParser from 'body-parser';
import Appointment from './model/appointments';
//and create our instances
var app = express();
var router = express.Router();
app.use(express.static(path.resolve(__dirname, '../react-ui/build/static')));
//set our port to either a predetermined port number if you have set
//it up, or 3899
var port = process.env.PORT || 3899;
//db config
mongoose.connect('mongodb://josh11:[email protected]:33162/heroku_tl016m5d');
app.use(cors());
//now we should configure the API to use bodyParser and look for
//JSON data in the request body
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
//now we can set the route path & initialize the API
router.get('/', function(request, response) {
response.render('
<!doctype html>
<html>
<header>
<title>My Universal App</title>
</header>
<body>
<div id='app'>${ReactDOMServer.renderToString(<App />)}</div>
<script src='bundle.js'></script>
</body>
</html>
');
});
//Use our router configuration when we call /api
app.use('/api', router);
//starts the server and listens for requests
app.listen(port, function() {
console.log('api running on port' + port);
});
//adding the /appointments route to our /api router
router.route('/appointments')
//retrieve all appointments from the database
.get(function(request, response) {
//looks at our Appointment Schema
Appointment.find(function(error, appointments) {
if (error)
response.send(error);
//responds with a json object of our database appointments.
response.json(appointments)
});
})
//post new appointment to the database
.post(function(request, response) {
var appointment = new Appointment();
//body parser lets us use the req.body
appointment.appointmentTitle = req.body.appointmentTitle;
appointment.appointmentDate = req.body.appointmentDate;
appointment.appointmentTime = req.body.appointmentTime;
appointment.appointmentDescription = req.body.appointmentDescription;
appointment.appointmentDestination = req.body.appointmentDestination;
appointment.appointmentOrigin = req.body.appointmentOrigin;
appointment.travelMode = req.body.travelMode;
appointment.save(function(error) {
if (error)
response.send(error);
response.json({ message: 'Appointment successfully added!' });
});
});
はどれガイダンスははるかに高く評価されるだろう。環境によって定義されたポート上でアプリケーションを実行するには
は、あなたの環境変数 'PORT'をお持ちですか？ –
私は 'var port = process.env.PORT ||を持っています。 3899;私のAPIのために設定されます。 – CaptainJ
しかし、プログラムを実行する前に環境変数を設定する必要があります。例えばこの 'PORT = 3000 node server.js'を実行してください –