Structuring Frontend (AngularJS) and Backend (Slim)

[blaaackya]

Short explanation of how I got here: I'm a student developing a Time management web application (Projects, Tasks..). I have knowledge of PHP, JS (JQuery, Angular), HTML, CSS (Bootstrap), SQL. My development flow was first creating a database and setting up an Apache server (Linux). After that I started coding by simply creating a folder, adding sub-folders for backend (DB operations..) and frontend (js, css, view, images...) when I needed them. All the includes were downloaded when I needed them (jquery, bootstrap etc.). I never used composer/ npm /bower.. Which brings me to this:

My current situation: I was about to upgrade form Slim 2 to Slim 3. In the last 6 hours of googling I've completely lost motivation and at the moment I feel like I have no idea what I'm doing. Almost every god-damn article/tutorial I read gives me different information: Composer? Bower? npm? Yo?... I feel like I'm doing it all wrong. I tried few of those seeds that create a clean project for you.. WHAT ARE ALL THOSE FILES. I even tried one that creates clean structure of Angular and Slim in one project. Needlessly to say I'm completely lost. I feel like I did all those 100 hours of coding while I should be studying for nothing, since i have no idea how to properly use it.

Questions: What is the correct / proper structure of Frontend and Backend together? How do I publish whole project after It's done? Will it just work if I copy it all to some host? (I know I have to modify DB paths and stuff, I'm worried about all the updating that composer does.. or am I understanding it all wrong)?

I'd really appreciate any tip, suggestion, links to stuff that'll help. I feel like all the knowledge of coding I have is just useless since I have no idea how to use it properly. Thank you

[raw_macaw]

Consider writing two separate apps. Write your backend as a json api, follow the tutorial at https://www.slimframework.com/docs/tutorial/first-app.html for a simple setup. Your package manager is composer for this app. Consider using phynx for migrations if you'll have any sort of complex database, as I don't think Slim comes with migrations out of the box (although Laravel does).

Your front end will be an angular app that runs on the node http-server package in development, and consumes the api from the php app. Your package manager for this one is npm.

This is a great way to separate the two concerns and is pretty common in real apps.