I am trying to add google map search capability for my project and i found a very nice react code for this (https://github.com/ubilabs/react-geosuggest) but i couldn't add this to symfony 4 based admin panel.
To understand what is wrong i created a new symfony 4 project and just added one controller and a twig template.
Generally i followed the following tutorials
https://www.thinktocode.com/2018/06/21/symfony-4-and-reactjs/ and
https://symfony.com/doc/current/setup.html
But when i ran the example i got the following result
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Welcome!</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="/build/app.js"></script>
</body>
</html>
As you can see, it is just the same code with the index.html.twig; there is no change. React didn't change anything instead of i expected.
This tutorial is not the one i just tried.Also I tried, React Getting Started tutorial and other Symfony 4 + React examples but the result was always same.
You can access the source codes from here:
https://github.com/bahadirarslan/Symfony4ReactProblem
UPDATE
I also tried steps described here https://artemzhuravlev.com/blog/symfony-reactjs-using-encore/ but couldn't make it.
The only thing i want to mention, when i try to run npm install i always get EACCES: permission denied error so i am running npm install with sudo and --allow-root attributes like described here https://www.fahidjavid.com/fix-error-eacces-permission-denied-mkdir/
Finally i found the solution with helps Vincent Le Biannic (https://github.com/Lyrkan) at github.
He took my attention to lines below at webpack.config.js
// will require an extra script tag for runtime.
// but, you probably want this, unless you're building a single-page app
.enableSingleRuntimeChunk()
This config make necessary to call runtime.js (which was generated by encore) in html file.
But adding only runtime.js didn't help so i also added vendors-app.js and voila!
Interestingly neither symfony's original documentation nor any tutorial about this subject don't contain any single line about this situation.
If you see an EACCES error when you try to install a package globally, you can either:
Reinstall npm with a node version manager (recommended),
or
Manually change npm’s default directory
Source : https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally
The same problem for me
I added the line the twig header
<script type="text/javascript" src="{{ asset('build/vendor/app.js') }}"></script>
and it works
Related
So I'm very new to Laravel and I'm following a tutorial to use the authentication feature. This works fine, however it is unable to find my scripts and stylesheets. I haven't made any new ones nor have I touched the stylesheet link in app.blade.php, so I have no clue why it is throwing this error.
Code:
<link href="{{ URL::asset('css/app.css') }}" rel="stylesheet">
Error:
GET http://localhost:8000/css/app.css net::ERR_ABORTED 404 (Not Found)
When I go to locahost/css/app.css I get a 404 error. The same error is occurring with app.js. I haven't changed anything about the file structure and it was all generated with composer create-project laravel/laravel
Thanks.
Laravel doesn't include any CSS files by default. You need to create one yourself and put it to /public/ directory, so in your case that would be /public/css/app.css.
Does localhost point to public in your project? Usually you would have to open http://localhost/public
Per default, URL::asset('css/app.css') expects a css file at /public/css/app.css -- for your setup (serving throught php artisan serve, I suppose?), that would be http://localhost:8000/public/css/app.css.
Anyway: If there is no stylesheet, just create one. There is tons of ways how to do it, depending on your needs. Creating one manually for one, but for complex sites think about using laravel mix for compilation. Or anything other way!
Make sure your style exists at public/css directory, then try this code:
<link rel="stylesheet" href="{{asset('css/app.css')}} type="text/css"/>
if the file doesn't exist, create that and try again.
I hope this can help you.
I'm new to laravel and I'm using laravel 5.6 but the problem is when I run auth:make command it execute and display some login field and register field. My question is why front end desing is not working after running auth:make command in laravel. I have uploaded image it shows only html content but front-end desing is not showing.
Go to :
app/resources/views/auth/layouts/app.blade.php.
find this (line 20 probably):
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
and replace it with this:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
it works for me laravel 8.x.
https://laravel.com/docs/5.6/frontend
While Laravel does not dictate which JavaScript or CSS pre-processors you use, it does provide a basic starting point using Bootstrap and Vue that will be helpful for many applications. By default, Laravel uses NPM to install both of these frontend packages.
So if you want to use default "front end design" (bootstrap) that comes default by Laravel, and want to use method that Laravel recommends(npm) than you must follow the documentation above.
Did you install node and npm then run the following commands in your laravel root directory ?
npm install
npm run dev
These commands compile related javascript and scss/css files and build your front end.
Also following are some other documents about this subject :
Installation of Node & npm :
https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-16-04
https://nodejs.org/en/
https://www.npmjs.com
Laravel Mix And the Front-end :
https://laracasts.com/series/laravel-from-scratch-2017/episodes/14?autoplay=true
I've downloaded a base template from this GitHub Repo based on the following dashboard gentella.
I install the inputmask library with the following command:
npm install inputmask --save
But reading and reading, I'm not sure which is the correct step to integrate the same into an HTML page, I read about mix, saas, Compiling Assets (Laravel Mix).
I try with this:
<script type="text/javascript" src="{{ URL::asset('js/inputmaskpath.js') }}"></script>
and this:
#section('scripts')
{{ Html::script(mix('assets/js/inputmask.js')) }}
#endsection
The question finally is, how import inputmask into my HTML page and what it is the correct path?
When you use npm to download packages, they will be downloaded in node_modules folder and they are not (directly) included/loaded into your project.
You use Laravel Mix to handle the assets compilation. So in your scenario you could handle it as the following:
First of all create a javascript file in resources/assets/js called app.js. Add the following code to be able to load the downloaded package
require('inputmask');
Then using Laravel mix you can compile app.js to produce for you one javascript file. Modify webpack.mix.js in your Laravel root folder to the following
mix.js('./resources/assets/js/app.js', 'public/js/app.js');
Now in your view you could load the javascript file as the following
<script src="{!! mix('js/app.js') !!}"></script>
So, in case of another downloaded package, you install it with npm first, then in your resources/assets/js/app.js file you require that package. Then Laravel mix will take care of combining all required packages into one javascript file.
I suggest you read this documentation for more information about Laravel Mix. This tutorial is useful also.
I created a fresh laravel 5.3 project inside my xampp localhost environment. I went to the home page and it appeared as usual, with the pretty styles and all. But there is the new artisan command make:auth that sets-up a functioning registration system. But when I go to the register or login page, it should appear with the pretty styles, but instead it's appearing like this:
Any help?
I had the same problem. In my case I noticed that my app.css was empty. Solved it by using the following commands:
php artisan auth vue
npm install
npm run dev
Reference that I used for this problem with Laravel 6: Laravel 6.0 app.js only has require('.bootstrap');?
Try this
-Make sure that you are extending the master layout file(the default or your custom one)
-changes links like this
<link rel="stylesheet" type="text/css" href="{{asset('css/mycss')">
Share more code please if this did not work (folder structure , register.php)
I have a strange problem with Yii & Jquery:
When I open a page which uses ajax/jquery on localhost Yii does automatically add asset include calls to the of the page:
<link rel="stylesheet" type="text/css" href="/PATH/assets/f72b359d/style.css" />
<script type="text/javascript" src="/PATH/assets/2e442e1a/jquery.js"></script>
<script type="text/javascript" src="/PATH/assets/2e442e1a/jquery.cookie.js"></script>
However when I run same code on the server Yii does not do it hense no Jquery available.
I'd appreciate if someone could direct to a way to solve it.
It seems like you're not registering jQuery in the correct way. You must add the following line in /protected/views/layout/main.php before </head> tag:
<?php Yii::app()->clientScript->registerCoreScript('jquery'); ?>
It will load jQuery automatically. Remember, if the YII_DEBUG flag is on it will load non-minified version, when deactivated (on production) it will load minified version. Hope this will fix your problem.
If all is working on your local machine it might be a permission problems
Have you checked that /assets is writable on your server ?
Yii publishes the assets it needs at runtime in this directory