How to properly deploy a website on Netlify - '_redirects' & '.htaccess'

I am sure you might have seen this page many times if you use Netlify for hosting and deploying your websites. Netlify shows this page when it could not find the resources the user is looking for on a website. And even if you have handled this case in the development phase by adding routing, Netlify will still throw this page because Netlify does not know what to do when a user asks for an unknown resource.

This can be easily avoided by adding one single file to a root directory. In the case of standard HTML/CSS codebase, we have a ".htaccess" file, and if you are using any framework to build your frontend, we have to use the "_redirects" file that Netlify provides to us. Let's explore this one by one.

.htaccess

".htaccess" is a configuration file. We can add this file in the root directory of our HTML/CSS website codebase or where our index.html page resides. This file tells our server to use our custom 404 page. Some hosting providers already have this file. You can edit that file; if it's not visible, it may be hidden. If you do not find it, create one. Netlify does not create this file, so we must make it ourselves. Create a file name ".htaccess" in the root directory. For now, leave this file blank.

Now create another file; you can name it anything. For ease, I will use the name "404.html". We can add our own HTML code to show our custom 404 page in this file. This file is like a standard HTML file; you can style it, add assets, and do all the other things we can do with a regular HTML file. After completing the 404.html page, open our ".htaccess" file and add the following content.

ErrorDocument 404 /404.html

Replace your file name with /404.html. This file will tell the server to use our custom 404 page. You can find it here to read more about the ".htaccess" file.

_redirects

This is also a configuration file that Netlify provides. "_redirects" is Netlify specific file, and we must add this manually. We can add our customized redirect rules on Netlify by adding this file or using the Netlify Configuration File. This blog post will use ReactJS as an example and the "_redirects" file.

ReactJS is a single-page application; we can not have multiple routes in the same application. To resolve this issue, we have some libraries like react-router and react-router-dom. With the help of these libraries, we build routes in our ReactJS application. Note that the application does not send requests to the server with the routes or URLs we have created using react-router; it just visually changes the URL in the browser. I made a ReactJS website for the demo, and I deployed and hosted this website using Netlify and GitHub (code). The website link is redirectsdemo.netlify.app. To verify the above behaviour, open the demo website and then open the Network tab from dev-tools to check the website's network log while navigating different URLs. You will notice there is no activity on the network site.

Before moving on, note that, in the development phase, I had already handled the "page not found" condition by adding my custom 404 page and "*" route, but it will still not work. I explained the reason for this behaviour in the next paragraph. You can check the code in the image below or here.

import Home from "./pages/Home";
import About from "./pages/About";
import Error404 from "./pages/404";
import {BrowserRouter, Routes, Route} from "react-router-dom";
import Contact from "./pages/Contact";
import Navbar from "./components/Navbar";
 
function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Navbar />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
          {/* If user navigate to unknown URL, then this route will
          handle that case by showing our custom 404 page */}
          <Route path="*" element={<Error404 />} /> 
        </Routes>
      </BrowserRouter>
    </div>
  );
}
 
export default App;

It will work fine if you go to any webpage using navbar-links in the demo website. Now come back to the home page again and perform the following steps. Go to any webpage again using navbar-links and refresh the page; it will show us a "Page Not Found" page from Netlify. Even if you try to go any route like "redirectsdemo.netlify.app/" Netlify still shows us the default "Page Not Found" page. This happens because when we refresh the page, it will send a request to the server like "redirectsdemo.netlify.app/about/index.html" or "redirectsdemo.netlify.app/contact/index.html" But as we know, our react website is a single-page application. So it cannot find the folder in the root directory called "about" or "contact" and therefore cannot serve us index.html from that directory, despite handling this case in the developing phase.

Netlify provides a solution for this problem using the "_redirects" file. We must add this file to our root directory in a public folder. Because this is the directory full of stuff that will ultimately end up on our build (and will be published). For things to run as we expect, create a file name "_redirects" in the public folder. And add the following content to the "_redirects" file.

# _redirects file
/* /index.html 200

After adding this file, your public folder should look like this.

root
├─── public
│   ├─── _redirects
│   ├─── favicon.ico
│   ├─── index.html
│   ├─── manifest.json
│   └─── robots.txt
└─── src

Let's see what this means. The first line is a comment. /* means from what we are redirecting, /index.html means to where we are redirected, and the last 200 is the status code of redirect. The status code works in a way that it will fetch the /index.html but will render the user requested URL in the browser. We can do many cool things with "_redirects", but for this post, this will be enough. If you want to read more about "_redirects", you can check the official docs of Netlify here.

After adding this, you can publish your website with these new changes. Why not do the same with that previous demo website? I have already done that; you can check it custom-404-page--redirectsdemo.netlify.app. I published another branch of the same website with the "_redirects" file. Now, if you go and do the same 'refresh the page' thing again or go to any random URL "custom-404-page--redirectsdemo.netlify.app/" you will not see the default "Page Not Found" page again.

Note: If anything I wrote got changed or updated in the future, or if this post needs improvement, please drop a message.