Fix / Server - 404 nginx error on refresh

[Graeimh]

Notes

GitHub Copilot: To handle routing for a Single Page Application (SPA) with Nginx, you need to configure Nginx to always serve your index.html file for all routes, except for the ones that match your static files. This allows your Vue.js application to handle the routing.

Here's an example of how you can do this:

server {
    listen 80;
    server_name yourdomain.com;
    root /path/to/your/dist;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location ~* \.(?:ico|css|js|gif|jpe?g|png)$ {
        expires max;
        add_header Pragma public;
        add_header Cache-Control "public, must-revalidate, proxy-revalidate";
    }
}

In this configuration:

• listen 80; specifies that Nginx should listen on port 80.
• server_name yourdomain.com; should be replaced with your domain name.
• root /path/to/your/dist; should be replaced with the path to your dist directory (where your built Vue.js application is located).
• location / { try_files $uri $uri/ /index.html; } tells Nginx to serve the requested file if it exists, or index.html if it doesn't. This allows your Vue.js application to handle the routing.
• The second location block sets caching headers for static files to improve performance.

Remember to replace yourdomain.com and /path/to/your/dist with your actual domain name and the path to your dist directory.

After you've made these changes, you need to reload or restart Nginx for the changes to take effect. You can do this with the following command:

sudo service nginx reload

or

sudo systemctl reload nginx

depending on your system.

Describe the bug

Refreshing a page after a successful login produces an error screen. This not only forces the user to go back to the first main page, but also requires them log in again.

To Reproduce

Steps to reproduce the behavior:

1. Log into YAKI
2. Refresh the page
3. Attempt to reach any of the page's contents afterwards.

Expected behavior

Whenever a user refreshes their page, the data written in any and all fields should be kept and the website should be still active and working, requiring no additional log-ins.

Screenshots

Desktop (please complete the following information):

• OS: Ubuntu
• Browser Mozilla