Recommended way for using Express.js with React.js?
up vote
1
down vote
favorite
I have found two ways to combine React and Express:
[OPTION 1] ExpressJS serve React static files
Fundamentally, the idea here is to have pre-compiled JavaScript files at your disposal before spinning up the server. And then in Express middleware:
app.use(express.static(path.join(__dirname, '../client/build')));
And then in tandem have other endpoints that execute logic on server-side.
[OPTION 2] Host React files separately
Basically, decouple the logic in entirety of Frontend and Backend with one server just for serving static JS files. And then another Express server for running any queries against the database. And returning simple JSON responses.
Which one is the recommended way? Is there an advantage of using one approach over the other?
node.js reactjs express webpack microservices
asked Nov 7 at 18:30
whatever123
6217
add a comment |
up vote
1
down vote
favorite
I have found two ways to combine React and Express:
[OPTION 1] ExpressJS serve React static files
Fundamentally, the idea here is to have pre-compiled JavaScript files at your disposal before spinning up the server. And then in Express middleware:
app.use(express.static(path.join(__dirname, '../client/build')));
And then in tandem have other endpoints that execute logic on server-side.
[OPTION 2] Host React files separately
Basically, decouple the logic in entirety of Frontend and Backend with one server just for serving static JS files. And then another Express server for running any queries against the database. And returning simple JSON responses.
Which one is the recommended way? Is there an advantage of using one approach over the other?
node.js reactjs express webpack microservices
asked Nov 7 at 18:30
whatever123
6217
I have not heard of a recommended way and I have built several Express with React apps. What does your app do? What is your goal?
– Daniel
Nov 8 at 3:32
I am working on an app that already exists in production. But I was wondering if they took the correct approach. The app, itself, has two portals depending on the type of user (think teacher/student exchanging homeworks). In addition to that, it also has another app that has a separate frontend (think code submission environment).
– whatever123
Nov 8 at 4:20
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
I have found two ways to combine React and Express:
[OPTION 1] ExpressJS serve React static files
Fundamentally, the idea here is to have pre-compiled JavaScript files at your disposal before spinning up the server. And then in Express middleware:
app.use(express.static(path.join(__dirname, '../client/build')));
And then in tandem have other endpoints that execute logic on server-side.
[OPTION 2] Host React files separately
Basically, decouple the logic in entirety of Frontend and Backend with one server just for serving static JS files. And then another Express server for running any queries against the database. And returning simple JSON responses.
Which one is the recommended way? Is there an advantage of using one approach over the other?
node.js reactjs express webpack microservices
asked Nov 7 at 18:30
whatever123
6217
I have found two ways to combine React and Express:
[OPTION 1] ExpressJS serve React static files
Fundamentally, the idea here is to have pre-compiled JavaScript files at your disposal before spinning up the server. And then in Express middleware:
app.use(express.static(path.join(__dirname, '../client/build')));
And then in tandem have other endpoints that execute logic on server-side.
[OPTION 2] Host React files separately
Basically, decouple the logic in entirety of Frontend and Backend with one server just for serving static JS files. And then another Express server for running any queries against the database. And returning simple JSON responses.
Which one is the recommended way? Is there an advantage of using one approach over the other?
node.js reactjs express webpack microservices
node.js reactjs express webpack microservices
asked Nov 7 at 18:30
whatever123
6217
asked Nov 7 at 18:30
whatever123
6217
asked Nov 7 at 18:30
whatever123
6217
asked Nov 7 at 18:30
whatever123
6217
asked Nov 7 at 18:30
whatever123
6217
6217
I have not heard of a recommended way and I have built several Express with React apps. What does your app do? What is your goal?
– Daniel
Nov 8 at 3:32
I am working on an app that already exists in production. But I was wondering if they took the correct approach. The app, itself, has two portals depending on the type of user (think teacher/student exchanging homeworks). In addition to that, it also has another app that has a separate frontend (think code submission environment).
– whatever123
Nov 8 at 4:20
add a comment |
I have not heard of a recommended way and I have built several Express with React apps. What does your app do? What is your goal?
– Daniel
Nov 8 at 3:32
I am working on an app that already exists in production. But I was wondering if they took the correct approach. The app, itself, has two portals depending on the type of user (think teacher/student exchanging homeworks). In addition to that, it also has another app that has a separate frontend (think code submission environment).
– whatever123
Nov 8 at 4:20
I have not heard of a recommended way and I have built several Express with React apps. What does your app do? What is your goal?
– Daniel
Nov 8 at 3:32
I have not heard of a recommended way and I have built several Express with React apps. What does your app do? What is your goal?
– Daniel
Nov 8 at 3:32
I am working on an app that already exists in production. But I was wondering if they took the correct approach. The app, itself, has two portals depending on the type of user (think teacher/student exchanging homeworks). In addition to that, it also has another app that has a separate frontend (think code submission environment).
– whatever123
Nov 8 at 4:20
I am working on an app that already exists in production. But I was wondering if they took the correct approach. The app, itself, has two portals depending on the type of user (think teacher/student exchanging homeworks). In addition to that, it also has another app that has a separate frontend (think code submission environment).
– whatever123
Nov 8 at 4:20
add a comment |
1 Answer
1
active
oldest
votes
up vote
2
down vote
This is an opinionated question, and so I can only give an opinionated response.
I personally recommend OPTION 1 because you'll run into Cross-Origin-Resource-Sharing (CORS) issues in a number of places when you decouple your front and back ends. This isn't to say that it can't be done, but it will be an annoying thing you'll have to deal with.
With option 2 you'll also most likely have to be sending any requests to your back end with absolute URL paths, which can be very tough to maintain when an application scales.
With option 1 you'll have more flexibility, less to maintain, and less annoying workarounds to implement.
answered Nov 7 at 21:45
Mike Abeln
1586
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
2
down vote
This is an opinionated question, and so I can only give an opinionated response.
I personally recommend OPTION 1 because you'll run into Cross-Origin-Resource-Sharing (CORS) issues in a number of places when you decouple your front and back ends. This isn't to say that it can't be done, but it will be an annoying thing you'll have to deal with.
With option 2 you'll also most likely have to be sending any requests to your back end with absolute URL paths, which can be very tough to maintain when an application scales.
With option 1 you'll have more flexibility, less to maintain, and less annoying workarounds to implement.
answered Nov 7 at 21:45
Mike Abeln
1586
add a comment |
up vote
2
down vote
This is an opinionated question, and so I can only give an opinionated response.
I personally recommend OPTION 1 because you'll run into Cross-Origin-Resource-Sharing (CORS) issues in a number of places when you decouple your front and back ends. This isn't to say that it can't be done, but it will be an annoying thing you'll have to deal with.
With option 2 you'll also most likely have to be sending any requests to your back end with absolute URL paths, which can be very tough to maintain when an application scales.
With option 1 you'll have more flexibility, less to maintain, and less annoying workarounds to implement.
answered Nov 7 at 21:45
Mike Abeln
1586
add a comment |
up vote
2
down vote
up vote
2
down vote
This is an opinionated question, and so I can only give an opinionated response.
I personally recommend OPTION 1 because you'll run into Cross-Origin-Resource-Sharing (CORS) issues in a number of places when you decouple your front and back ends. This isn't to say that it can't be done, but it will be an annoying thing you'll have to deal with.
With option 2 you'll also most likely have to be sending any requests to your back end with absolute URL paths, which can be very tough to maintain when an application scales.
With option 1 you'll have more flexibility, less to maintain, and less annoying workarounds to implement.
answered Nov 7 at 21:45
Mike Abeln
1586
This is an opinionated question, and so I can only give an opinionated response.
I personally recommend OPTION 1 because you'll run into Cross-Origin-Resource-Sharing (CORS) issues in a number of places when you decouple your front and back ends. This isn't to say that it can't be done, but it will be an annoying thing you'll have to deal with.
With option 2 you'll also most likely have to be sending any requests to your back end with absolute URL paths, which can be very tough to maintain when an application scales.
With option 1 you'll have more flexibility, less to maintain, and less annoying workarounds to implement.
answered Nov 7 at 21:45
Mike Abeln
1586
answered Nov 7 at 21:45
Mike Abeln
1586
answered Nov 7 at 21:45
Mike Abeln
1586
answered Nov 7 at 21:45
Mike Abeln
1586
1586
add a comment |
add a comment |
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%2f53195626%2frecommended-way-for-using-express-js-with-react-js%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
I have not heard of a recommended way and I have built several Express with React apps. What does your app do? What is your goal?
– Daniel
Nov 8 at 3:32
I am working on an app that already exists in production. But I was wondering if they took the correct approach. The app, itself, has two portals depending on the type of user (think teacher/student exchanging homeworks). In addition to that, it also has another app that has a separate frontend (think code submission environment).
– whatever123
Nov 8 at 4:20