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?
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 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 have some conceptual troubles with webpack-dev-middleware and webpack-hot-middleware
I have SSR app (react + express), webpack (with clientside and serverside configs). Webpack configs:
client.config
const config: Configuration = {
name: 'client',
target: 'web',
mode: IS_DEV ? "development" : "production",
output: {
path: path.join(DIST_DIR, 'client'),
filename: IS_DEV ? 'core/js/[name].js' : 'core/js/[contenthash].js',
publicPath: '/',
},
entry: [
path.join(SRC_DIR, 'client.tsx'),
IS_DEV && 'webpack-hot-middleware/client',
].filter(Boolean) as Entry,
module: {
rules: [
*client rules here*
],
} as ModuleOptions,
optimization: *optimization here*,
resolve: *resolve*,
plugins: [
IS_DEV && new webpack.HotModuleReplacementPlugin(),
IS_DEV && new ReactRefreshWebpackPlugin({
overlay: {
sockIntegration: 'whm',
},
}),
new MiniCssExtractPlugin({
filename: IS_DEV ? "core/css/[name].css" : "core/css/[contenthash].css",
chunkFilename: IS_DEV ? "core/css/[id].css" : "core/css/[contenthash].css",
}),
new ESLintPlugin({
extensions: ["js", "jsx", "ts", "tsx"],
}),
new LoadablePlugin(),
new CopyWebpackPlugin({
patterns: [{ from: './src/assets', to: 'assets' }]
}),
].filter(Boolean) as WebpackPluginInstance[],
devtool: IS_DEV ? "source-map" : false,
}
and
server.config
const config: Configuration = {
name: 'server',
mode: IS_DEV ? "development" : "production",
target: 'node',
output: {
path: path.join(DIST_DIR, 'server'),
filename: 'server.js',
libraryTarget: 'commonjs',
publicPath: '/',
},
entry: path.join(SRC_DIR, 'server.ts'),
module: {
rules: [
*server rules here*
],
},
optimization: common.optimization,
resolve: common.resolve,
plugins: [
new webpack.HotModuleReplacementPlugin(),
],
devtool: IS_DEV ? "source-map" : false,
externals: [
nodeExternals(),
'#loadable/component'
],
node: {
__dirname: false,
__filename: false,
},
};
Server file:
import { IS_DEV } from '../webpack/env';
import devMiddleware from 'webpack-dev-middleware';
import hotMiddleware from 'webpack-hot-middleware';
import config from '../webpack/client.config';
const app = express();
const compiler = webpack(config);
if (IS_DEV) {
const devServer = devMiddleware(compiler, {
serverSideRender: true,
publicPath: '/'
});
app.use(hotMiddleware(compiler, {
path: '/__webpack_hmr'
}));
app.use(devServer);
}
app.get('*', *server render here*);
const port = process.env.PORT || 8080;
app.listen(port, () => {
console.log(`Application is started on ${port}`);
});
Result of compile here (build folder):
/build
/client
/assets
/core
/css
/js
/static
/server
Production version works well, client's files served by nginx, express runs on port with nginx proxy also. I want to make dev server with hot reload, make same as it written in instruction,but i'm stuck here. I cant understand how it must work and what command in package.json must be.
For example: what webpack config i must use in devMiddleware compiler - client or server or merged?
Be glad if someone explain (best with pointing out where i went wrong). Thanks a lot.
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'
]);
});
};
I'm using grunt connect with livereload for my dev environment.
I want to be able to call the production api which is under /server.
To do that I need to direct any calls from
http://localhost:9000/server
to
http://www.production-server.com/server
This is good for me because sometimes I want to test against the production server when in dev mode.
Here's my current connect configuration (Generated by Yeoman):
connect: {
options: {
port: 9000,
// Change this to '0.0.0.0' to access the server from outside.
hostname: 'localhost',
livereload: 35729
},
livereload: {
options: {
open: true,
middleware: function(connect, options, middlewares) {
return [
connect.static('.tmp'),
connect().use(
'/bower_components',
connect.static('./bower_components')
),
connect.static(appConfig.app)
];
}
}
},
test: {
options: {
port: 9001,
middleware: function(connect) {
return [
connect.static('.tmp'),
connect.static('test'),
connect().use(
'/bower_components',
connect.static('./bower_components')
),
connect.static(appConfig.app)
];
}
}
},
dist: {
options: {
open: true,
base: '<%= yeoman.dist %>'
}
}
},
I've found the problem and the solution:
First thing to do is to use the: grunt-connect-proxy grunt task to be able to do proxy (You can do really anything there). The configuration is not obvious, but you can find all the info (and example) here: https://www.npmjs.org/package/grunt-connect-proxy
My specific problem was because my server did not accept any calls that did not come from the same domain, so all I did was to add "headers" property to the config with my domain name. this is how the new config should look like:
connect: {
options: {
port: 9000,
// Change this to '0.0.0.0' to access the server from outside.
hostname: 'localhost',
livereload: 35729
},
server: {
proxies: [
{
context: '/server',
host: 'production-server.com',
post: 80,
changeOrigin: true,
headers: {
host: 'simple-layout.com'
}
}
]
},
livereload: {
options: {
open: true,
middleware: function (connect) {
return [
proxySnippet,
connect.static('.tmp'),
connect().use(
'/bower_components',
connect.static('./bower_components')
),
connect.static(appConfig.app)
];
}
}
},
test: {
options: {
port: 9001,
middleware: function (connect) {
return [
connect.static('.tmp'),
connect.static('test'),
connect().use(
'/bower_components',
connect.static('./bower_components')
),
connect.static(appConfig.app)
];
}
}
},
dist: {
options: {
open: true,
base: '<%= yeoman.dist %>'
}
}
},