Mixing
Serve ReactJS app with JSON data pre-populated
I would like to serve up a ReactJS Single Page App from a nodeJS server and pass up some JSON data at the same time.
I have user credentials and some other user specific data that i would like pre-populated into my page and avoid making multiple round trips to the server.
How do i pass a JSON object to the client at request time and have it available to my React app
var path = require('path');
const express = require('express');
const app = express();
const port = process.env.PORT;
app.use(express.static('dist'));
app.get('/*', function(req, res) {
res.sendFile(path.join(__dirname, '../../dist/index.html'));
});
app.listen(port, () => console.log(`Running on port ${port}.`));
node.js reactjs express
asked Nov 20 '18 at 11:13
JohnnyJohnny
116211
add a comment |
I would like to serve up a ReactJS Single Page App from a nodeJS server and pass up some JSON data at the same time.
I have user credentials and some other user specific data that i would like pre-populated into my page and avoid making multiple round trips to the server.
How do i pass a JSON object to the client at request time and have it available to my React app
var path = require('path');
const express = require('express');
const app = express();
const port = process.env.PORT;
app.use(express.static('dist'));
app.get('/*', function(req, res) {
res.sendFile(path.join(__dirname, '../../dist/index.html'));
});
app.listen(port, () => console.log(`Running on port ${port}.`));
node.js reactjs express
asked Nov 20 '18 at 11:13
JohnnyJohnny
116211
The SSR guide in the Redux documentation might give some insights even though you are not using Redux.
– Tholle
Nov 20 '18 at 11:22
add a comment |
I would like to serve up a ReactJS Single Page App from a nodeJS server and pass up some JSON data at the same time.
I have user credentials and some other user specific data that i would like pre-populated into my page and avoid making multiple round trips to the server.
How do i pass a JSON object to the client at request time and have it available to my React app
var path = require('path');
const express = require('express');
const app = express();
const port = process.env.PORT;
app.use(express.static('dist'));
app.get('/*', function(req, res) {
res.sendFile(path.join(__dirname, '../../dist/index.html'));
});
app.listen(port, () => console.log(`Running on port ${port}.`));
node.js reactjs express
asked Nov 20 '18 at 11:13
JohnnyJohnny
116211
I would like to serve up a ReactJS Single Page App from a nodeJS server and pass up some JSON data at the same time.
I have user credentials and some other user specific data that i would like pre-populated into my page and avoid making multiple round trips to the server.
How do i pass a JSON object to the client at request time and have it available to my React app
var path = require('path');
const express = require('express');
const app = express();
const port = process.env.PORT;
app.use(express.static('dist'));
app.get('/*', function(req, res) {
res.sendFile(path.join(__dirname, '../../dist/index.html'));
});
app.listen(port, () => console.log(`Running on port ${port}.`));
node.js reactjs express
node.js reactjs express
asked Nov 20 '18 at 11:13
JohnnyJohnny
116211
asked Nov 20 '18 at 11:13
JohnnyJohnny
116211
asked Nov 20 '18 at 11:13
JohnnyJohnny
116211
asked Nov 20 '18 at 11:13
JohnnyJohnny
116211
asked Nov 20 '18 at 11:13
JohnnyJohnny
116211
116211
The SSR guide in the Redux documentation might give some insights even though you are not using Redux.
– Tholle
Nov 20 '18 at 11:22
add a comment |
The SSR guide in the Redux documentation might give some insights even though you are not using Redux.
– Tholle
Nov 20 '18 at 11:22
The SSR guide in the Redux documentation might give some insights even though you are not using Redux.
– Tholle
Nov 20 '18 at 11:22
The SSR guide in the Redux documentation might give some insights even though you are not using Redux.
– Tholle
Nov 20 '18 at 11:22
add a comment |
1 Answer
1
active
oldest
votes
I can suggest you add a script tag into your index.html file. Like below
<script>
window._DATA_={ key: 'value', .....}
</script>
Now in your react application, use the key window._DATA_ to get the data that you sent from the server. In this approach, the problem is that you can't send dynamic data.
To achieve that you may need to use the template libraries. For example pug, nunjucks, ejs, etc.
Below is the example of using pug.
Your express route will look like this.
app.get('/*', function(req, res) {
res.render('index', data);
});
// End of your pug file looks like
...
...
script.
var window._DATA_= !{JSON.stringify(data)}
If you want to add scripts files dynamically then you can use html-webpack-pug-plugin.
For more info
https://www.npmjs.com/package/html-webpack-pug-plugin
answered Nov 21 '18 at 4:31
Akhil PAkhil P
4741617
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53391772%2fserve-reactjs-app-with-json-data-pre-populated%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I can suggest you add a script tag into your index.html file. Like below
<script>
window._DATA_={ key: 'value', .....}
</script>
Now in your react application, use the key window._DATA_ to get the data that you sent from the server. In this approach, the problem is that you can't send dynamic data.
To achieve that you may need to use the template libraries. For example pug, nunjucks, ejs, etc.
Below is the example of using pug.
Your express route will look like this.
app.get('/*', function(req, res) {
res.render('index', data);
});
// End of your pug file looks like
...
...
script.
var window._DATA_= !{JSON.stringify(data)}
If you want to add scripts files dynamically then you can use html-webpack-pug-plugin.
For more info
https://www.npmjs.com/package/html-webpack-pug-plugin
answered Nov 21 '18 at 4:31
Akhil PAkhil P
4741617
add a comment |
I can suggest you add a script tag into your index.html file. Like below
<script>
window._DATA_={ key: 'value', .....}
</script>
Now in your react application, use the key window._DATA_ to get the data that you sent from the server. In this approach, the problem is that you can't send dynamic data.
To achieve that you may need to use the template libraries. For example pug, nunjucks, ejs, etc.
Below is the example of using pug.
Your express route will look like this.
app.get('/*', function(req, res) {
res.render('index', data);
});
// End of your pug file looks like
...
...
script.
var window._DATA_= !{JSON.stringify(data)}
If you want to add scripts files dynamically then you can use html-webpack-pug-plugin.
For more info
https://www.npmjs.com/package/html-webpack-pug-plugin
answered Nov 21 '18 at 4:31
Akhil PAkhil P
4741617
add a comment |
I can suggest you add a script tag into your index.html file. Like below
<script>
window._DATA_={ key: 'value', .....}
</script>
Now in your react application, use the key window._DATA_ to get the data that you sent from the server. In this approach, the problem is that you can't send dynamic data.
To achieve that you may need to use the template libraries. For example pug, nunjucks, ejs, etc.
Below is the example of using pug.
Your express route will look like this.
app.get('/*', function(req, res) {
res.render('index', data);
});
// End of your pug file looks like
...
...
script.
var window._DATA_= !{JSON.stringify(data)}
If you want to add scripts files dynamically then you can use html-webpack-pug-plugin.
For more info
https://www.npmjs.com/package/html-webpack-pug-plugin
answered Nov 21 '18 at 4:31
Akhil PAkhil P
4741617
I can suggest you add a script tag into your index.html file. Like below
<script>
window._DATA_={ key: 'value', .....}
</script>
Now in your react application, use the key window._DATA_ to get the data that you sent from the server. In this approach, the problem is that you can't send dynamic data.
To achieve that you may need to use the template libraries. For example pug, nunjucks, ejs, etc.
Below is the example of using pug.
Your express route will look like this.
app.get('/*', function(req, res) {
res.render('index', data);
});
// End of your pug file looks like
...
...
script.
var window._DATA_= !{JSON.stringify(data)}
If you want to add scripts files dynamically then you can use html-webpack-pug-plugin.
For more info
https://www.npmjs.com/package/html-webpack-pug-plugin
answered Nov 21 '18 at 4:31
Akhil PAkhil P
4741617
answered Nov 21 '18 at 4:31
Akhil PAkhil P
4741617
answered Nov 21 '18 at 4:31
Akhil PAkhil P
4741617
answered Nov 21 '18 at 4:31
Akhil PAkhil P
4741617
4741617
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53391772%2fserve-reactjs-app-with-json-data-pre-populated%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
The SSR guide in the Redux documentation might give some insights even though you are not using Redux.
– Tholle
Nov 20 '18 at 11:22