Sylius-Standard admin panel : no css/js - php

I've installed the latest Sylius-Standard (based on Sylius 1.0#dev) and followed the quick tutorial. Everything is working fine except the admin panel, where CSS and JS return 500 when accessed in dev mode (via app_dev.php).
I can see that they are fetched from a path that does not include app_dev.php. For instance, app.js is fetched from http://my.local.domain/assets/admin/js/app.js, which returns a 500 because it tries to access the prod database that is not setup.
There should be no need to create the prod database or install prod assets to access the admin panel in dev mode — what am I doing wrong?

Sylius use a gulp library to manage css and js. The following command should fix your problem:
$ npm install
$ npm run gulp
Edit
After a few years, this is the proper answer: https://stackoverflow.com/a/59135635/4243630

In order to see a fully functional frontend you will need to install its assets.
Sylius uses Gulp to build frontend assets using Yarn as a JavaScript package manager.
Having Yarn installed, go to your project directory to install the dependencies:
$ yarn install
//Then build the frontend assets by running:
$ yarn build
We are on Sylius 1.2.x, we followed the official documentation
This sorted out that problem for us.
If you are on 1.x this is the link to the documentation
This should solve your problem.

Related

How to set bootstrap in Laravel 6

in browser in console part shows the Error:
GET http://localhost:8000/asset/app.js net::ERR_ABORTED 404 (Not Found)
then I tried to install boostrap using documentantion steps are.
1. composer require laravel/ui --dev.
2. php artisan ui bootstrap.
3. php artisan ui bootstrap --auth.
4. npm install.
but here again in 4th Section it shows the Error and that the command not found.
Still not working bootstrap
You are saying you are getting an error with the 4th command. I assume you do not have NPM installed.
Try installing NPM from here https://www.npmjs.com/get-npm. NPM is Node Package Manager. It will handle the front end dependencies for you. And is used to compile everything.
Also, after npm install run npm run dev to compile the javascript and such.
Install node to enable npm.
Also you can include bootstrap CDN directly in the tag in your blades like a normal HTML project without installing it.
Here's how to add bootstrap CDN in your HTML file - Remember, blades are finally HTML files.
Bootstrap CDN

Laravel 6 user auth page not working properly

Today I installed laravel 6.x version for a new project.
I have PHP 7.3 in my system so laravel 6 was successfully installed.
Then I run this command to set the Auth UI for VueJS.
artisan ui vue —auth
along with this command:
composer require laravel/ui --dev
But when I checked my login page, it was just an html skeleton.
I checked over the internet and found a solution and tried to run this command,
npm run dev
But still am getting an ugly login page without css and Js files. I checked for CSS and JS files but found no solution.
Anyone please help and tell me how can I setup the front end scaffolding.
Thanks in advance
The command to implement Auth is as follows:
composer require laravel/ui
php artisan ui vue --auth
If your Login and Register page only shows plain HTML. And CSS is not loading properly then run this two command:
npm install
npm run dev
OR
Simply you've to follow this two-step.
composer require laravel/ui
php artisan ui:auth
This will solve your problem for sure!
Check if your npm install shows any deprecation error,
if shows then go to nodejs official site https://nodejs.org/en/ and download and install latest one in your system.
Then in your terminal run:
npm install
npm run dev
That's it.
In your laravel public folder, css and js should have shown after that npm run dev command.
Now your login and register page should be nice looking as expected.
Do one thing,
1) Create app.css and put into project_name/public/css/
2) Create app.js and put into project_name/public/js/
I believe it will work.
If not, make sure you have used these commands before.
npm install
npm run dev
Thanks.

In which location install npm and npm module in existing CodeIgniter

I have already a CodeIgniter application using RestClient and mysql.Chat is running well via Push Notification.
Now Need to integrate real time chat with node js and socket.io. I am new for node js.
Please suggest where I install npm or include the npm module.
Thanks..
The node modules can be installed globally or locally. Usually it goes into root of the project.
Put your project dependencies into package.json file and then execute npm install command.
https://docs.npmjs.com/files/package.json

How correctly install latest Bootstrap version into my Laravel 5.4 web application?

I am pretty new in PHP and moreover in Laravel and I have the following problem: I have to correctly install latest Bootstrap CSS framework version into my Laravel application.
Into the Bootstrap download page: http://getbootstrap.com/getting-started/#download
it says that I can do it using composer by this statment:
composer require twbs/bootstrap
So I tryied and I obtained this output in my console:
Andrea#Andrea-PC MINGW64 /c/xampp/htdocs/HotelRegistration
$ composer require twbs/bootstrap
Using version ^3.3 for twbs/bootstrap
./composer.json has been updated
Loading composer repositories with package information
Updating dependencies (including require-dev)
Package operations: 1 install, 0 updates, 0 removals
- Installing twbs/bootstrap (v3.3.7) Downloading: 100%
Package illuminate/html is abandoned, you should avoid using it. Use laravelcollective/html instead.
Writing lock file
Generating autoload files
> Illuminate\Foundation\ComposerScripts::postUpdate
> php artisan optimize
Generating optimized class loader
The compiled services file has been removed.
What exactly means the previous output? It has been successful? My doubt is that I can't find the bootstrap.css file into the .../resources/assets directory of my project.
Why? What am I missing? How can I use Bootstrap into my project?
EDIT 1: I saw that Composer have putted BootStrap in this folder:
.../vendor/twbs/bootstrap/dist/css/bootstrap.css
So, following this SO link: How to setup bootstrap after downloading via composer?
I have tryed to do:
php artisan asset:publish --path="vendor/twbs/dist/css" bootstrap/css
to publich the content of the vendor/twbs/dist/css as an asset but I obtain this error message:
Andrea#Andrea-PC MINGW64 /c/xampp/htdocs/HotelRegistration
$ php artisan asset:publish --path="vendor/twbs/dist/css" bootstrap/css
[Symfony\Component\Console\Exception\CommandNotFoundException]
There are no commands defined in the "asset" namespace.
So it seems that asset statment doesn't exist.
What have I to do?
You are importing bootstrap wrong way. Mostly laravel uses composer for pulling server-side libraries. Bootstrap is used for front end basically.
Laravel By Default Provides Bootstrap for you, see here.
Following are the steps which will help you.
Step 1 : Check Node.js and NPM are installed on your machine.
node -v
npm -v
If not installed don't worry here is the link.
Step 2 : (Considering you installed node.js) Go to project root folder and execute following command.
npm install
this command will download all pre-requisites along with your bootstrap.
Step 3 : compile the required js files.
npm run dev
Step 4 : Add js file to your application.
<script src="/js/app.js"></script> (Or it would be already imported)
That's it!
You can find more here and here
Hope it helps you!
If i were you i wouldn't do all of that, after a fresh installation of laravel 5.4 twitter bootstrap come out of the box you just need to load your dependancies using npm .
Install npm dependancies :
npm install
Then, Implementing Bootstrap into your project is now simple. Open resources/assets/sass/app.scss and see this line:
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
now to compile all bootstrap sass files to your public folder public/ you should use npm run dev or npm run production if you're in production environnement .
then you have all the Bootstrap styles ready for you to use.
That’s literally all that is required.
****Bootstrap 4 can be easily installed with following steps.****
Step 1 — Remove existing bootstrap
Uninstall Bootstrap
npm uninstall --save-dev bootstrap-sass
Step 2 — Install Bootstrap 4
Install Bootstrap 4 beta and popperjs
npm install --save-dev bootstrap#^4.0.0-beta.2 popper.js
Step 3 — Update code references
In resources/assets/js/bootstrap.js replace
try {
window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');
} catch (e) {}
with
try {
window.$ = window.jQuery = require('jquery');
window.Popper = require('popper.js').default;
require('bootstrap');
} catch (e) {}
In resources/assets/sass/app.scss replace
#import “~bootstrap-sass/assets/stylesheets/bootstrap”
with
#import “~bootstrap/scss/bootstrap.scss”
In resources/assets/sass/_variable.scss replace
$font-size-base: 14px;
with
$font-size-base: 0.875rem;
Step 4 — Recompile Assets
Run
npm run dev
Now you have removed all Bootstrap 3 references and installed Bootstrap 4
This worked for me:
run php artisan preset bootstrap
install node.js if not from the official website
run npm install
run npm run dev
And use these at your HTML:
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="{{ asset('js/app.js') }}"></script>

Create a customized laravel base Project and install it for future projects

I install a new Laravel project and I have been applied Many changes on it for my own purposes. for Example my custom admin panel design and related css and javascript files.
In addition to, I added some packages that are required on whole project.
Now , if I want to Start a new Project , I must to install a fresh laravel Project and add those files and packages manually again that It takes a lot of time.
Is there a way that I could store this base laravel project on it (for example Github) and install it via composer?
Yes, you can use Github to create a private/public repository then when you start e new project you clone that repository and then use composer install command to get the dependencies.
Yes, it's possible.
Here are all the steps :
git clone xxx.git
composer install (make sure you have included .env.example in your git for the app key)
npm install
bower install
php artisan migrate (if, I hope, you use migrations)
gulp
And you are ready to work on your project.

Categories