I'm new to shared hosting deployment and I need help to deploy an app on a shared hosting server that uses CPanel.
I have deployed thee same app before on a CPanel shared hosting, by zipping my files and uploading them to the subdomain. But as far as I am concerned, that is very wrong since all my development files are exposed to anybody
Second time I tried, I copied the files from the git repo via SSH, and the installing composer, but when I try to install node to use npm and run the command npm install and npm run dev. Surprise! I had errors such as Javascript heap out of memory Zone allocation failed and Aborted.
So I would like to know:
How to install properly node dependencies from a laravel package.json file on CPanel, without breaking down the server or misconfiguring something
Any help would be very appreciated. I there's a way to granmt or reward anyone here, I would like you to show me how.
I have to get this working before next saturday, therefore any help would be very nice.
This is my package.json, just in case you need it:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"#tailwindcss/custom-forms": "^0.2.1",
"#tailwindcss/forms": "^0.2.1",
"#tailwindcss/typography": "^0.3.0",
"alpinejs": "^2.7.3",
"autoprefixer": "^10.0.2",
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"laravel-mix-merge-manifest": "^2.0.0",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"postcss-import": "^12.0.1",
"tailwindcss": "^2.0.1"
},
"dependencies": {
"sweetalert2": "^10.16.0"
}
}
Thanks in advance.
So what happened here, is that I had to delete all node_modules folder. Then, I ran npm update --legacy-peer-deps command in order to have all packages according to the package.json file. After that, I could run
node_modules/.bin/webpack --config=node_modules/laravel-mix/setup/webpack.config.js
without further complications.
Related
I tried use minify method like below:
mix.minify('public/js/folder/script1.js');
mix.minify('public/js/folder/script2.js');
but it will create script1.min.js and script2.min.js
I also tried :
mix.minify('public/js/folder/script1.js', 'public/js/folder/script1.js');
mix.minify('public/js/folder/script2.js', 'public/js/folder/script2.js');
and still create same files. How to minify without add suffix .min.js?
I can't found laravel-mix solution, so I used another solution using uglifyjs-folder :
npm install uglifyjs-folder --save-dev
add && uglifyjs-folder public/js -e -x .js -o public/js to package.js inside prod script like below:
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production && uglifyjs-folder public/js -e -x .js -o public/js",
"production": "mix --production"
},
it will minify all .js files on public/js folder after running npm run prod.
Maybe it's not the best practice, but it worked for existing project that already bad practice;
Im using laravel 5.2
Package.json
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"bootstrap-sass": "^3.0.0",
"gulp": "^3.9.1",
"laravel-elixir": "^5.0.0",
"laravel-elixir-webpack": "^1.0.1",
"laravel-elixir-webpack-official": "^1.0.2",
"laravel-mix": "^2.1.14",
"lodash": "^4.16.2",
"vue": "^2.0.1",
"vue-resource": "^1.0.3",
"webpack": "^2.7.0"
},
"dependencies": {
"get-ssl-certificate": "^2.1.2",
"laravel-elixir-webpack-official": "^1.0.2",
"vuedraggable": "^2.16.0"
}
}
I tried both firefox and google chrome extension which says its disabled
This is the line that restrict this
devtools: process.env.NODE_ENV !== 'production'
to my two sense this must NOT happen.
Steps I took till now :
1- remove node_models install it again using npm install
2- replacing the vue file with a version provided in Vuejs.org
the icon is there colorful but no Veo devtool, when i use CDN on top of my header instead i get the devtools!
What is causing this conflict! Im confused
thanks for any help
Okay long story short the problem caused because it was not compiling my files and devmode was off in the version it was complied before.
I was trying to use vue on laravel 5.2 , faced many problems so i decided to install
laravel 5.3 by :
composer create-project --prefer-dist laravel/laravel myapp "5.3.0"
after that I executed :
npm install
and it started to install the dependencies and all , when it was done I tested gulp command to see if its a success compile which it was. so I moved package.json package-lock.json and gulpfile.js from my Laravel 5.3 to laravel 5.2 run npm install again and all Done!
I've seen this question being answered a couple of times on the net. However, I'm just not getting it to work. I hope you can help.
I'm using Laravel 5.5 with Laravel Mix. Instead of manually loading some of my needed js files into the specific directories, I want to install the packages via npm and require them in laravel mix.
This works with bootstrap out of the box. I swapped the 3.3.7 version for the 4.0.0 alpha6.
npm install bootstrap-v4-dev -D
Then in resources/assets/js/bootstrap.js I changed it to look like this
window._ = require('lodash');
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
try {
window.$ = window.jQuery = require('jquery');
require('bootstrap-v4-dev');
} catch (e) {}
and it works. I can run npm run dev just fine. Now, I want to do the exact same thing with another npm package. So I do npm install now-ui-kit -D my package.json now looks like this
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.16.2",
"bootstrap-v4-dev": "^4.0.0-alpha.6",
"cross-env": "^5.0.1",
"jquery": "^3.1.1",
"laravel-mix": "^1.0",
"lodash": "^4.17.4",
"now-ui-kit": "^1.0.1",
"popper.js": "^1.11.1",
"vue": "^2.1.10"
},
"dependencies": {
"now-ui-kit": "^1.0.1"
}
}
Then in the bootstrap.js file, I add require('now-ui-kit');, but now when I try to compile, I get the following error:
ERROR in ./resources/assets/js/bootstrap.js
Module not found: Error: Can't resolve 'now-ui-kit' in '/home/vagrant/code/user/resources/assets/js'
# ./resources/assets/js/bootstrap.js 15:0-21
# ./resources/assets/js/app.js
# multi ./resources/assets/js/app.js
I also tried placing the require('now-ui-kit'); in app.js or even in webpack.mix.js..
Nothing worked, and I really don't get what I'm doing wrong.. Could someone help?
Follow these steps:
Install npm package let install jQuery npm i jquery.
Create a .js file say resources/js/package.js
Now open webpack.mix.js add package.js in webpack.mix.js
mix.js([
'resources/js/package.js',
'resources/js/otherJsFile.js'
], 'js/app.js').extract([
// Extract packages from node_modules to vendor.js
'jquery'
])
Write this in resources/js/package.js :
import $ from 'jquery';
Finally use js/vendor.js, js/app.js on .blade file.
Now you can jQuery on your website imported from node_modules
I recently switched to laravel 5.4.
When i tried to run npm run watch I get the following error --
I didn't even done any edit in my sass file.
Sass File looks like this ---
// Fonts
#import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);
// Variables
#import "variables";
// Bootstrap
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
How can i solve this?
My package.json file looks like this --
{
"private": true,
"scripts": {
"dev": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"hot": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.15.2",
"bootstrap-sass": "^3.3.7",
"jquery": "^3.1.0",
"laravel-mix": "^0.5.0",
"less": "^2.7.2",
"less-loader": "^2.2.3",
"lodash": "^4.16.2",
"vue": "^2.0.1"
}
}
This is a current issue with Laravel Mix. There is an open issue discussion on GitHub for this.
https://github.com/JeffreyWay/laravel-mix/issues/200
According to the some of the users you could use Laravel Mix version 0.5.8 and your problem would go away. Edit your package.json file to have "laravel-mix": "0.5.8"
I recommend using this until the issue is resolved.
This seems to be an issue for windows users.
Edit
As of this moment the issues seems to have been resolved. You need to pull in the latest version of Mix and also add "vue-loader": "10.1.0" to your package.json file.
Make sure you have sass installed on your computer. If you don't have it installed, instructions are here: http://sass-lang.com/install.
Then you need to make sure sass is also installed in the project. Reading your package.json it seems you have less instead.
Run: npm i --save-dev sass
By default your project comes with less installed. Locate the file webpack.mix.js from the root folder. find the following line
mix.less('resources/assets/less/app.less', 'public/css')
.less('resources/assets/less/admin.less', 'public/css');
And change it to
mix.sass('resources/assets/sass/app.sass', 'public/css')
.sass('resources/assets/sass/admin.sass', 'public/css/admin');
If you don't see those exact same lines, find something similar.
Im using laravel homestead 0.5.0, I have a fresh install laravel but whenever i try to do npm install--no-bin-links or npm install on the VM or on Powershell or CMD it always give an error.
Maximum call stack size exceeded. windows max path length i guess? anything I can do to avoid this? heres my package.json
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"gulp": "^3.9.1",
"laravel-elixir": "^5.0.0",
"bootstrap-sass": "^3.3.0"
}
}
im using windows 8.1 and virtual box 5
node version is 5.12.0
npm version is 3.10.5
any help is appreciated thanks
screenshot of the error