Here in this article we will see on how to use the try_files method on the nginx configuration file with asterisk (*) Wildcard, to make sure to setup these the right way to make use of this method.
So, the first question that arises within you is that why do I want to use this, and what is this useful for? Let me phrase it clearly for you with an experience of mine so that you will also get the use case and the reason for it.
Why do we use it?
When I was starting out with React, I had made an amazing looking site, well it kinda is to me. So I was using react router dom, if you don't know what it is
It is a way to go to a new page in react but you know react is a single page website, So what you do is that when you receive a request on a certain url, you will always send the same html and css and stuff, except there is some conditioning going on in the background.
Which make sures that you get the right page rendered based on the url, so this is what react-router-dom was used for.
So, as I wanted to deploy. The most recommended and easier one was the Netlify static site provider, So I used that it was free, and simple to setup in just a few click like around 7 to 9 clicks.
But the odd behaviour that I noticed was that when I tried to go to something like
https://artisticprogrammer.com/
It works fine, but when I wanted to go to the some other route directly from the url bar like.
https://artisticprogrammer.com/this-is-some
So, when I wanted to go this type of url, it shows some kind of error that says, the page you're trying to find isn't available.
I was really not able to understand anything like does those kinds of things happened in the first place because.
It was working completely fine in my laptop and I found that it worked even when I builded the whole site and tried to see the website with npm package called serve.
So, I kinda not able to figure that out.
Then after a lot of thinking and stackoverflow searches I found that, there was no error it was absolutely right.
Okay hold on, it might be confusing. So, what I am trying to say is, We all know what a index.html does and how is it different.
An index.html file is always referred as the root file of any servers to serve. like for example
https://artisticprogrammer.com/
When you type in such urls, as you can see there is only a slash after the .com. That is what is called as the root of any domain.
So when you go to these root of the domain, the file that is server is, is the index.html but when you go to something like the below one.
https://artisticprogrammer.com/thisisnew
Then it will try to find a file thisisnew.html to serve in a normal web server. That is the issue react is a single page site.
So when you want to serve for multiple urls with the same index.html, that's why you use the * try_files method nginx.
How to set it up?
So now coming to the point, the reason why we use it is that we want to serve a single html file for all the url request that is coming to our domain
It is really simple to setup, open your nginx configuration.
## If you are in linux/mac
sudo nano /etc/nginx/nginx.conf
If you are in windows then you have to open the folder where you have extracted the file and then open it with the text editor of your choice either notepad or sublime
Now once you open the file you should be seeing something like
Once you open your configuration, just add this line inside your server block of the app,
location / {
try_files $uri $uri/ /path/to/your/file/index.html;
}
Once you have completed this congratulations, you have successfully completed the setup of the nginx try_files *
That is all for this post.
Conclusion
You might have now understood the purpose of this thing and also I really hope that this article has helped you fix the problem that you are trying to solve.
All you gotta do is to open your nginx configuration file and this block below it will do all the job for you and also remember to change the locotion to your file.
location / {
try_files $uri $uri/ /path/to/your/file/index.html;
}
And If you found this article helpful, checkout all my other articles, I make some amazing contents and controversial talks and articles on the stuff that is biased by a lot of people.
So please let me know how helpful was it and how can I improve this article.
Really thanks alot for reading this article and it means alot that you could imagine.
Anyways, Happy Hacking Guys!