This is more a technical question than a real problem so I don't know if it will be removed but I will ask it anyway.
So I am developing some platform using Symfony2, AngularJS, RequireJS and other tons of stuff I need, everything works with harmony and peace, but I want to create some panels in pure HTML (no twig files) so AngularJS can load it using ngRoute, but thoose files need to reside in /web/partials (for example) to be loaded correctly, because assetic wont generate thoose files inside /bundles/foo/barbundle/partials/*.html as they are not JS, CSS or Images...
The question is simple, is there any way to either force AngularJS to load TWIG templates as partials or forcing Symfony2 assetic to dump my partials inside web folder?
I know that putting manually inside /web is enough to load everything I need and it is loading perfectly in production, but I want to keep some folder structure and keep all my frontend stuff in the same folder /src/Foo/BarBundle/Resources/public/*
UPDATE
I just saw that assets are installing my html files inside my bundle public folder, I don't know why it didn't work before but creating them inside src/Foo/BarBundle/Resources/public/partials and then app/console assets:install --symlinks links them to /web/bundles/foobar/partials, as I say, it didn't work before...
But the question about loading twig files with AngularJS still there.
So, you can easily load your partials from the web folder using app/console assets:install --symlink to place partials and set the good asset path in your angular routing (like /web/bundles/foobar/partials/*.html).
Load twig templates using Angular ngRouter is not a good thing, because PHP is an interpreted language. But load your partials in a Twig template using ngView is possible (PHP is interpreted, and after you switch markup with angular routes).
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!
First case: i've got some script, which i've writed by myself(lets call it requests.js).
Second case: there is a big plugin TinyMCE, which i can install from bower or npm.
In first case as far as i understand, i should save my scripts in resources/assets/js. But where should i call them after this? There are 2 files in assets/js, which were installed with Laravel 5.3: app.js and bootstrap.js. Should i call my scripts in these files and then gulp them into a single one?
In second case i should use some npm or bower package manager. But, what should i do next? Where should i call this installed packages?In assets/js/ - app.js or bootstrap.js? But how, or maybe i shouldn't do it?
It's hard to put bower components in resource/assets/js only, because these components often consist of many files, js/css/others. I just use bower install inside root of the installation, bower_components dir appears and I put it into .gitignore. Anyone who pulls changes, can do bower install.
Going further, I make file, where I create json object with two values, js and css, where I put path to files I need. Then I require it inside gulp.js and I can do whatever I want with these files. Usually concat, minify, copy result to public.
Theres nothing wrong with putting frontend into same server. Maybe you work alone or in the small team, and you don't have time to manage too many things. Common practice I see all around is that people make dir angular inside root and just grab all js/html files inside this dir, and copy them to public inside gulp.
It's opinion based, but I think it is not a good practice to mix front-end and back-end.
Your Proposal
Your public (front-end) files, like bootstrap, you should store them in public/ of the Laravel installation. You can use public/assets/js, etc. The folder resources is not available in your html files (if you mean the folder of your Laravel installation).
Better Approach
A better approach is to separate totally your front-end from back-end. In that case, you need a front-end framework, like AngularJS or Ember.
Why?
You can replace one of them without troubles in the other
You can use your back-end as third party api (https://api.yourdomein.com/v1/...)
No conflicts with blade views and other template formats
Of course, separation of responsibilities
You should install your bower components in your resources/assets/js folder. Then add any of these components to your build process in your gulpfile. This way, you have total control over what gets concatenated and minified and ultimately included in your templates.
I understand this sort of breaks the structured point of Laravel, but there is method to my madness. I plan on using a single install of laravel to host several websites that are database driven. At the moment all of the sites share the same layout and I have a system to store some custom CSS in the DB to give each site a different color scheme. I want to change this so they can use completely different views. So site A loads views/theme1/app.blade.php and site B loads views/theme2/app.blade.php.
I have implemented this by using the following to return a view.
$theme = getDomainThemeName();
return view($theme.'/home');
This is also working, but i am now left with the task of dynamically loading the assets. I am using bootstrap the generate the themes and making a few tweaks to the HTML to create the app.blade.php file. I have 2 potential solutions to this but i would much rather a way to server the css files from the views directory. This means the following mapping.
http://website.com/css/style.css =>
/resources/views/theme1/css/style.css
Can something like this be done? Another option would be to use php to read the css file and insert it into the app using a yield. It works, but it means i cant use browser caching to cache the assets. I was also thinking i could just create sub directories in the public folder. public/theme1/css/style.css. This makes the most logical sense, but it means i have to fragment the theme system. Id like to be able to unzip a theme in the views directory and it just works.
I am using Laravel 5, i have root access to the server too. Running PHP 5.4 on centos 7.
I think the best approach is having next structure:
/public/css/style.css
/public/css/theme1/custom1.css
/resources/views/common.blade.php
/resources/views/theme1/main.blade.php
And then loading conditionally with php each site theme.
It may not be any trouble with caching.
Using Phalcon Assets Management. I'm able to add assets like JS, CSS file into volt template from the controller.
But the assets manager will always looks inside "public" folder for assets.
How can we access "assets" folder which is inside "module" directory?
So that each module will have there own assets defined.
Here's my current folder structure:
---apps
------module_1
---------controllers
---------models
---------views
------------assets // how to access this to get JS, CSS, Img files into Volt Template?
---public
------assets // currently all assets are accessed by this folder by default
The Assets Manager is just a like View Helper to your code be more future proof.
I think you're trying to apply the MVC pattern on the server and client side at once, and that's not going to work. I mean, the server/client side segregation comes first than MVC itself.
I admit that the MVC Pattern gets a bit confusing on the client-side of a Web Application, but that's another history. Simply remain with everything that's isn't processed by the server in your public folder and you'll be fine. You can even create one folder for each module like you wanted in the 'public/assets' path.
All the tutorials on optimizing website assets with grunt and grunt-usemin are based on the src -> dist deploy strategy. basically processing the items in your src folder and compiles them into the dist folder.
But PHP doesn't work this way. It isn't compiled and "distributed". The source and target page are the same. Which makes it a destructive process.
How do you work around this? Any tips on using Grunt in PHP project in general?
Thx.
We do something similar. We created an index.src.html with the non-minized sources, and create an index.html from this file using usemin, and we have a "proxy" php file which opens the index.html if it exists (which means we are in the production environment and the assets are built), otherwise the index.src.html if the assets haven't been built or we are in a development environment. The main idea is to separate the important parts for usemin to a different file.
The usermin plugin is for preparing static assets (concatenate, minimise,...). Static means the server gives the same content for everybody. This constraint doesn't apply to PHP...
If you would like to use this tools to optimize your php generated pages assets, you should create input files which can be parse-able by usermin. For example you can collect the javascript/css file references into a template or a different php/html, and you include/use this file where you need, and after the build you use the usermin parsed version of it.
The ideal approach would take advantage of the dynamic nature of PHP to make the "distribution" URL replacement. The process would be:
Your build tool creates some kind of manifest or machine readable file with changes applied. Some tools, as gulp-rev will do this for you.
Read the manifest from PHP and replace the resource URLs with the final ones.