cPanel Question posted in
The official documentation can be seen here.

Connecting Front-end React to Back-end Nodejs, both hosted on different origins – CPanel

I come to you with a very interesting problem, and after scouring the internet for two whole days i figured I’ll come to you.

I have a front-end React app that is hosted on cPanel, and it’s working nice. Then i built my back-end for it in Node + Express, as a separate project and i deployed it on DigitalOcean. The reason i went on digitalocean for the backend is because my cPanel server doesnt allow me ssh access and their support is unreachable so i had to choose a different option.

API is live aswell, i chose the same domain for my droplet as my React App, lets say example.com.
It’s a RESTful API so routes are /api/v1/…

Now when i try to hit one of my routes ie. example.com/api/v1/gallery, i get a html document as response:

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <link rel="icon" href="/logo-icon.png" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="apple-touch-icon" href="/logo-icon.png" />
    <link rel="manifest" href="/manifest.json" />
    <title>example</title>
    <link href="/static/css/main.58efad5e.chunk.css" rel="stylesheet">
</head>

<body><noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script>
        !function(e){function r(r){for(var n,l,i=r[0],f=r[1],a=r[2],c=0,s=[];c<i.length;c++)l=i[c],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in f)Object.prototype.hasOwnProperty.call(f,n)&&(e[n]=f[n]);for(p&&p(r);s.length;)s.shift()();return u.push.apply(u,a||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var f=t[i];0!==o[f]&&(n=!1)}n&&(u.splice(r--,1),e=l(l.s=t[0]))}return e}var n={},o={1:0},u=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,l),t.l=!0,t.exports}l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="/";var i=this.webpackJsonpedelweiss=this.webpackJsonpedelweiss||[],f=i.push.bind(i);i.push=r,i=i.slice();for(var a=0;a<i.length;a++)r(i[a]);var p=f;t()}([])
    </script>
    <script src="/static/js/2.345244fe.chunk.js"></script>
    <script src="/static/js/main.814906bd.chunk.js"></script>
</body>

</html>

So my question is, is this even possible to do ? And if so what can i do to fix it ?
I think my api and front-end are setup correctly but if you need any more information please tell me so i can share it.

My goal is to have my frontend React app (example.com) hosted on cPanel and my Nodejs API hosted on digitalocean on the same domain (example.com) and i can hit routes example.com/api/v1/gallery.

I hope you guys help me.

Tags:

2

Answers


  1. 0

    @Peter Kartalov, Yes definitely we can do this. One of the solution for this problem is instead of hosting the react app on cPanel, we can serve the react app from the node/express application.

    For this to happen we need to configure our routes in a such way that for example, if the user hits example.com/ we will send the react application (Static index.html) as a response to the browser and anything that is related to the example.com/api we will send the response object back to the client.

    We need to make sure we set proper headers for the request/response objects based on the request.

    Login or Signup to reply.
  2. 0

    As Venkat has stated above, instead of having the React App and Node backend on different sources, you can have both on the same digitalocean droplet which you have setup.

    For this you need to server the build package of your react app and you can use express to serve your front end as a static file. This is documented well in the create-react-app documentation here

    I have build a web app (reference) which follows the same approach of serving the react app using express and the sample code is as follows,

    const express = require("express");
const app = express();

// build is the folder which has my bundled react app
// generate this using 'npm run build' if you are using 'cra'

app.use(express.static(path.join(__dirname, "build")));

// this will serve the index.html file when you open your domain `example.com`

app.get("/*", (req, res) => {
  res.sendFile(path.join(__dirname, "build", "index.html"));
});

// you can specify your API routes here as you normally do

    This will let you host both your frontend and backend on the same host.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search