I am new to both Symfony and Angular and I am trying figure out how the pieces will fit together. I want to user Symfony for my back end and web api. I want to use Angular for the front end desktop like experiences.
I am not sure how the folder structure should be. Do I put my angular javascript/typescript files in folders in the root of the Symfony project and utilize their folder structure. Or do i have two bundles in my src folder. One for the back end/website. Another for the front end? Or should the back end be serving twig templates with angular components inserted?
***** Edit *****
#Tobias Xy Correct me if I'm wrong but that would be creating bundle in the src folder and keeping the files in a resources folders in it correct?
Then i see the following at the bottom:
Frontend-Based Applications
Recently, frontend technologies like AngularJS have become pretty
popular for developing frontend web applications that talk to an API.
If you are developing an application like this, you should use the
tools that are recommended by the technology, such as Bower and
GruntJS. You should develop your frontend application separately from
your Symfony backend (even separating the repositories if you want).
So they are saying make two seperate projects and not use a bundle for the front end?
If so how do you host this? On two different sites?
Symfony is a backend framework, so there is no point in adding a bundle containing only frontend files (css, javascript, etc).
See also Web Assets (Symfony Best Practices)
They say there:
Store your assets in the web/ directory.
Update 23.03.2016
Cerad wrote in the comments: "client-side angularjs and reactjs apps have their own build system just like Symfony does".
This is actually a different topic, but the article I linked to above also says something about that:
Recently, frontend technologies like AngularJS have become pretty popular for developing frontend web applications that talk to an API.
If you are developing an application like this, you should use the tools that are recommended by the technology, such as Bower and GruntJS. You should develop your frontend application separately from your Symfony backend (even separating the repositories if you want).
For Angular 2 there might be differences in the front end build system, but the structure should be similar to the one I use for Angular 1.x.
The folder structure I use to place my front end assets in something we could describe as a three level process. Let's just enumerate the three levels here:
Level 1 - The src/AppBundle/Resources/Private folder
Inside this folder, I place any front end assets that need any kind of processing, like transpile, autoprefix, uglify, etc. This will be the case for most JS, SCSS, LESS or HTML files of your choice. You can define the folder structure you prefer.
Level 2 - The src/AppBundle/Resources/Public folder
This will be the folder that'll contain all assets after processing AND any other asset that didn't need processing, usually images, fonts, etc. This will be the folder structure that will literally be copied over to the web/bundles/app folder in Level 3.
Note: This level is indeed redundant and can be skipped with caution. In my case, I kept it to avoid 'accidents' with the way Symfony wants to install assets by default, which will replace your web/bundles/app folder with the contents of this one. This will be the case if you use any other bundle that installs assets this way, like FOSJsRoutingBundle for example.
Level 3 - The web/bundles/app folder
This is the final public destination of your assets, and the path where you'll reference them in your code. It is just a copy of the src/AppBundle/Resources/Public folder from level 2.
Build system
You will need a front end build system to transpile your files and copy them to the respective folders in level 2 and 3. In my case for Angular 1.x I used Gulp with Node. This means you'll have gulpfile.js file, package.json file and node_modules folder in your project. I didn't care, it worked fine. Just remember to not add node_modules folder to your repo.
In production
Unless you really need to rebuild in production for some reason, you can skip level 1, level 2 and gulp related folders and files like node_modules, gulpfile.js, etc.
You could create the client side as the root document and the server side as an alias location, but careful to not overwrite the alias.
Or you could change the host.
Example 1:
[client] www.example.com/<client_root_dir>
[server] www.example.com/api/<server_root_dir>
or Example 2:
[client] www.example.com/<client_root_dir>
[server] api.example.com/<server_root_dir>
Related
Essentially, I'm looking to have a PHP development workflow that needs to be modular, but using a Single Page Application technology.
I understand it is recommended to separate the back-end from the front-end. Develop them separately. But is there a way to group all related code into one module (or folder), meaning all backend code with its own views presentation inside the same folder?
It's like MVC, but the "V" contains fragments of vuejs (or angular) files, which extends from a master file somewhere in your project.
For example
Assume we are building a modular CMS, where you can upload "plugins" (really, PHP modules), extending the CMS' functionality:
-project[root-folder]
----core[folder] # contains all infrastracture code, api routes, master view file, magic, etc.
----modules[folder] # uploadable modules goes here
--------User[folder] # sample module; follows the MVC pattern
------------Controllers[folder] # contains files, e.g. UserController.php
------------Models[folder] # contains User.php
------------views[folder] # where vue components is housed
----------------users/index.php # contains vue code
----------------users/create.php # etc...
----------------users/js/user.js
----------------users/css/user.css
--------Blog[folder] # another module
----index.php # the master view or just the bootstrap file
----gulpfile.js
Then inside the core/ folder, there is a master layout that binds all views together.
Will a folder structure like this be viable?
Obvious problem there is you can't use .vue files (as that would mean, every time you upload a new module, you need to run gulp or re-compile).
Hoping for your feedback. Thanks.
This question will strike a lot of folk as bizarre and twisted. That's the reaction I got when I asked it in the context of .net mvc. I'm with you 100%.
I'm too new to js frontend development (and too ignorant of PHP) to have much advice. It's going to be tricky. Ajax calls to PHP code will need to go to paths below the src directory. But then you want to stop your frontend resources being served from these same paths. Both PHP and gulp will want to use file paths for urls, but at least for Gulp this can be controlled.
I'll follow this with interest. My ambition is to keep in the same folder things you're likely to want to delete together, and for those things to be able to call each other with short, relative paths. The ideal would be to be able to specify the module route independently of the path on disk, and to have this route work for both frontend bundled resources and services. Good luck !
I came across this question whilst searching for an approach for exactly the same problem. I'm building a "platform" rather than an application with a plugin system along the lines of Wordpress. I have the additional issue of the platform itself being a 'multitenancy' environment, too - so any plugins cannot interfere with the core "Dashboard" that holds these things together.
So; posting for a few reasons, two years on...
Did you get anywhere and would you care to share any thoughts?
I came across a quite extensive article for PHP Phalcon that has certainly given me a few ideas. Sharing incase it helps you/others:
https://blog.antsand.com/singlepost/index/5619/How-to-integrate-php-(Phalcon)-and-Vue.js-components
There's a line buried in the series that says "As a rule of thumb. Structure your code, based on the application and NOT on the programming language and frameworks." I'm not sure how wise or not this is, but it certainly gave me something to crack on with.
So right now, I have a module folder a bit like:
/mymodule
/Controller
/Model/
/Template
thing.vue
/Assets
/js
/css
MyModule.php
Assets are handled via a framework route (i.e, /assets/{path:.*} )
Templates are handled via the (PHP) module install script to make sure webpack knows where they live.
Still at proof-of-concept stage but rightly or wrongly, it seems to work well enough!
TL;DR: what is the best way to arrange files, package managers and build tools for Laravel 4 + Zurb Foundation 5 combo (with Compass) as one consistent repository with clean public (static) section?
I wanted to start a fresh project, based on latest Laravel on the backend side and using Foundation for the frontend. I am new to both of these and apparently I missed some of the tooling that was developed meanwhile when I wasn't doing PHP for some time.
My confusion:
Laravel uses Composer for installation and dependency/module management. (Ok, I'm new to Composer)
Foundation is available as a Composer module (but then what?), but generally also as a CLI tool that creates a new project and uses bower for module/dependency management. But then I have two repositories.
Is it required for me to expose all my .scss files, or maybe even put the whole Foundation project into laravel's public dir to make all work?
How do people usually approach using these frameworks together? They shouldn't interfere, but they still have totally different tooling.
Where do I put my foundation files? Keep it as composer module or inside public? How to refer to them? How to have one build everything command?
I have the same issue as using Bootstrap SCSS version for Admin & Foundation SCSS for the frontend. I noticed also that both css frameworks come as composer packages however the issue you have with this approach is that you generally use other Javascript files in a development that will be merged also so using the composer versions just adds to the confusion.
The best solution i found was using either gulp or grunt with bower at the top level of your Laravel build. Rather that go through the configuration for you there is a good article at http://blog.elenakolevska.com/using-grunt-with-laravel-and-bootstrap/ that goes over a bootstrap integration but this can be tweaked for Foundation. This solution is good as grunt has many of the other popular javascript libraries that you may use in your project also..
Alternatively you could use an application like codekit and create a compass project to manage the merging & compiling of your assets into the public folder. As a side note if using git again your would need to exclude additional folders from your project.
If you think of your SCSS framework files as development assets there is no real need for them to be in the project as you only really need one version of Foundation on your development machine.
Your custom SCSS changes can be added to your Laravel project as modules ie a navigation module, via a private composer repo for the project or just added to the Compass project at development time. Your public folder should only be referencing the final merged style.css & java.js files for example. Any images from the framework can then just be copied over to the public folder ie icons etc.. Hope that helps..
Personally I have a "static" directory which houses static files. That is where I use SASS watchers, grunt tasks and basically the entire front-end workflow. The results of that front-end build process gets added to a "production" Laravel public directory after getting built, etc.
A pro of this is that everything (static assets and laravel application) is separate.
A con is that updating Laravel views with any updates in HTML templates you may build in the static directory. If you update the templates, you may also need to update the view files, which becomes more tedious as you add more templating logic around the HTML in the views.
Just one suggestion.
This is the situation i am currently having issues with:
I have 1 webserver, this webserver must run 2 different websites, those websites are all written in symfony2 and share the same Bundle that i wrote.
Currently this bundle is placed in the src/ folder and loaded in the AppKernel.
Right now i am using the apps approach where i have 2 seperate app folders created in 1 folder called apps ( http://jolicode.com/blog/multiple-applications-with-symfony2 )
However right now my situation changed, i have this 1 webserver with 2 different websites but i also have a second webserver which must also be able to have multiple apps.
Both servers should not share the same configuration files which is having me a lot of difficulties with deploying.
I also want to prevent that i have to deploy unused bundles to a server.
I hope i explained everything as clear as possible, it is not easy to make a description.
As I read, the app folder contains all config or not files related to the app ( doctrine, Kernel, cache, logs, etc). Routing, Services or other files related to how works an specific bundle should be within that bundle in my opinion.
I think there is not a standard or good way to do this because symfony right know has the workflow one app - one project. Any structure which separates bundle config and app con
fig is valid if don't mix both kinds
Can somebody explain in brief the use of assets folder in yii framework. I am new to yii framework
Many newcomers ask: "What do we do with the assets folder?", and the answer is "Mostly nothing".
It's important that the directory be writable by the webserver user so that Yii can publish the resources there when needed.
When a project has multiple versions (production, testing, development, etc.) do not copy the assets/ folders from one area to another; allow Yii to deploy them automatically in each area.
Do not manually edit any file under assets/ - if you have a real need to make a change, find the publishing module, edit the source, delete the subfolder under assets/, and let Yii re-publish the updated files.
Do not reference names under the assets/ folder directly (say, to get at some other module's assets). If you need to use that
Do not add the contents of the assets/ folder to any source-code control system; these files have master source in other places.
It is safe to delete everything under assets/. Yii will re-publish the assets if they are not found under assets/.
Additional info
Yii makes assets accessible by Web clients, so the goal of copying assets to a Web-accessible directory is fulfilled and returns the corresponding URL for accessing them.
Read it from http://www.yiiframework.com/doc/api/1.1/CAssetManager
May I change the default Symfony2 structure to fit my needs?
I like the follow structure, but don't know how to get it to working..
core/ <- Symfony2 core files
app/ <- All applications
app/Acme/ <- Application for Acme enterprise (with all bundles..)
app/clientone.com/ <- Application for Client One enterprise (with all bundles..)
Inside symfony2 distribution there are 4 main directories:
app (there are customisations to your app)
vendors (symfony and other libraries)
src (your source code which may or may not to be application specific,
there could be bundle ClientoneBundle which is specific to only this application,
but also could be a bundle reused among your applications,- such as UserBundle)
web (http document root)
So if you have several applications you could keep vendors separately. And each of your application may contain three directories like:
- apps/acme/app
- apps/acme/src
- apps/acme/web
- apps/clientone/app
- apps/clientone/src
- apps/clientone/web
- some/where/else/in/filesystem/vendor
To implement such setup is very easy,- all you have to do is edit your autoload.php (which resides in app dir), just replace everywhere __DIR__.'/../vendor to __DIR__.'/../vendor,
in other words, tell symfony2 that you moved vendors somewhere else.
(I just renamed app directory in your setup to apps - to be not confused with app directory, inside each of your application)