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
Related
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,
}
},
});
I'm trying to run eslint AFTER vite bundles my code
import eslint from 'vite-plugin-eslint'
const outDir = 'out'
export default defineConfig({
plugins: [
{
...eslint({
include: outDir + '/**/*',
overrideConfigFile: '.eslintrc.js',
fix: true,
failOnError: true,
failOnWarning: true
}),
enforce: 'post',
apply: 'build',
}
],
build: {
emptyOutDir: false,
outDir,
sourcemap: false,
watch: {},
minify: false,
lib: {
entry: {
server_scripts : "./src/server/index.ts",
startup_scripts : "./src/startup/index.ts",
client_scripts : "./src/client/index.ts",
},
fileName: '[name]/bundle',
formats: ["cjs"],
},
},
})
here's what i have so far, i thought doing enforce:'post' should work but it doesn't, eslintrc already has the rules and doing eslint --fix manually fixes it. and i'm sure it's using the right eslint because it throws the error when i do lintOnStart option
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';
}
},
},
},
},
});
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?
I have two environment in my sailsjs project: development and production.
In local.js I have this:
module.exports = {
port: process.env.PORT || 1349,
environment: process.env.NODE_ENV || "production"
}
In my development.js I have:
module.exports = {
models: {
connection: "someMongoDb",
migrate: 'alter',
schema : true,
autoPK: true,
autoCreatedAt: true,
autoUpdatedAt: true
},
port: 1348
}
In my production.js I have:
module.exports = {
models: {
connection: "mongoDBPro",
migrate: 'alter',
schema : true,
autoPK: true,
autoCreatedAt: true,
autoUpdatedAt: true
},
port: 1349
}
I would like to select one of this environment when I start my sails project. It is possible when I start with "sails lift" say what environment I choose?
sails lift by default will uses --dev.
You can add --prod to the command to specify a production environment.
Sails will set the environment variable NODE_ENV and load the correct configuration.