-1

We have a React app/website with a Node/Express back-end and a MySQL database. Everything is working locally, but we have run into issues getting the back-end connected with the front-end after it is deployed.

Our client uses GoDaddy shared hosting with cPanel. We were able to successfully deploy the React app, as well as get a standalone Node/Express server running in GoDaddy that can connect to the MySQL database, but have been unsuccessful in connecting the React app to this server.

Here is the connection portion of our server:

app.use(cors({ credentials: true, origin: "http://the-website.com/" }));

const PORT = process.env.PORT || 3000;

app.listen(PORT, () => {
  console.log(`Server is listening on port ${PORT}`);
});

const connection = mysql.createConnection({
  user: "theUser",
  host: "localhost",
  password: "thePassword",
  database: "theDatabase",
});

and here is the contents of the .htaccess file for the React app:

<IfModule mod_rewrite.c>

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>

Is there a way to connect the React app to port 3000 via this .htaccess file?

I came across this StackOverflow answer that used the following code to connect their React app with their Node server:

RewriteEngine on
RewriteRule  (.*)  http://localhost:3000/$1  [P,L]

but I have been unsuccessful getting this solution to work for me.

Alternatively, when we developed the app locally, it used Axios calls like so:

const MoveToProfile = async () => {
      const formData = new FormData();
      formData.append('email', inputEmail.current.value);
      formData.append('password', inputPassword.current.value);
      
      try {
        await axios.post("http://localhost:3000/login", formData).then((response) => {
          if (response.data.auth) {
      ...

After the deploy, we have tried specifying the port in the Axios calls as well:

const MoveToProfile = async () => {
      const formData = new FormData();
      formData.append('email', inputEmail.current.value);
      formData.append('password', inputPassword.current.value);
      
      try {
        await axios.post("http://the-website.com:3001/login", formData).then((response) => {
          if (response.data.auth) {
      ...

but this just causes the pages to time out.

Any insight/help would be greatly appreciated.

OngoGablogian
  • 7
  • 3

1 Answers1

0

2 Options:

  1. Open port 3001 on the server using go-daddy hosting network panel (if there's one) or ufw (firewall) if installed on server (or check godaddy config that port 3001 is active)

    • ufw command: ufw allow 3001

  2. Create a reverse proxy (using the nginx or apache config) for the express app so you can access it - (More Secure IMO)

or: I have Godaddy Shared Web Hosting I need to host node.js website can host site?

krudeboy
  • 9
  • 2