I have deployed a test application on Vercel to submit a POST request to a planetscale database.
The application works fine under local environment, however after it is deployed, it resulted in a 404 not found when submitted to /api/add. Any idea what seems to be the issue? I have a feeling it may be my vercel.json but I couldn't quite figure out the issue on the doc, and the runtime functions for vercel-php also prevented deployment of app.css and app.js with a 404, so I have instead re-allocated vercel-php to "builds" instead.
https://laravelverceldeployment.vercel.app/
This is my package.json:
{
"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": {
"autoprefixer": "^10.4.2",
"axios": "^0.21",
"browser-sync": "^2.27.7",
"browser-sync-webpack-plugin": "^2.3.0",
"laravel-mix": "^6.0.39",
"lodash": "^4.17.19",
"postcss": "^8.4.5",
"tailwindcss": "^3.0.12",
"vue-loader": "^16.8.3"
},
"dependencies": {
"#inertiajs/inertia": "^0.11.0",
"#inertiajs/inertia-vue3": "^0.6.0",
"#inertiajs/progress": "^0.2.7",
"alpinejs": "^3.7.1",
"vue": "^3.2.26"
}
}
and this is my vercel.json:
{
"version": 2,
"builds": [
{ "src": "/api/index.php", "use": "vercel-php#0.4.0" },
{ "src": "/public/**", "use": "#vercel/static" }
],
"routes": [
{
"src": "/(css|js|images)/(.*)",
"dest": "public/$1/$2"
},
{
"src": "/(.*)",
"dest": "/api/index.php"
}
],
"env": {
"APP_NAME": "laravelverceldeployment",
"APP_ENV": "production",
"APP_DEBUG": "false",
"APP_URL": "https://laravelverceldeployment.vercel.app",
"APP_CONFIG_CACHE": "/tmp/config.php",
"APP_EVENTS_CACHE": "/tmp/events.php",
"APP_PACKAGES_CACHE": "/tmp/packages.php",
"APP_ROUTES_CACHE": "/tmp/routes.php",
"APP_SERVICES_CACHE": "/tmp/services.php",
"VIEW_COMPILED_PATH": "/tmp",
"CACHE_DRIVER": "array",
"LOG_CHANNEL": "stderr",
"SESSION_DRIVER": "cookie",
"VIEW_COMPILED_PATH": "/tmp/views",
"SSR_TEMP_PATH": "/tmp/ssr",
"NODE_PATH": "node"
}
}
in vercel.json, routes dest is mapped to api/index.php.
So url api/ will mapped through index.php ? try with just /add url
Related
Hi everyone I'm new in laravel, I'm using laravel 9, i tried to run (npm run watch) and it's about 30 mins nothing happened,
this's the message i get.
Hopefully I get some answers,
thank you in advance
i have tried npm run dev it doesn't work , so i replace it with npm run build .
this is what my package.json look like:
"private": true,
"scripts": {
"dev": "vite",
"watch": "npm-watch",
"build": "vite build"
},
"devDependencies": {
"#tailwindcss/forms": "^0.5.2",
"alpinejs": "^3.4.2",
"autoprefixer": "^10.4.2",
"axios": "^1.1.2",
"laravel-vite-plugin": "^0.7.3",
"lodash": "^4.17.19",
"postcss": "^8.4.6",
"tailwindcss": "^3.1.0",
"vite": "^4.0.3"
},
"dependencies": {
"npm-watch": "^0.11.0"
},
"watch": {
"build": {
"patterns": [
"src"
],
"extensions": "js,jsx"
}
}
}
I added ( "watch": "npm-watch",)
About a day or 2 ago, I ran my NPM build, but it suddenly gave the error that the polyfill is not provided by default anymore with Webpack 5. I was able to fix a lot of the errors, but it keeps failing.
I get the following errors:
These are just a few of them.
I'm using laravel-mix#6.0.13 in this build with the following webpack.mix.js file:
const mix = require('laravel-mix');
require('mix-tailwindcss');
mix.webpackConfig({
resolve: {
fallback: {
fs: require.resolve('browserify-fs'),
path: require.resolve("path-browserify"),
"crypto": require.resolve("crypto-browserify"),
"https": require.resolve("https-browserify"),
"http": require.resolve("stream-http"),
"vm": require.resolve("vm-browserify"),
"os": require.resolve("os-browserify/browser"),
"stream": require.resolve("stream-browserify"),
"constants": require.resolve("constants-browserify"),
}
}
})
mix.options({ legacyNodePolyfills: false });
mix.js('resources/js/app.js', 'public/js').vue()
.sass('resources/scss/app.scss', 'public/css')
.tailwind('./tailwind.config.js')
mix.sass('resources/scss/admin.scss', 'public/css')
My packages.json:
{
"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": {
"axios": "^0.18",
"bootstrap": "^4.0.0",
"browserify-fs": "^1.0.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^6.0.13",
"lodash": "^4.17.4",
"mix-tailwindcss": "^1.3.0",
"popper.js": "^1.12",
"postcss": "^8.1",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.12",
"sass-loader": "10.*",
"tailwindcss": "^2.1.2",
"vue": "^2.5.7",
"vue-loader": "^15.9.5",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"buefy": "^0.9.6",
"jquery": "^3.6.0",
"mix-tailwindcss": "^1.3.0",
"query-string": "^7.0.0",
"slick-carousel": "^1.8.1",
"vue": "^2.6.12",
"vue-it-bigger": "^0.2.2"
}
}
Does someone know how to fix this?
Solved it!
I added the the NodePolyfillPlugin plugin to my webpack config. I added browserify-fs to resolve.fallback.fs like this.
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")
mix.webpackConfig({
plugins: [
new NodePolyfillPlugin(),
],
resolve: {
fallback: {
fs: require.resolve('browserify-fs'),
}
}
})
After this the build kept failing, i finally figured out that for some reason i had import {vue} from 'laravel-mix' in my app.js . this was giving als the errors. After removing this it ran succesfully!
Uncaught ReferenceError: FullCalendar is not defined when
npm install. If I use the cdn source inside my calendar blade. Calendar will display correctly. However, I change to npm install and I am stuck
composer install
npm i
npm run dev
webpack.mix.js
let mix = require("laravel-mix");
let productionSourceMaps = false;
mix.js('resources/js/app.js', 'public/js')
mix.sass('resources/sass/app.scss', 'public/css')
.sourceMaps()
if (mix.inProduction()) {
mix.version();
}
app.js
import 'jquery';
require('./bootstrap');
import 'moment';
import 'fullcalendar-scheduler';
app.scss
#import "~bootstrap/dist/css/bootstrap.css";
#import "~fullcalendar-scheduler/main.css";
#import "~bootstrap-select/dist/css/bootstrap-select.min.css";
#import "~shop-item/dist/bootstrap/css/bootstrap.css";
#import "~font-awesome/css/font-awesome.css";
#import "variables";
package.json
{
"private": true,
"scripts": {
"dev": "mix",
"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": {
"axios": "^0.21.1",
"css-loader": "^5.2.1",
"laravel-mix": "^6.0.16",
"lodash": "^4.17.21",
"postcss": "^8.2.10",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.10",
"sass-loader": "^11.0.1"
},
"dependencies": {
"autoprefixer": "^10.2.5",
"bootstrap": "^4.5.3",
"bootstrap-datetimepicker": "0.0.7",
"bootstrap-select": "^1.13.18",
"chartjs": "^0.3.24",
"datatables.net": "^1.10.24",
"font-awesome": "^4.7.0",
"fullcalendar-scheduler": "5.6.0",
"jquery": "^3.6.0",
"moment": "^2.29.1",
"popper.js": "^1.16.1",
"style-loader": "^2.0.0",
"waypoints": "^4.0.1",
"webpack": "^5.35.0",
"webpack-cli": "^4.6.0"
}
}
With Webpack, it's always better to use "require" instead of "import" in app.js
So try this:
var moment = require ('moment');
require ('fullcalendar-scheduler');
I finally got... I just had not learned enough yet.. But, hope this helps others.
I needed both a webpack.config.js and a webpack.mix.js and a little work on the package.json. Here are the changes that worked for me. Also, I could never get npm i fullcalendar-scheduler to work in the build.. I had to use #fullcalendar
webpack.config.js
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
mode: 'development',
devtool: 'source-map',
entry: './resources/fullcalendar/main.js',
resolve: {
extensions: [ '.js' ]
},
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: MiniCssExtractPlugin.loader },
{ loader: 'css-loader', options: { importLoaders: 1 } }
]
}
]
},
output: {
filename: 'main.js',
path: path.join(__dirname, 'public/dist')
},
plugins: [
new MiniCssExtractPlugin({
filename: 'main.css'
})
]
}
webpack.mix.js
let mix = require("laravel-mix");
mix
.js("resources/js/app.js", "public/js")
.sass("resources/sass/app.scss", "public/css");
package.json
{
"private": true,
"scripts": {
"dev": "mix && npm run build",
"development": "mix",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production",
"build": "webpack",
"watch": "webpack --watch",
"clean": "rm -rf dist"
},
"devDependencies": {
"css-loader": "^4.3.0",
"laravel-mix": "^6.0.18",
"mini-css-extract-plugin": "^1.2.0",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.11",
"sass-loader": "^11.0.1",
"webpack": "^5.3.0",
"webpack-cli": "^4.1.0"
},
"dependencies": {
"#fullcalendar/adaptive": "^5.6.0",
"#fullcalendar/core": "^5.6.0",
"#fullcalendar/daygrid": "^5.6.0",
"#fullcalendar/interaction": "^5.6.0",
"#fullcalendar/list": "^5.6.0",
"#fullcalendar/resource-timeline": "^5.6.0",
"#fullcalendar/timegrid": "^5.6.0",
"autoprefixer": "^10.2.5",
"bootstrap": "^4.6.0",
"jquery": "^3.6.0",
"webpack": "^5.35.0",
"webpack-cli": "^4.6.0"
}
i'm trying to install this package https://github.com/shwilliam/vue-scrollin to my laravel + vue project. after compiling with laravel mix, the following error appeared:
Module not found: Error: Can't resolve 'timers' in
'\node_modules\vue-scrollin\dist'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules
by default. This is no longer the case. Verify if you need this module
and configure a polyfill for it. If you want to include a polyfill,
you need to:
- add a fallback 'resolve.fallback: { "timers": require.resolve("timers-browserify") }'
- install 'timers-browserify' If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "timers": false }
I followed the given instructions but it gives me the same errors.
webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js').vue()
.sass('resources/css/app.scss', 'public/css/app.css')
.postCss('resources/css/app.css', 'public/css', [
//
])
.webpackConfig(require('./webpack.config'));
webpack.config.js
module.exports = {
resolve: {
fallback: { "timers": require.resolve("timers") }
},
};
package.json
{
"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": {
"#fortawesome/fontawesome-free": "^5.15.3",
"#fortawesome/fontawesome-svg-core": "^1.2.35",
"#fortawesome/free-regular-svg-icons": "^5.15.3",
"#fortawesome/free-solid-svg-icons": "^5.15.3",
"#fortawesome/vue-fontawesome": "^3.0.0-3",
"#vue/compiler-sfc": "^3.0.7",
"axios": "^0.21",
"bulma": "^0.9.2",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"particles.vue3": "^1.3.1",
"postcss": "^8.1.14",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.8",
"sass-loader": "^10.1.1",
"vue": "^3.0.5",
"vue-loader": "^16.1.2",
"vue-router": "^4.0.5",
"vue-scrollin": "^0.1.2",
"timers-browserify": "^2.0.12"
}
}
You almost got it. webpack.config.js should be:
module.exports = {
resolve: {
fallback: { "timers": require.resolve('timers-browserify') }
},
};
Just change the package in the require.resolve() to what the warning suggests.
For anyone who comes here with a polyfills-problem or about to migrate from webpack 4 to 5, here's the PR with a list of removed polyfills
My problem: npm run watch (running in the backend side of the server) returns a blank html page, any updates that I make in the frontend are not compiled. The problem started to occur randomly, the only thing that changed is that I installed auth ui in Laravel.
My directory setup:
www
- frontend (Vuejs)
- standard vue files/folders
- package.json
- vue.config.js
- babel.config.js
- etc.
- backend (Laravel)
- standard laravel files/folders
- package.json
- webpack.mix.js
I know this is not an nginx problem but just in case you need to know, nginx rootfolder is pointing to /var/www/backend/public and is using a let's encrypt ssl certificate.
vue.config.js
module.exports = {
lintOnSave: false,
runtimeCompiler: true,
configureWebpack: {
resolve: {
symlinks: false
}
}
};
package.json (frontend)
{
"name": "a random name",
"author": "that will be me :)",
"description": "nice description",
"version": "1.0.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"clearCache": "jest --clearCache",
"release": "npm-run-all clearCache lint build test:unit test:e2e"
},
"dependencies": {
"axios": "^0.19.2",
"cesium": "^1.71.0",
"core-js": "3.5.0",
"html-webpack-plugin": "^4.3.0",
"html-webpack-template": "^6.2.0",
"nouislider": "14.1.0",
"requirejs": "^2.3.6",
"v-tooltip": "2.0.2",
"vue": "2.6.10",
"vue-carousel": "0.18.0",
"vue-clickaway": "2.2.2",
"vue-kinesis": "^1.1.5",
"vue-lazyload": "1.3.3",
"vue-material": "1.0.0-beta-11",
"vue-router": "3.1.3"
},
"devDependencies": {
"#vue/cli-plugin-babel": "4.1.1",
"#vue/cli-plugin-eslint": "4.1.1",
"#vue/cli-plugin-router": "4.1.1",
"#vue/cli-service": "4.1.1",
"#vue/eslint-config-prettier": "6.0.0",
"babel-eslint": "10.0.3",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "3.1.1",
"eslint-plugin-vue": "^6.2.2",
"gulp": "^4.0.2",
"gulp-append-prepend": "1.0.8",
"prettier": "1.19.1",
"sass": "1.23.7",
"sass-loader": "8.0.0",
"vue-template-compiler": "2.6.10",
"webpack": "^4.44.0",
"webpack-cli": "^3.3.12"
}
}
package.json (backend)
{
"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": "npm run development -- --watch",
"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 --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.19",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.13",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.20.1",
"sass-loader": "7.*",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"animo-core": "^1.0.8",
"bootstrap": "^4.5.0",
"gsap": "^3.4.2",
"jquery": "^3.5.1",
"paper": "^0.12.11",
"popper": "^1.0.1",
"popper.js": "^1.16.1",
"requirejs": "^2.3.6",
"simplex-noise": "^2.4.0",
"vue": "^2.6.11",
"vue-axios": "^2.1.5",
"vue-kinesis": "^1.1.5",
"vue-roller": "^1.12.1",
"vue-router": "^3.3.4",
"vue-text-transition": "^1.0.19",
"vuex": "^3.5.1"
}
}
webpack.mix.js
const path = require('path');
const mix = require('laravel-mix');
mix.webpackConfig({
resolve: {
alias: {
"#": path.resolve(__dirname, "resources/js/")
}
}
});
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps();
mix.copy('../frontend/public', 'public');
What I would like to happen (again)
Run npm run watch within the backend. Then it auto compiles my frontend to the public directory in the frontend. The backend then uses mix.copy to copy the compiled app.js and app.scss (or just all the content within the public folder) to the backend's public directory.
If you need any more information, please ask, I've been trying to fix this for the last couple of days now and I can't seem to find the solution anywhere.