Combining downloaded html template with php laravel - php

Pls Honourables I need help, I am new to laravel. I am done with setting up the laravel environment and having done some basic routing. I have this template which I downloaded with it files(css,js etc) the issue is I am not certain on which folder I should put it in order to access its css and js file aside from predefined laravel styles and bootstrap. Pls help me

You should put this to your resources directory, and use Laravel Mix to copy it to the public directory. Put this code in the webpack.mix.js file:
mix.copyDirectory('resources/template', 'public/template');
If you are not using Laravel Mix, then you can put it into the public directory.
For more info, follow this link,

Related

Laravel 8 – create route alias for image folder inside public directory

I’m in the middle of the process of replicating a framework that I developed in node / react to laravel. Right now, I’m adjusting the main architecture and currently working on a blade master page.
My original idea (Laravel 8 – use blade asset to display image, but loading from resources subfolder) didn’t work, so I’m trying a new approach to set up how I want my asset files to be served.
The assets in question is basically images for layout purposes. I organized the directory like so:
public/app_files_layout
Inside it, I have a bunch of image files that I want to access. The thing is that I don’t want to access like http://localhost:8000/app_files_layout/image-name.jpg. My intention is to access like: http://localhost:8000/images/image-name.jpg, but I want to maintain the directory names I created intact, so it can have a high fidelity architectural organization similar to my framework that I built in other languages.
I figured that I would set up a simple routing logic for it in Laravel web.php file. I followed the suggestion from this stackoverflow question:
https://stackoverflow.com/a/38736973/2510785
However, when I try to access via browser through the following address http://localhost:8000/files-layout-test/image-name.jpg, returned me an error like so:
The requested resource /files-layout-test/image-name.jpg was not found on this server.
I stripped the code just to try to find out what could be wrong, and this is what I did to debug it:
Route::get('/files-layout-test/{filename}', function($filename){
echo 'debug';
});
The strange behavior is that, when I try to access without the file extension (ex: http://localhost:8000/files-layout-test/image-name), it goes through, but I need the file extension to be there.
Any ideas on how I could get this done?
Note: I’m new to Laravel, so the answer may be simple.
Basically for simple stuff like creating a symlink for public/images and public/app_files_layout you can use the built-in storage:link command.
In your config/filesystems.php file, you can define the symlinks you want to create
'links' => [
public_path('storage') => storage_path('app/public'),
public_path('images') => public_path('app_files_layout'),
],
Then you can run php artisan storage:link and it will create all the symlinks defined the links array in config/filesystems.php. No need to create any custom Artisan command. You can read more at Laravel Docs
With the above symlink created you can use the asset() helper to generate the urls for assets which are actually in public/app_files_layout using asset('images/filename.ext').
You can also access public/app_files_layout/image-name.ext at http://localhost:8000/images/image-name.ext once the symlink is created.
However if you want to add some other logic or say you want to get user input for creating symlinks then you can define your own custom Artisan command using the storage:link command as starting point

Angular 2 + angular-cli + Laravel 5.3

Using latest angular-cli, I created new project and everything works fine. Next, I tried to integrate it in Laravel 5.3. I have this project working with systemjs, but I want to switch to webpack and to take advantage of angular-cli.
Problem is that in angular-cli.json I can't specify that index is index.php, it only accepts HTML.
Basically, I can't start the Angular application at all with this setup.
How can I overcome this?
In the end I separated Laravel and Angular 2, as Cristian Sepulveda wrote in the comment. This is the recommended approach anyway.
I make API with Laravel and use it with Angular 2.
In my case I serve the angular app from laravel. I still use webpack to build my assets but have a gulp task which copies the angular index.html to be index.blade.php of which the laravel app serves.
I also use gulp to copy the built files from /dist to /public
I had the same problem and what I found is this related issue in their GitHub issues:
The output folder will always be entirely replaced. You can use the public/ folder to have your index.php which will be copied to your output folder, or output the app to a separate folder and copy the files yourself.
This is by design and will not change. This is a build output folder, not a deploy folder. You should separate those two steps.
So, you can't really achieve what you exactly want, but this is the only workaround I found.
I found only one solution for me.
create build for client side code by ng build --prod
Using gulp copy generated files into Laravel public dir gulp copy (here you can check if old build files exists remove them)
Using gulp-ingect plugin inject copied files into layout gulp inject
-- This can be used in CI and done with automation tools. In result we have inline.js and three *.**.bundle.js files injected. In same main layout i have statically add <base href="/example"> (you can use any defined in Laravel routes root path here) and inside template file which loaded from this path (in my case 'example.blade.php') add angular 2 root element <st-example>Loading...</st-example>
-- By this set up you have root Laravel layout which have inside required by angular 2 root url href and injected scripts files from build. And your template file for current route have root element inside (it included to main layout by simple blade yeild('content')).
P.S. also you must notice that if you are using some http requests in angular 2, after you integrate it into Laravel project this will add csrf protection middleware to each request... And if you have some new errors in requests which work previously just check headers.
Since angular-cli doesn’t allow you to specify index.php, let it be, simply specify index.html then there…
And add an appropriate route into Laravel routing. Like this one, for instance:
Route::any('{path?}', function () {
return File::get(public_path() . '/index.html');
})->where("path", ".+");
Btw, it’s simply a trap for any unknown routes… But I think you get an idea.

Sylius: Change design of Sylius front end

I am new to Symfony as well as Sylius. Can anyone guide me how can I change design of Sylius front end. I want to use the Kuteshop template in it?
I want to change the front end UI of the Sylius project.
What I did is:
I copied my css, js, images etc files in web directory in a separate folder with name template (template/asstes/css/, template/assets/js/ and so on). Then I created a folder app/resources/SyliusWebBundle/Views/frontend/Homepage and also I created a file app/resources/SyliusWebBundle/Views/frontend/layout.html.twig. I defined the assets and other components but no result.
My template assets was not showing up, also I was not getting any information in it.
Does it help to get some solution to me?
Thanks so much.
The path must be app/Resources/SyliusWebBundle/views/Frontend/Homepage

how can I use css and js outside of public folder in Laravel 4

i am using laravel 4. Here my css and js are not in public folder. I want to access them through another folder.
I know that by default we can access css and js from public folder only in laravel.
Please help me on this to access from outside of public folder.
This shouldnt be made, it has a reason why the structure is like that. The user can only see scripts in the public folder, that has the advantage that he can not execute scripts.
If the css/js/img files come from a Laravel package try php artisan asset:publish [package]

Integration of svg-edit or other programs on Laravel 4

I'm trying to integrate svg-editor with Laravel 4.
My current solution is to insert svg-editor.html file renamed as svg-editor.php inside my views folder and move the rest of files into the public folder. So now I've moved all the calls to js and css files into the edit view and all points to the public folder to let laravel load the needed files for svg-editor. js and css files are into assets folder and I call them with asset function:
<script>{{{ asset('/assets/js/ *original path from svg-editor* ') }}}</script>
public folder structure
app
public
vendor
svg-edit-2_6
Views folder: inside svg-edit-2_6 there's just svg-editor.php to be able to include on template with #include()
Of course this solution is messy because I've to modify all calls inside svg-editor code such as paths and URLs references. My question is if there's any way to let laravel to load this program without having to modify its params. I think could be possible to make some kind of calls froms start.php file but I could not find information about how to do this.
Could it be possible?

Categories