Overview

This post discusses the directory structure and nginx configuration adjustments made when implementing an SPA (Single Page Application) for the admin panel in a Laravel application. It was my first attempt, so I summarized my notes here.

Laravel Directory Structure

The application was divided into two main directories: backend-app for backend-related tasks and frontend-app for frontend-related tasks.

• backend-app handles user-facing screens, APIs, and backend processing.
• frontend-app is responsible for the SPA-based admin panel.

Although user-facing screens could also fall under frontend-app, I decided to separate them for now and plan to refactor later. If splitting them further, moving away from a full-stack framework might be worth considering. For now, I aimed for a structure that makes managing frontend and backend easier.

This structure was inspired by common setups found on GitHub when searching for "Laravel SPA" or "Laravel React".

Nginx Configuration File

The location directive was separated for backend-app and frontend-app. While separating them via server directives and using subdomains is another option, I felt it wasn’t suitable for this application. The configuration could be improved further, but this setup works for now.

Fix (Added on 2017/4/2)

When directly accessing or reloading URLs under the SPA root (e.g., laravel-app/dashboard/post), a 404 error occurred. This was fixed as follows:

Before:

After:

Thoughts

If you have recommended structures or repositories that might be helpful, please share them!

References

• nginx root and alias
• try_files, alias, and regexp locations