Firstly, I've never use Heroku for hosting, so my solution might be different for your environment
but, I think the whole concept will work for you.
There are no fixed answer for your questions but what I'm thinking right now can be helpful for you :)
There are lots of sub-questions for your questions, so I seperated it.
And I'm not fluent with english so there can be some mis-communication between you and me,
please let me know if there are wrong in what I understood from you question.
Q. But is it possible to render React app by this way?
(What I understood : can react app be hosted by SSR )
A. You can serve react app with SSR using code splitting and server side rendering, you'd better use server-side rendering
for some meta tag and SEO-required pages, unless you need full SSR application.
In case you need full ssr, there are also fancy framework for it, Next.js.
You might already know about this judging by you refered Vercel.
Q. What if I host the React app on another server, maybe Vercel or NGINX or anything, and access the backend service in heroku by using REST API
(What I understood : can react app be hosted with another server?
NGINX = using server instace,
Vercel : using serverless architecture
)
A. Also it can be hosted like that. It seems like this one is more react-like.
But I don't recommend the Vercel for hosting since E-commerce service is required a lot of end point,
Check out the pricing policy of Vercel.
Q. So, let say I am using Heroku for Express backend, does it means that I need to create 2 apps separately instead of combining them together
A. you can host multiple host for computer resource or not. In case, you are planning to multi-host, you might need proxy server to point other servers,
In opposite, for single-host, reverse proxy to point each app.
Q. express-subdomain-handler vs. vhost
A. There are no fixed answer. you could achieve what you want using vhost or express-subdomain-handler. Or Both.
My solution concept is using single server instance with Reverse Proxy.
Let Nginx virtual host your multi apps in single server.
What I recommend:
App list.
- react host - nodejs application
- client api host - nodejs application
- admin react host - nodejs application
- client api host - nodejs application
I used AWS S3 for hosting React apps and
EC2 for API apps.
Structure Concept.
( NS / DNS ) : domain.com points your-ip
|
( Server instance )
|
( Nginx ) - virtual hosting
|
( www.domain.com ) --- > client react host : ( node app for server side rendering ) : React rendered file for each route.
Or you can just respond with index.html for all route for skipping SSR
|
( api.domain.com ) --- > clinet api host : api.domain.com/what, api.domain.com/what/ever?you=want
|
( admin.domain.com ) ---> admin react host : admin.domain.com/* : sending index.html //static hosting and let all route point for index.html
|
( admin-api.domain.com ) ---> admin react host : Only if you want to seperate. Or you can combine this with api.domain.com using subrouter
How to build the Structure.
Step 1. Server hosting.
I don't know much about Heroku but I guess there are aws ec2-like service(cloud computing) and s3-like service(static file service),
This can be single or multiple depending your choice. let's say you wanna go with single server and use virtual host for multiple service end point.
Step 2. Network layer setting
let's say name-server and DNS server part is network layer. I used AWS Route 53 for this.
2.1 Buy an domain
www.your-service.com
2.2 Add some CNAME to point your web-server host
- your-service.com,
- www.your-service.com
- api.your-service.com,
- admin.your-service.com
.
.
.
Step 3.Create nodejs application (application layer)
I'm assuming that you had one already judging by code in your question.
ubuntu@ip-your-ip:~/project$ ls
api cli admin admin-api config libraries middlewares models node_modules package.json
ubuntu@ip-your-ip:~/project$ cd api
ubuntu@ip-your-ip:~/project/api$ ls
README.md app.js bin config.json pm2.config.js node_modules package.json routes
ubuntu@ip-your-ip:~/project/api$ pm2 start pm2.config
PM2 is node application deamonizer, you can use any daemon for this.
PM2 reference.
https://pm2.keymetrics.io/docs/usage/application-declaration/
Step 3. Nginx points for nodejs application
nano /etc/nginx/nginx.conf
listen 80;
server_name client.domain.com;
location / {
proxy_http_version 1.1;
proxy_pass http://localhost:3000;
}
listen 80;
server_name api.domain.com;
location / {
proxy_http_version 1.1;
proxy_pass http://localhost:3001;
}
listen 80;
server_name admin.domain.com;
location / {
proxy_http_version 1.1;
proxy_pass http://localhost:4000;
}
listen 80;
server_name admin-api.domain.com;
location / {
proxy_http_version 1.1;
proxy_pass http://localhost:4001;
}
I hope this solution is helpful for you :)
