laravel 9 + lando = no livereload and no sourceMapping - vite

I just create a new Laravel 9 project and I'm using lando.
I have followed instructions from this : https://sinnbeck.dev/posts/getting-vite-and-laravel-to-work-with-lando
Currently, the site is working, I can update php, css or js code.
But, there is no livereloading and I've got an error in my console about a missing sourcemapping for the css at http://localhost:3009/resources/css/app.css.map
There is a link to the project : https://github.com/CrunchyArtie/warene-next
There is my vite.config.js file:
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
server: {
https: false,
host: true,
port: 3009,
hmr: {host: 'localhost', protocol: 'ws'},
},
});
and my .lando.yml file :
name: warene
recipe: laravel
config:
webroot: ./public
php: '8.1'
xdebug: true
services:
node:
type: node:16
scanner: false
ports:
- 3009:3009
build:
- npm install
tooling:
dev:
service: node
cmd: npm run dev
build:
service: node
cmd: npm run build
EDIT :
With this vite.config.js the livereloading works :
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
server: {
https: false,
host: true,
strictPort: true,
port: 3009,
hmr: {host: 'localhost', protocol: 'ws'},
watch: {
usePolling: true,
}
},
});

With css.devSourcemap: true a sourcemap file is generated and used.
With server.watch.usePolling: true vite will detect file changed inside lando environment.
This is my is my vite.config.js file:
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
css: {
devSourcemap: true,
},
server: {
https: false,
host: true,
strictPort: true,
port: 3009,
hmr: {host: 'localhost', protocol: 'ws'},
watch: {
usePolling: true,
}
},
});

Related

Vue 3 and vite cors problems on prod

I have site that was worked on vue 3 and vue-cli with nginx and proxy. So I change from vue-cli to vite v4 and now I get net::ERR_CONNECTION_REFUSED here is my vite.config
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
// "vue-i18n": "vue-i18n/dist/vue-i18n.cjs.js",
"#": fileURLToPath(new URL("./src", import.meta.url)),
},
},
base: "/",
build: {
chunkSizeWarningLimit: 3000,
},
server: {
host: true,
cors: false,
proxy: {
"/api": {
target: "http://localhost:3200",
changeOrigin: true,
secure: false,
// ws: true,
rewrite: (path) => path.replace(/^\/api/, ""),
},
},
},
});
I trying few weeks to fix but no success
I try without cors and try to implement all options for the vite configuration
I finally solved the problem, the wrong set of env variables. In vite when importing the env variables with method import.meta it was not read the NODE_ENV so I need to add environment in the env file so the places where get base URL its read correctly by the environment

Quasar-cli-vite devServer proxy not working

I'm starting to test Quasar framework and I want to proxy some url to my local backend but the configuration doesn't seem to work (documentation here).
The part of my quasar.config.js where the proxy should be configured:
devServer: {
// https: true
proxy: {
'/association': {
target: 'http://localhost:8080',
changeOrigin: true,
}
},
open: false,
},
I've also tried to do it inline '/association': 'http://localhost:8080' with the same result. My request are not redirect and query on port 80: http://localhost/association/setProducerStats
Anyone already managed to configure the proxy ?
Quasar is already running itself on port 8080 - try to use a different port for your local backend, or add port: 8090 to the devServer config.
Example config for Vite:
// vite.config.js
import { defineConfig } from 'vite';
import { resolve } from 'path';
import vue from '#vitejs/plugin-vue';
import { quasar, transformAssetUrls } from '#quasar/vite-plugin';
import viteStylelint from './plugins/stylelint';
import eslintPlugin from 'vite-plugin-eslint';
import Components from 'unplugin-vue-components/vite';
import { QuasarResolver } from 'unplugin-vue-components/resolvers';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue({
template: { transformAssetUrls }
}),
quasar({
autoImportComponentCase: 'pascal',
sassVariables: 'src/quasar-variables.sass'
}),
viteStylelint({
exclude: /node_modules|.*uno\.css/
}),
eslintPlugin({
cache: false
}),
Components({
resolvers: [QuasarResolver()],
include: [/\.vue$/],
exclude: [/node_modules/, /\.git/, /\.nuxt/],
})
],
resolve: {
alias: {
src: resolve(__dirname, './src'),
'#': resolve(__dirname, './src'),
},
},
server: {
https: false,
port: 9000,
proxy: {
'/api': {
target: 'https://api.example.com',
changeOrigin: true,
secure: true,
//rewrite: (path) => path.replace(/^\/api/, ''),
},
},
},
build: {
terserOptions: {
compress: {
drop_console: true,
},
},
// reportCompressedSize: true,
chunkSizeWarningLimit: 1024,
rollupOptions: {
output: {
manualChunks(id)
{
if (id.includes('/node_modules/'))
{
const modules = ['quasar', '#quasar', 'vue', '#vue'];
const chunk = modules.find((module) => id.includes(`/node_modules/${module}`));
return chunk ? `vendor-${chunk}` : 'vendor';
}
},
},
},
},
});

vite:hmr [no modules matched]

I am trying to get hmr working with vite in my craftcms site, whatever i try i keep getting
vite:hmr [no modules matched] src/scripts/main.ts +0ms
when i run vite in debug mode (vite --debug)
This is my vite config:
import ViteRestart from 'vite-plugin-restart'
export default ({ command }) => ({
base: command === 'serve' ? '' : '/dist/',
publicDir: 'non-existent-path',
build: {
manifest: true,
outDir: './web/dist/',
rollupOptions: {
input: {
app: './src/scripts/main.ts',
},
},
},
server: {
host: '0.0.0.0',
port: 3000,
strictPort: true,
https: true,
hmr: {
host: 'localhost',
port: 3000,
path: '/',
}
},
plugins: [
ViteRestart({
reload: ['templates/**/*'],
}),
],
})
Where am i going wrong?

Run Nightwatch.js tests against a remote Selenium server in Kubernetes environment

I've created automated tests with Nightwatch-Cucumber based on Nightwatch.js. I can start the tests on local machine, the Selenium server starts on local machine and the tests will be executed.
But now I want to integrate the existing tests in a Kubernetes environment. On local machine I want to use minikube, helm, a jenkins chart to start the tests and a selenium chart. But this setup is quiet different to the local one. I want to start the tests on the Jenkins instance and the tests should be executed against the running Selenium server delivered by the selenium chart. So I want to use such a "remote" Selenium server. I don't want to use a local Selenium server that starts on runtime, but a still existing Selenium server somewhere in the Kubernetes environment
But how to configure my nightwatch.conf.js configuration to realize that scenario?
My current configuration looks like this:
const config = {
output_folder: "reports",
custom_commands_path: "commands",
// custom_assertions_path: 'assertions',
live_output: false,
page_objects_path: "pageobjects",
disable_colors: false,
selenium: {
start_process: true,
server_path: seleniumServer.path,
log_path: "",
host: "127.0.0.1",
port: 4444
},
test_settings: {
default: {
globals: {
waitForConditionTimeout: 30000,
waitForConditionPollInterval: 500
},
screenshots: {
enabled: true,
on_failure: true,
path: "screenshots"
},
//launch_url: "http://localhost:8087",
//selenium_port: 4444,
//selenium_host: "127.0.0.1",
desiredCapabilities: {
browserName: "phantomjs",
javascriptEnabled: true,
acceptSslCerts: true,
"phantomjs.binary.path": phantomjs.path
}
},
First step, make sure your remote Selenium-server is accessable( checking host IP and port )
Secondly, config following :
const config = {
output_folder: "reports",
custom_commands_path: "commands",
// custom_assertions_path: 'assertions',
live_output: false,
page_objects_path: "pageobjects",
disable_colors: false,
selenium: {
start_process: false, // turn this off and comment all below config
// server_path: seleniumServer.path,
// log_path: "",
// host: "127.0.0.1",
// port: 4444
},
test_settings: {
default: {
globals: {
waitForConditionTimeout: 30000,
waitForConditionPollInterval: 500
},
screenshots: {
enabled: true,
on_failure: true,
path: "screenshots"
},
launch_url: "http://localhost:8087",
selenium_port: 4444, // provide your selenium port in 1st step
selenium_host: "127.0.0.1", // provide your selenium address in 1st step
desiredCapabilities: {
browserName: "phantomjs",
javascriptEnabled: true,
acceptSslCerts: true,
"phantomjs.binary.path": phantomjs.path
}
},

How do I configure grunt-connect-proxy with grunt serve?

I managed to configure grunt to serve my application, but since it serves on localhost:9000, my api calls also go to port 9000 while my api is at port 3000, resulting in a 404 error.
After some research, I've decided I need to use grunt-connect-proxy to proxy my api calls to the right port. I've been beating my head against a wall going through every article, stack overflow question and the documentation, but I can't seem to get the configuration right. See my gruntfile below. Any help will have my undying gratitude.
// Invoke 'strict' JavaScript mode
'use strict';
module.exports = function(grunt) {
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
grunt.initConfig({
less: {
development: {
options: {
compress: true,
yuicompress: true,
optimization: 2,
paths: ['public/styles/less']
},
files: {
"public/styles/css/main.css": "public/styles/less/main.less" // destination file and source file
}
}
},
watch: {
styles: {
files: ['public/styles/less/*.less'],
tasks: ['less'],
options: {
nospawn: true
}
}
},
connect: {
server: {
options: {
port: 8000,
base: 'public',
logger: 'dev',
hostname: 'localhost',
middleware: function (connect, options, defaultMiddleware) {
var proxy = require('grunt-connect-proxy/lib/utils').proxyRequest;
return [
// Include the proxy first
proxy
].concat(defaultMiddleware);
}
},
proxies: [
{
context: '/',
host: '127.0.0.1',
port: 3000,
https: false,
xforward: false,
headers: {
"x-custom-added-header": 'value'
},
hideHeaders: ['x-removed-header']
}
]
},
serve: {
options:{
port: 9000,
hostname: "127.0.0.1",
middleware: function(connect, options) {
return [
require('grunt-contrib-livereload/lib/utils').livereloadSnippet,
connect.static(options.base[0])
];
}
}
}
},
open: {
serve: {
path: 'http://localhost:<%= connect.serve.options.port%>/public'
}
},
regarde: {
serve: {
files:['public/index.html','public/script/*.js','public/script/**/*.js','public/styles/**/*.css','public/styles/less/*.less','public/views/*.html'],
tasks: ['livereload']
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-less');
//grunt.loadNpmTasks('grunt-contrib-clean');
//grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-connect-proxy');
grunt.registerTask('serve',['less','livereload-start','connect:serve','open:serve','regarde:serve']);
grunt.registerTask('server', function (target) {
grunt.task.run([
//'clean:server',
//'compass:server',
'configureProxies:server',
'connect:server',
'watch'
]);
});
};

Resources