Can I define the root directory on the server? URL not working as expected after the reload-CodePudding

I have a synonym-browser website running at: michalzagojski.pl. I don't know much about backend development, the site is using only JS, HTML and CSS. After searching a specific word, the url gets updated like so: michalzagojski.pl/synonim/[word]. This happens without the page reload and works fine. However, after I press the refresh button, or paste this link into the browser searchbar, I get 404 error GET https://michalzagojski.pl/synonim/[SOME_WORD] 404. This issue doesn't occur when I'm working on localhost using gulp. In gulpfile.js I have a task called "watch" which is using browserSync and has a following configuration:

browserSync.init({
        server: {
            baseDir: './dist',
            middleware: [historyApiFallback()]
        }
    });

with the base directory pointing to ./dist folder. On localhost, when I'm refreshing, or pasting the link to the browser - everything loads and works as expected. So the question is: what can I do on the server to make it work the same way? Can I somehow define the root directory? I need the url to be in this format: /synonim/[WORD].

CodePudding user response：

I have found a solution to this problem. What I needed was to include a .htaccess file with following content:

<ifModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule (.*) /index.html [QSA,L]
</ifModule>

It is a .htaccess file for single page applications and it redirects the server so that it always looks in the /index.html page, regardless of the provided url.