How To Deploy An React App In Apche Web Server In AWS?

In this article we'll explore the process of deploying the React app on an Apache web server and assign a Domain Name to it. We'll go step by step and will cover all the options from deploying app to the Apache installed on local machine to the Apache installed on a remote machine.

Prerequisites

Before deploying a React app on an Apache web server and assigning a domain name to it, ensure you have the following prerequisites:

• React app ready for deployment.
• A registered Domain Name if you want to assign a domain name to it.

Key take Aways

• Installing Apache Webserver on Local and Remote Server.
• Configuring the Virtual Host.
• Various methods to deploy your website on Apache.

What is Apache Web Server?

Apache Web Server, commonly known as Apache is an open-source web server software maintained by The Apache Software Foundation and its contributors. It is used to host websites that handle the request sent by the client by sending the required files like JavaScript, media files, etc.

What is React JS?

It is a free and open-source JavaScript library developed by Facebook, used to create User Interface for Websites. It is a component-based library which allows the developers to create reusable components to create a Single Page Web Application. At core, its design uses Virtual DOM, which renders the parts of DOM which are changed.

Configuring the React App:

1. Create your react app.

2. If you react app created using 'vite' then head to package.json file and then edit the file by adding "production": "vite build --base=./" in the scripts section. Then run npm run production , what this will do is build the react app with adding './' at the start of every URL to tell react app to use relative path instead of absolute.

// package.json file
  
"scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
   "production": "vite build --base=./"              // add this line but not this comment in your package.json file

  },

3. If you had created your react app using traditional means 'npx create-react-app', then you need to add "homepage":"." , in your package.json file. In this dot (.) is used in file to inform React to use relative paths for static assets instead of absolute paths. Now run 'npm run build' to create a production build.

4. Now your React app is ready for deployment.

Deploy to Apache Web Server

There will be main two ways to install Apache-

1. Using XAMPP on Local Machine (For any operating system):

• Utilize XAMPP, a helper tool compatible with any operating system, to deploy the application to Apache on a local machine. XAMPP simplifies the setup process by bundling Apache, MySQL, PHP, and other components into a single package, making it easy to create a local development environment.

2. Direct Deployment on Linux (Local or Remote):

• Deploy the application directly on Apache by downloading and installing Apache on both local Linux machines and remote servers. This approach offers more flexibility and control over the deployment process, allowing users to configure Apache according to their specific requirements and preferences.

Using XAMPP on Local Machine (For any operating system):

Deploy the Website (XAMPP)

1. First download and Install XAMPP by selecting the desired software options while installation which you need and be sure to select Apache.

2. Remember in which folder you are installing XAMPP as that will be used later.

3. Open the XAMPP and click on 'Start' on Apache, the interface will look something like this (may vary depending upon the version you are having)

4. Now head over the folder where you installed the XAMPP , like it may in 'C' drive in windows if you are using default location , or check for the location where you had installed , then select the 'htdocs' folder.

5. Now either create a separate folder like 'React_Websites' folder to keep record of your websites separately, or just paste the 'build' or 'dist' folder in the htdocs folder directly.

Remember you can name your build folder whatever, like vite names it has 'dist'.

6. After pasting the build folder as a subfolder, such as 'http://localhost/react-websites/dist/', the folder becomes accessible via the web address 'localhost/folder-name/build'. Alternatively, if you directly transferred the build or dist folder into the htdocs directory, you can access it using 'http://localhost/build'.

See the Website address in the below image.

Assign the Domain Name to your deployed website (XAMPP)

1. Check the Public IP Address of your machine

2. Now save that on the domain registrar's website to update the DNS records to point the domain name to your IP address.

3. Go to the folder where you installed the XAMPP then go to xampp/apache/conf/httpd.conf file and add this line at the last and save it.

Include conf/extra/httpd-vhosts.conf

4. Now go the xampp\apache\conf\extra\httpd-vhosts.conf and add this line and save it. (don't add the comment)

<VirtualHost *:80>
    ServerName your.domain.name
    DocumentRoot "path to your hosted files"             //like "E:\Softwares\XAMPP\htdocs\react-websites\test"
    <Directory "path to your hosted files">
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

5. Now you have to add the domain to your host file - If you are using windows then you will likely find the hosts file in C:\Windows\System32\drivers\etc\hosts and if you are on Linux the in \etc\hosts , and add this line and save that

127.0.0.1 your.domain.name

6. Now you can access your website at specific domain like this one is accessed at http://ab.a.

Direct Deployment on Linux (Local or Remote)

There can be 2 cases here either on remote server on Virtual Machine or on Local Machine.

We'll assign the domain name at last after discussing both cases as assigning Domain name in Linux is same whether you on remote server or using local PC.

First Case : Using a Remote Server/VM

1. Assuming that you already had a VM created. If not check out this article - Create Linux Virtual Machine in Microsoft Azure or you can create on any platform. Make sure that you had created inbound rule for incoming requests from HTTP (80).

2. Connect to your Machine. I'm using Ubuntu 20.04.6 LTS for this tutorial created on Azure. To connect use ssh command.

ssh username@ip_address

3. First use 'sudo apt update' and then 'sudo apt upgrade' in sequence, you ensure that your VM starts with the most current package information and is up-to-date with the latest software updates, enhancing system security and stability from the outset.

4. Now install the apache2 and provide 'y' yes to every thing asked as it may need to install its dependencies to work perfectly by -

sudo apt install apache2

5. Now after installing check if apache is working by checking its status -

sudo systemctl status apache

6. Now paste the IP address of the VM in the browser window to check if it's working. Apache welcome should open.

7. The Webpage you will see has its index.html file stored on your VM. It is deployed on Apache by default Just like you want to deploy your website, with downloading of Apache that website comes by default with it.

List the items of '/var/www/html' by typing 'ls /var/www/html', you will see the result as 'index.html' the same i told above.

You have to put you build folder inside this 'html' directory , If just put the content of your build directory the your React app will be available at the your VM's IP address and if you will put your build directory then you can access your website using address- 'IP/build-folder-name'

8. To transfer your build directory from your local Machine to your remote server , here we'll use scp [SCP (Secure Copy Protocol) is a command-line tool for secure file transfer between local and remote hosts. It encrypts data during transmission and preserves file attributes.]. Open a CLI tool on your computer -

The syntax is :

scp file.txt user@remotehost:/path/to/destination/

and if you have to send the whole folder then use recursive flag -

scp -r folder-path user@remotehost:/path/to/destination/

9. If you hadn't directly sent your build folder or its content to html folder on remote server then send it by copying/moving them. Like here I sent the 'dist' folder to the home directory of my VM, then I copied the dist folder to the html directory. Just check at last by listing the files of the html directory

10. As now all is set , now type the VM's IP address in your browser window and if you had transferred whole build folder then type that also.

Deploying on Local Linux machine using Apache - Example 2

1. Update your OS packages first then Install the Apache using your machine's package management utilities like apt or yum. I'll take the above machine's example only so will use apt -

sudo apt install apache2

2. Now after installing check if Apache is working by checking its status -

sudo systemctl status apache

3. Now sent you build folder or your React app to the location /var/www/html ,like copying the 'dist' folder :

cp -R dist /var/www/html

4. Now your website is deployed to Apache Web Server , go to your browser and type localhost or your default IP address of your machine 127.0.0.1.

Assign Domain Name to your Website ( Linux - for both Local/Remote Server):

1. First create a Virtual Host file in the directory /etc/apache2/sites-available with file name :-

yourdomain.conf

like for domain name ab.b-

2. Now a new file will be created and will be ready to edit . Write in that file :

<VirtualHost *:80>
    ServerName yourdomain.name
    DocumentRoot /var/www/html/                                                         //Root path for file
    <Directory /var/www/html/>                                                                //Path for directory
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

I have named my build folder as 'web' and transferred it at /var/www/html that's why wrote this in my .conf file

3. Enable the virtual Host file which you created in last step by using a2ensite (Apache2 Enable Site) . a2ensite is used to enable the virtual host site.

sudo a2ensite your_virtualhost_file

like -

sudo a2ensite ab.b.conf

4. Now restart the apache server

sudo systemctl restart apache2

5. Now check the Public IP Address of your machine and then save that on the domain registrar's website to update the DNS records to point the domain name to your IP address.

6. Now check your website by entering the domain name in browser :

Conclusion

So we saw how to deploy a React JS Website in a Apache Webserver in this tutorial, but this isn't limited to this, we can deploy any website with any framework or library to the apache webserver. It was created in order to host websites. Be careful when writing down the commands and when creating the virtual host files and if you want to learn more about the rules and syntaxes for Virtual file to manage the permissions for your website accessibility then better go to the apache's official website.

1. What is Apache Webserver?

Aapche Webserver is a open source software provided and maintained by the Apache Software Foundation which is a non profit foundation, created to host websites. Their aim was to provide a open source HTTP server.

2. Can we deploy any website on Apache ?

Yes, you can deploy any kind of website developed from any library or language , each and every one of them can be deployed on Apache easily.

3. Is Apace Web Server best ?

The answer really depends upon your website requirements and your number of clients, etc because when it comes to very large number of audiences for accessing the website, developers prefer Nginx as it provide faster performance in that situation but still apache is popular choice among developers.

4. Do we really need registered domain name for deploying website ?

Answer depends upon the use availability of website, if you only want to use the website on your local machine then you don't to purchase a domain name but if you want to access your website over the internet from anywhere then you will need the registered domain name as it will point to the public IP address of your Apache server and for that the domain name need to be registered.

5. Why we need to configure the Virtual Host ?

You need to configure the Virtual Host to tell the server to show the website at a specific port and domain, where the website is located on machine, to handle a request for a particular server , differentiate if there are more than one website, do error handling and permissions etc.

brahmbeyond

Follow

Improve

Article Tags :

• DevOps
• Dev Scripter
• Dev Scripter 2024