How to use React JS and Node JS App without Port

Use Apache as a proxy server using ProxyPass and ProxyPassReverse to access internal IPs from an external machine

As we know every node js application is running on particular port. and we think about to host on production server, we have to run on port there. As simplicity we don't want to disturb the internal of Node JS.

Let's take an example here. If you Node JS application is running on port 3001 and your base URL is something like http://MY_IP_ADDRESS:3001 but you want something like http://MY_IP_ADDRESS/api. So this can be hack by playing with apache default configurations.

Steps to follow

Use Apache as a proxy server to access internal IPs from an external machine

Install apache2. On Ubuntu

sudo apt-get install apache2

Enable the various modules needed. You can do that with the a2enmod tool:

sudo a2enmod proxy
sudo a2enmod proxy_http
sudo a2enmod proxy_ajp
sudo a2enmod rewrite
sudo a2enmod deflate
sudo a2enmod headers
sudo a2enmod proxy_balancer
sudo a2enmod proxy_connect
sudo a2enmod proxy_html

Configure Apache by editing the /etc/apache2/sites-available/000-default.conf file to read:

sudo nano /etc/apache2/sites-available/000-default.conf

<VirtualHost *:*>
    ProxyPreserveHost On

    # Servers to proxy the connection, or;
    # List of application servers:
    # Usage:
    # ProxyPass / http://[IP Addr.]:[port]/
    # ProxyPassReverse / http://[IP Addr.]:[port]/

    # Example: 
    ProxyPass / http://localhost:3000/
    ProxyPassReverse / http://localhost:3000/
    ServerName localhost
</VirtualHost>

Restart the apache2 service

 sudo service apache2 restart

React JS and Node JS API ProxyPass Configuration

<VirtualHost *:80>

    ServerName marutiincjaipur.com
    DocumentRoot /var/www/html

    <Directory "/var/www/html/console">

        RewriteEngine on
        #Don't rewrite files or directories
        RewriteCond %{REQUEST_FILENAME} -f [OR]
        RewriteCond %{REQUEST_FILENAME} -d
        RewriteRule ^ - [L]
        #Rewrite everything else to index.html to allow html5 state links
        RewriteRule ^ index.html [L]
    </Directory>

    #ProxyPass /console http://127.0.0.1:3000/
    #ProxyPassReverse /console http://127.0.0.1:3000/

    ProxyPass /web-api/ http://127.0.0.1:3001/
    ProxyPassReverse /web-api/ http://127.0.0.1:3001/
</VirtualHost>

For Https? If your site is having ssl installed, and want to run website url with https:// then you need to update the default-ssl.conf file also. please follow the above code.

<VirtualHost *:443>
  ServerAdmin [email protected]
  ServerName  www.koffeewithkode.com
  ServerAlias koffeewithkode.com

  SSLEngine On
  SSLProxyEngine On
  SSLCertificateFile "/etc/ssl/private/server.crt"
  SSLCertificateKeyFile "/etc/ssl/private/server.key"
  #SSLCertificateChainFile "/home/vas/synsis.live/certs/intermediate.pem"

  ProxyRequests Off

    #Admin
    ProxyPass /admin http://localhost:4380/
    ProxyPassReverse /admin http://localhost:4380/

    ProxyPass /restaurant http://localhost:4382/
    ProxyPassReverse /restaurant http://localhost:4382/

    ProxyPass /sub-admin http://localhost:4385/
    ProxyPassReverse /sub-admin http://localhost:4385/

    #API
    ProxyPass /admin-api http://localhost:4381/
    ProxyPassReverse /admin-api http://localhost:4381/

    ProxyPass /restaurant-api http://localhost:4379/
    ProxyPassReverse /restaurant-api http://localhost:4379/

</VirtualHost>

Enjoy 🙂 react app without portreact app without port