I have a project in laravel it work fine in my local, Then I am learning how to deploy it to laravel using serverless but when I deployed it, shows a blank page:
This is what I have done:
composer require bref/bref bref/laravel-bridge
php artisan vendor:publish --tag=serverless-config
Then it creates the yml file:
serverless.yml
service: laravel
provider:
name: aws
# The AWS region in which to deploy (us-east-1 is the default)
region: us-east-1
# The stage of the application, e.g. dev, production, staging… ('dev' is the default)
stage: dev
runtime: provided.al2
package:
# Directories to exclude from deployment
exclude:
- node_modules/**
- public/storage
- storage/**
- tests/**
functions:
# This function runs the Laravel website/API
web:
handler: public/index.php
timeout: 28 # in seconds (API Gateway has a timeout of 29 seconds)
layers:
- ${bref:layer.php-74-fpm}
events:
- httpApi: '*'
# This function lets us run artisan commands in Lambda
artisan:
handler: artisan
timeout: 120 # in seconds
layers:
- ${bref:layer.php-74} # PHP
- ${bref:layer.console} # The "console" layer
plugins:
# We need to include the Bref plugin
- ./vendor/bref/bref
In the documentation says this:
By default, the Laravel-Bref package will automatically configure Laravel to work on AWS Lambda
Then I run this commands:
php artisan config:clear
serverless deploy
Then it says that everything was ok and displays the endpoint:
ANY - https://xxxxxxxxxx.execute-api.us-east-1.amazonaws.com
The laravel project displays a blank page, then I inspected the code, it had this:
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Scripts -->
<script src="https://xxxxxxx.execute-api.us-east-1.amazonaws.com/js/app.js" defer=""></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="https://xxxxxxxx.execute-api.us-east-1.amazonaws.com/css/app.css" rel="stylesheet">
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
</body></html>
Then I copied the js url:
https://xxxxxxx.execute-api.us-east-1.amazonaws.com/js/app.js
pasted in the browser and it displays the same blank page!!
After that I created a new bucket , made it public and added some policies:
{
"Version": "2012-10-17",
"Id": "Policy1615766544442",
"Statement": [
{
"Sid": "Stmt1615766541336",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::bucket-name/*"
}
]
}
Run these commands:
npm run prod
aws s3 sync public/ s3://bucket-name/ --delete --exclude index.php
added this to the .env file:
MIX_ASSET_URL=https://bucket-name.s3.amazonaws.com
And just in case I created a new enviroment variable in the lambda function with the same values
Then deploy it again:
serverless deploy
But again it displays the same blank page. it looks the js an css are not being uploaded properly.
What is going it? thank you.
I would like to load vendor assets, downloaded with composer inside vendor directory, from my twig template.
Using a relative path is one solution (in this example I'm going to include bootstrap css, but the same problem is for any other libs required from composer, as jQuery, jQueryUI etc. )
<link rel="stylesheet" href="{{ asset('../vendor/twbs/bootstrap/dist/css/bootstrap.min.css') }}" >
Symfony docs suggest to use asset:install in order to generate a symlink from vendor directory to public, but I was unable to understand how it works.
assets:install -h wasn't so clear to let me understand how to link a specific vendor path to the public directory.
Creating a simlink with
ln -s /path/of/vendor/lib /path/public/dir
works fine but, symlinks created will be deleted every time I look for an update with composer.
Any idea about "a best practice" to include assets from vendor directory?
Thank you
In terms of 'Best Practice', I generally use npm with gulp or something to that effect, which generates distribution css and js files that are output to a designated file in public/.
Here's an example from a recent project package.json file
{
"devDependencies": {
"bootstrap": "^4.1.3",
"gulp": "^4.0.0",
"gulp-concat": "^2.6.1",
"gulp-sass": "^3.1.0"
},
"scripts": {
"compile:styles": "gulp styles"
}
}
Rather run npm install --save-dev bootstrap gulp gulp-concat gulp-sass to get the latest versions etc.
And you'll need this gulpfile.js too
var gulp = require('gulp');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
gulp.task('styles', function(){
return gulp
.src([
'app/Resources/sass/main.scss',
])
.pipe(sass({outputStyle:'compressed', includePaths: ['node_modules']}).on('error', sass.logError))
.pipe(concat('styles.min.css'))
.pipe(gulp.dest('public/css'));
});
Once setup, you can run npm run compile:styles from the console and the app/Resources/sass/main.scss SASS file will be pre-processed, minified and output to public/css/styles.min.css.
Note that the gulp file includes the node_modules folder so you can import bootstrap inside the main.scss file, e.g.
$primary: #55a367;
#import 'bootstrap/scss/bootstrap';
From a twig template:
<link rel="stylesheet" type="text/css" href="{{ asset('css/styles.min.css') }}">
I generally commit both the main.scss and styles.min.css
The reason why you can't tell the assets:install to link and arbitrary vendor directory is that the command is designed to loop through the list of installed bundles and link a well-known directory (Resources/public) directory if it exists. It relies on both the short bundle name and the directory existing, so it can only work with symfony bundles, there's no support for other libraries like bootstrap or jquery. (Link to current command source).
The recommended way to handle frontend libraries nowadays is encore.
In a situation where that's not possible, you could use composer scripts. I wouldn't call this "best practice", might end up being more trouble than it's worth but is an option you can consider.
You would create a shell, php script or console command where you basically replicate the functionality of assets:install to link your library assets. You will still need to manually update the script when you install a new library, but you can configure it to automatically run after installing or updating packages.
Copy this simple sample bash script into you project directory, name it install_vendors.sh:
#!/bin/bash
BASE_PATH=`pwd`
PUBLIC="public"
if [ "$1" != "" ]; then
PUBLIC=$1
fi;
PUBLIC=${BASE_PATH}/${PUBLIC}/vendor
VENDOR=${BASE_PATH}/vendor
rm $PUBLIC -rf
mkdir $PUBLIC
function link_asset
{
SOURCE_DIR=${VENDOR}/$1
TARGET_DIR=${PUBLIC}/$2
ln -s $SOURCE_DIR $TARGET_DIR
}
link_asset twbs/bootstrap/dist bootstrap
Add it to the scripts section of composer.json and the auto-scripts:
"scripts": {
"vendors:install": "bash install_vendors.sh",
"auto-scripts": {
"cache:clear": "symfony-cmd",
"assets:install %PUBLIC_DIR%": "symfony-cmd"
"#vendors:install"
},
// ...
}
You can also execute it at any time with composer run vendors:install.
Then include them in your twig files: {{ asset('vendor/bootstrap/css/bootstrap.min.css') }}.
For my admin panel I extract all the assets including the manifest-json.js to mix.setPublicPath(path.normalize('public/backend/')).
All the files get correctly added to the backend folder, and the manifest-json.js file looks as follows:
{
// all correct here
"/js/vendor.js": "/js/vendor.js",
"/js/app.js": "/js/app.js",
"/css/app.css": "/css/app.css",
"/js/manifest.js": "/js/manifest.js"
}
the problem is that when using
{{ mix('backend/css/app.css') }}
in my blade-files, it looks in public/manifest-json.js instead of looking for it in backend/manifest-json.js.
How can I make sure the right manifest-json.js file is used?
I had same exception after deployment laravel project to server. It was working perfectly fine on localhost but after lot of research I found a solution. If you encounter this exception on server then you have to bind your public path to public_html
Just go to under the app/Providers, you will find your AppServiceProvider file and inside boot() method make the binding as below.
$this->app->bind('path.public', function() {
return base_path().'/../public_html';
});
i solved my problem running this command
npm install
and then
npm run production
Thank You.
The problem I faced was that the mix()-helper function by default looks for the manifest-json file in /public/manifest-json.js so if you store that file on any other directory level then it will throw that error.
Let's say the manifest-json file is stored in public/app/manifest-json.js, then for a file located in public/app/css/app.css you would use:
<link rel="stylesheet" href="{{ mix('css/app.css', 'app') }}">
The mix()-helper function allows for a second argument, the directory of the manifest file. Just specify it there and it will use the correct manifest file.
i have same problem as questioner: manifest does not exist for solving it what i have done is ran 2 commands as following:
npm install
and then
npm run dev
and the error is solved now. yippi.
In shared hosts and laravel 5.6 tested:
after doing standard levels such as explained here;
two levels needed:
in app/Providers/AppServiceProvider.php:
$this->app->bind('path.public', function() {
return realpath(base_path().'/../public_html');
});
and in public_html file make .htaccess file with content:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?/$1 [L]
</IfModule>
<IfModule !mod_rewrite.c>
ErrorDocument 404 /index.php
</IfModule>
source: here
this file most change for some situations.
that's all and solved my problem
I had the same issue with a Laravel package, its assets were not published:
This solved the issue for me:
php artisan vendor:publish --tag=telescope-assets --force
Sources:
https://github.com/laravel/telescope/issues/136
https://github.com/laravel/telescope/issues/250
There are 3 ways to solve it, I summarize what the colleagues said above:
The problem is because, you are using mix() in the views.
<link rel="stylesheet" href="{{ mix('dist/css/app.css') }}">
solution 1
change it to this.
<link rel="stylesheet" href="{{ asset('dist/css/app.css') }}">
solution 2
If you don't have root access:
Modify the App\Providers\AppServiceProvider file and add the following to the boot() method.
$this->app->bind('path.public', function() {
return base_path().'/../public_html';
});
solution 3
if you have root access run:
npm install & npm run dev
try the following commands:
npm install
npm run dev
I have same exception after deployment laravel project to (shared) server when trying to reach the login and register page. It works fine on local machine.
I kept the file and folder structure the same as on my local environment (all files that our in the public folder locally are in the public_html folder on the server).
The solution mentioned above seems to work. Adapted to my file and folder structure I added the following code to AppServiceProvider file and inside boot() method.
$this->app->bind('path.public', function() {
return realpath(base_path().'/public_html');
});
The only issue now is that the CSS of the login, register and dashboard page is messed up. I'm totally new to Livewire, I have no clue how to fix that.
You should run this commands to install npm dependencies and make your frontend files:
$ npm install
$ npm run dev //or production
Now you're done and you can run your laravel project:
$ php artisan serve
In a shared hosting environment, Remove the mix e.g. {!! script(mix('js/manifest.js')) !!}
should be changed to
{!! script('js/manifest.js') !!}
This actually works for me
I got the same error
because when I run
npm install
npm run dev
I got some error.
It was fixed when I updated my nodejs version.
I'm just posting maybe someone would need it.
For me it's worked when I changed in my blade file css and js pointed path. As bellow:
In my blade was this:
<link rel="stylesheet" href="{{ mix('dist/css/app.css') }}">
I changed the MIX to ASSET as:
<link rel="stylesheet" href="{{ asset('dist/css/app.css') }}">
Also the same on JS file to:
<script src="{{ asset('dist/js/app.js') }}"></script>
If it's the same thing for everybody, in my case laravel-mix seems to be not installed so without changing any files I just installed laravel-mix by running:
npm install laravel-mix#latest --save-dev
For bind your public path to public_html, in file index.php add this 3 lines:
$app->bind('path.public', function() {
return __DIR__;
});
This is work for me on shared hosting
Try to Add your public route to your app/Providers/AppServiceProvider.php
public function register()
{
$this->app->bind('path.public',function(){
return'/home/hosting-name-folder/public_html';
});
}
Directory Structure like this
--- public
--- app
--css
--app.css
--js
--app.js
Import css js in laravel blade file like this
<link rel="stylesheet" href="{{ asset('app/css/app.css') }}">
<script src="{{ asset('app/js/app.js') }}" type="text/javascript"></script>
If you are having this issue with Laravel Nova or telescope then perhaps you are really missing mix-manifest file. You should have that file inside public/vendor/toolname/
Where toolname can be Nova or Telescope. If you have that folder, you should go ahead and put in your server otherwise you will first have to publish the assets & then put it on server.
I change resources/layouts/guest.blade.php and resources/layouts/app.blade.php
<!-- Styles -->
<link rel="stylesheet" href="{{asset('css')}}/app.css">
<!-- Scripts -->
<script src="{{asset('css')}}js/app.js"></script>
and resources/css and resources/js copy my public folder
The Mix manifest does not exist.
You can solve this problem by updating the node version.
actually when you run command npm run dev,
show the error message "Error: You are using an unsupported version of Node. Please update to at least Node v12.14"
so easily you can fix it by updating the node js version
Thanks
if your previous setup is correct.but you are looking this type of error it shows The Mix manifest does not exist. then write these command .
npm ci
npm run dev
I resolved my problem by this command :
npm install
npm run dev
Worked for me on a fresh install of Laravel 9 with Jetstream(using Laradock).
npm run install && npm run development
When running npm run dev the mix was not compiling the files and creating the mix-manifest.json
step1
npm install
npm run production
step 2
refresh by simply closing and opening the project
step 3
replace <link rel="stylesheet" href="{{ mix('css/app.css') }}">
with
<link rel="stylesheet" href="/css/app.css/">
Here you go!!!!!
I got the same problem when hosting on cpanel
just change from
{{ mix('backend/css/app.css') }}
Becomes
{{ asset('backend/css/app.css') }}
it's solve my problem.
don't forget to upvote if this answer help u
There are a lot of answers to these questions, I am posting this question just in case if any miss these points.
Method: 1
Make sure to check the .gitignore file. sometimes it's listed there and doesn't make the file be pushed to git repo
Method: 2
Add this code in webpack.mix.js so you will exactly know where it's placing the mix-manifist.json file
mix.webpackConfig({
output: {
path: __dirname + "/public"
}
});
I had the issue on a shared host, where I was not able to run npm commands. Then I used the simplest way. In the /vendor/laravel/.../Foundation/Mix.php replace
i$manifests[$manifestPath] = json_decode(file_get_contents($manifestPath), true);
to
$manifests[$manifestPath] = json_decode(file_get_contents('https://your-domain.com/mix-manifest.json'), true);
Not recommended, but it works. You can use it as your last try.
Faced the same problem on both Windows and Ubuntu. Solved it on Ubuntu (and I presume the solution is simillar in Windows). The problem was due to the fact that my installed npm version was too old.
The solution for me was the following. I installed nvm (NodeVersionManager -version 0.39.1) which allowed me to switch to the latest stable version of node (v16.14.0) and then install npm 8.5.0.
Detailed steps:
Linux bash terminal commands:
touch ~/.bash_profile ~/.bashrc ~/.zshrc ~/.profile
sudo apt install curl
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
logout and login Ubuntu user
nvm --version
nvm ls-remote
nvm install 16.14.0
node --version
...then inside the laravel project:
npm ci
npm install -g npm#8.5.0
npm audit fix
npm run dev
Try out this one!!
<script src="{{ asset('js/app.js') }}" defer></script>
It works for me
I found new solution
The problem is mix manifest right?
So just redirect to the mix manifest feature. for example, you have:
{{ style(mix('css/backend.css')) }}
just change your code into
{{ style('css/backend.css') }}
it works for me
I have been trying and failing for a week to get Kalabox working with a WordPress install that has a nested web root with Pantheon. I've found some great resources, but many of them are for Drupal and they don't seem to translate to the WP installs, like the great post by Tandem here: https://www.thinktandem.io/blog/2017/05/20/using-pantheon-s-nested-docroot-with-kalabox/
Does anyone have a quick walkthrough that would work? Thanks!
I figured it out! Here's what it took:
1. Setup A Site In Pantheon
Create Sites
2. Clone the Site to your local machine using Kalabox
Make sure you've installed Kalabox on your machine. This will also install Docker, if you haven't already installed it. Now, open your terminal.
mkdir -p ~/Kalabox
cd ~/Kalabox
kbox create pantheon
# follow the prompts to clone down your Pantheon site
3. Add Your Site Code
This is where the real work starts. Make sure you're in the main Kalabox directory. I'm using the excellent Advanced Wordpress On Pantheon as the boilerplate for this app. But you can use whatever you'd like.
# replace text in < > with your site name
cd ~/Kalabox/<your-site-name>
rm -rf code/
# Clone this or copy your own site code into the code directory
git clone https://github.com/ataylorme/advanced-wordpress-on-pantheon.git code
If you're using the Advanced WordPress install above, type the following lines, as well:
cd code/
./bin/local-build.sh
Make certain you added your code into the ~/Kalabox/<your-site-name>/code/ directory.
You can visit your site now at http://.kbox.site on your browser, but if you have a nested web root, you'll likely see an Nginx 500 error. This is the problem we're trying to fix!
4. Edit The Kalabox Setup to Allow A Nested Web Root
This part is the secret sauce. We have to get into the Docker container that Kalabox has setup and change the nginx configuration files. If all that sounds like non-sense to you, don't worry. These simple instructions should help you do it! Back to the terminal!
docker ps
This dumps a table with a list of the running Docker containers. Find the one that says nginix under the Image column. Look immediately to the left in the Container ID column. Note, copy and/or write down the first four-or-so letters of that container ID. You'll use those in the <container-id> part of this next command:
docker exec -i -t <container-id> bash
This opens a pseudo remote shell with your nginx container. Yay! Now we can edit the nginx files and get our site up-and-running! The command line probably changed a bit, showing your user as root#<your-site-name>. That means it worked.
The nginx container doesn't have a text editor downloaded by default. So, we'll download a tiny little text editor called Nano.
apt-get update
apt-get install nano
Once those commands are finished running, we can edit the config file:
nano /etc/nginx/conf.d/default.conf
This opens the Nano editor with the configuration file we're trying to edit. Look and change the following lines:
# This one is near the top of the file
# Before
root /code;
# After
root /code/web;
# These next two are near the bottom of the file.
# This exact line appears twice--once in the `location ~ ^/simplesaml/`
# block, and once in the `location ~ \.php$` block. Edit it in
# BOTH locations.
#
# Before
fastcgi_param SCRIPT_FILENAME /code/$fastcgi_script_name;
# After
fastcgi_param SCRIPT_FILENAME /code/web/$fastcgi_script_name;
When you're done with that, type <Ctrl-o> <Enter> <Ctrl-x> to save your work and exit. You're back at the pseudo shell for your Docker container. Type exit to go back to your normal command line.
5. Rebuild Kalabox & Test It Out!
Make sure you're in the ~/Kalabox/<your-site-name> directory, and type kbox restart just to make sure you've got everything cleared out of the Kalabox caches. Kalabox will stop and restart your site for you. Once it's done, visit http://.kbox.site in your browser to see your work!
Extra Goodies
Upgrade to PHP 7: Open ~/Kalabox/<your-site-name>/kalabox.yml in your favorite editor, and change line 33 to php: 70.
Remove Undefined Index: NONCE_KEY error: open ~/Kalabox/<your-site-name>/config/php/prepend.php and go to roughly line 55 which reads $_ENV['NONCE_SALT'] = getenv('NONCE_SALT');. Below it, add a similar line: $_ENV['NONCE_KEY'] = getenv('NONCE_KEY');
Originally tried out Heroku (in order to learn how to use it) and deployed an app, tastyall. Eventually went into Heroku to delete everything done in order to start over (what is below). My Heroku dashboard showed no apps before starting what is below.
My blackopp folder on my desktop contains my empty composer.json and idex.php test file which says contains code to say “Hello”.
My question: why can I not get rid of the old app info that seems to be causing confusion? Where is this coming from? I see it says: rename tastyallphp.php => blackopp.php (100%) but can't seem to make sense of this since there should be no ref to "tasty..." anything.
$ cd /Users/xxxx/Desktop/blackopp
$ pwd
/Users/xxxx/Desktop/blackopp
$ git init
Reinitialized existing Git repository in /Users/xxxx/Desktop/blackopp/.git/
$ git add .
$ git commit -m "initial commit"
[master bff3b6c] initial commit
Committer: xxxx
Your name and email address were configured automatically……
1 file changed, 0 insertions(+), 0 deletions(-)
rename tastyallphp.php => blackopp.php (100%)
$ heroku create blackopp
Creating blackopp... done, stack is cedar-14
https://blackopp.herokuapp.com/ | https://git.heroku.com/blackopp.git
$ git push heroku master
remote: ! No such app as tastyallapp.
fatal: repository 'https://git.heroku.com/tastyallapp.git/' not found
I wonder if deleting my entire Heroku account and starting over would be easier but thought to ask my qestion first.
The app name tastyallapp will be coming from the definition of your heroku remote in the repository config. This is what's used to determine the destination when you do git push heroku master.
Starting over would be one option, but if you'd like to try to fix it you can do:
git remote remove heroku
to remove the previous remote from the old app, and then:
heroku git:remote -a blackopp
to add a new remote that matches the current app name.