Antonello Zanini for Writech

Posted on Jan 19 • Edited on Oct 26

Deploying and Hosting a React App on an Apache Server

#apache #javascript #react #softwaredevelopment

When I first started developing in React, I thought that — in order to host a React app — it was required that I had a VPS to install Node.js. Additionally, I had always associated Apache with PHP, believing that only PHP apps could be deployed on an Apache server. However, now I realize that neither of these statements is true. In fact, it's entirely possible to deploy and host a React app on an Apache web server; it's even possible to do this on shared hosting. This article aims to outline this process for you so that you don't fall into the same misconceptions that I did!

Step #1: Creating a React App

First of all, you need a React app. If you already have one then you can skip this step.

To create a new React app, I am going to use Create React App.

Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React. — React documentation

Install Create React App with the following command:

npm install -g create-react-app

Run this command to create a new React app called my-app:

npx create-react-app my-app

In the my-app folder you should now have the same files and folders displayed in the picture below:

You can now start coding and developing your React app!

The goal of this article is not to show you how to develop and build a React app. Rather, I will use a simple example of a three-page app from the React Router official documentation.

import React from "react";
import {
  BrowserRouter,
  Switch,
  Route,
  Link
} from "react-router-dom";

export default function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </BrowserRouter>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

Step #2: Configuring package.json

To allow Create React App to produce a running build, add the following property to your package.json file:

"homepage": "https://yourdomain.com"

As explained here, this will allow the Create React App to correctly infer which root path to use in the generated HTML file.

This is what the package.json file looks like:

{
  "name": "my-app",
  "homepage": "https://antonellozanini.com",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.2.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.0",
    "web-vitals": "^0.2.4",
    "react-router-dom": "^5.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Step #3: Building the React App

Use this command to build your React app:

npm run build

As soon as the build process ends, a build folder will be created, ready to be deployed onto your Apache webserver.

Please note: if your React app involves frontend routing this is not enough as you need a .htaccess file. Create a .htaccess file and place it inside the public folder. This way, it will be automatically replicated into the build folder at the end of the build process.

Place the following line in your .htaccess file:

FallbackResource ./index.html

If users try to access a particular page directly without this configuration (for example https://yourdomain.com/about) a 404 error will be returned. This is because that URL does not map to anything in the file system of your server. FallbackResource ensures that index.html is loaded instead of allowing the frontend routing to be applied as expected.

Step #4: Deploying the React App

Now, you are ready to deploy your app! Upload each file from your build folder into your domain's Document Root folder. Any FTP client, like Filezilla, will do. Et voilà!

Bonus: Building for Relative Paths

If you want to deploy your application to a subfolder of your Document Root, you must follow these instructions*.* This also works for subdomains created using Virtual Hosts.

First, update the homepage property of your package.json file accordingly. Let's assume you want to deploy your React app to the test subfolder, then your homepage property should be changed as follows:

"homepage": "https://yourdomain.com/test"

This is what the package.json file would look like:

{
  "name": "my-app",
  "homepage": "https://antonellozanini.com/test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.2.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.0",
    "web-vitals": "^0.2.4",
    "react-router-dom": "^5.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Then, you need to pass "/test" to the basename prop in <BrowserRouter>. This way, your app will be served from the specified subfolder.

This is what App.js would look like:

import React from "react";
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from "react-router-dom";

export default function App() {
    return (
        <Router
            basename={"/test"}
        >
            <div>
                <nav>
                    <ul>
                        <li>
                            <Link to="/">Home</Link>
                        </li>
                        <li>
                            <Link to="/about">About</Link>
                        </li>
                        <li>
                            <Link to="/users">Users</Link>
                        </li>
                    </ul>
                </nav>

                {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
                <Switch>
                    <Route path="/about">
                        <About />
                    </Route>
                    <Route path="/users">
                        <Users />
                    </Route>
                    <Route path="/">
                        <Home />
                    </Route>
                </Switch>
            </div>
        </Router>
    );
}

function Home() {
    return <h2>Home</h2>;
}

function About() {
    return <h2>About</h2>;
}

function Users() {
    return <h2>Users</h2>;
}

Now, you can follow steps 3 and 4 (from earlier on in this tutorial) and everything will work as expected!

You may also be interested in learning how to deploy a React application on Dokku.

Conclusion

Node servers are not required to deploy and host React apps, as I have just shown. This can be achieved without any kind of degradation, and it will also help in maintaining frontend routing. The procedure is easy and can be replicated even on shared hosting (although this can be a bit tricky for relative paths).

Thanks for reading! I hope that you found this article helpful.

The post "Deploying and Hosting a React App on an Apache Server" appeared first on Writech.

DEV Community

Deploying and Hosting a React App on an Apache Server

Step #1: Creating a React App

Step #2: Configuring package.json

Step #3: Building the React App

Step #4: Deploying the React App

Bonus: Building for Relative Paths

Conclusion

Top comments (0)

Read next

Building and Comparing Table Data Made Easy with @libs-jd/table-data-kit

Mastering JavaScript Memory: A Beginner’s Guide to Stack and Heap

Next js for E-Learning Platforms

Preventing SQL Injection (SQLi) in React.js Apps