I moved to vite and wish to migrate the devServer option from vue.config.ts to vite.config.ts, but am unsure how to do so.
vue.config.ts
module.exports = {
devServer: {
proxy: {
'^/example/': {
target: 'http://php:80',
changeOrigin: true
}
}
}
}
Thanks :)
Related
I want to use vite to pack my esm js to commonjs, but it will clear node modules.
vite.config.js
import { defineConfig } from 'vite';
const config = defineConfig({
envDir: process.cwd(),
build: {
lib: {
entry: 'index.js',
formats: ['cjs']
},
rollupOptions: {
output: {
entryFileNames: '[name].cjs'
}
},
emptyOutDir: true
}
});
export default config;
My example index.js
import Stream from 'node:stream';
console.log(`✨`, `Stream`, Stream);
When builded the stream will be an empty object.
How can I prevent node modules from being cleaned up?
I had a similar issue and solved it by specifying:
build: { ssr: true }
Then to eliminate the warning, you should also specify:
rollupOptions: {
input: 'index.js'
}
With vue-cli it was possible to configure webpack devServer.before function like this:
devServer: {
before(app) {
app.get('/apiUrl', (req, res) => res.send(process.env.API_URL))
}
},
How is it possible to configure Vite dev server to obtain the same behavior?
(I tried with the proxy option but it does not work.)
According to this github issue, environment variables are not accessible in file vite.config.js (neither in vite.config.ts). However, the discussion in this issue also mentions a workaround that you can use in this file:
import { defineConfig, loadEnv } from 'vite'
import vue from '#vitejs/plugin-vue'
export default defineConfig(({mode}) => {
const env = loadEnv(mode, process.cwd());
return {
plugins: [
vue(),
],
server: {
proxy: {
'^/apiUrl': {
target: env.VITE_API_TARGET,
changeOrigin: true,
}
}
},
}
})
Note that the variable name must start with VITE_ for this to work.
I have this URL: sample/company/1231/invoices/download/123
This is my Webpack Dev Server configuration
devServer: {
proxy: {
'/sample/company' : {
target: envConfig.WEBPACK_DEVSERVER_PROXY,
ws: true,
changeOrigin: true,
}
}
}
My problem with this is that all URLs that has a /sample/company gets affected. I only wanted to take the rule into effect when it has URL sample/company/1231/invoices/download/123.
The 123 are dynamic, these are IDs.
I'm new to this so any help is greatly appreciated! Thanks!
You can use the pathRewrite to create your own rewrite function. I did not test it but it must be something like this:
devServer: {
proxy: {
'/sample/company' : {
target: envConfig.WEBPACK_DEVSERVER_PROXY,
ws: true,
changeOrigin: true,
pathRewrite: function(path, req){
var arrMatches = path.match(/\/sample\/company\/(.+)\/invoices\/download\/(.+)/);
if(arrMatches){
// arrMatches[0] > fullmatch
// arrMatches[1] > group 1
// arrMatches[2] > group 2
return 'my/new/path/' + arrMatches[1] + '/' + arrMatches[2] + '/'
}
}
}
}
}
See here
I'm trying to setup jasmine-jquery for use with Jasmine 2.4. My Gruntfile config looks like this:
jasmine : {
main: {
// src: 'htdocs/test/newjs/**/*.js',
options: {
specs: 'htdocs/test/newjs/*.js',
vendor: 'htdocs/jslib/jasmine-jquery-1.5.0/jasmine-jquery.js',
template: require('grunt-template-jasmine-requirejs'),
templateOptions: {
requireConfigFile: 'htdocs/js/config.js',
requireConfig: {
baseUrl: './htdocs/js/',
callback: function($) {
// Extra initialization here
},
paths: {
jquery: '../jslib/jquery-1.9.1/jquery.min',
facebook: '../jslib/connect.facebook.net-test/en_US/all',
'jquery.mobile': '../jslib/jquery.mobile.touchonly-1.3.2/'+
'jquery.mobile.custom.min',
templates: '../templates',
config: 'empty' // Override config require since this plugin
// already pulls it into the test runner
}
}
}
}
}
},
I keep getting the error "Can't find variable: jasmine," however. Does anyone have any experience with this error? I've heard that jasmine-jquery may not play well with the newer versions of Jasmine. Thoughts?
Here's a screenshot of the error:
The above snippet is invalid, it should be as following
var jasmine = {
main: {
// src: 'htdocs/test/newjs/**/*.js',
options: {
specs: 'htdocs/test/newjs/*.js',
vendor: 'htdocs/jslib/jasmine-jquery-1.5.0/jasmine-jquery.js',
template: require('grunt-template-jasmine-requirejs'),
templateOptions: {
requireConfigFile: 'htdocs/js/config.js',
requireConfig: {
baseUrl: './htdocs/js/',
callback: function($) {
// Extra initialization here
},
paths: {
jquery: '../jslib/jquery-1.9.1/jquery.min',
facebook: '../jslib/connect.facebook.net-test/en_US/all',
'jquery.mobile': '../jslib/jquery.mobile.touchonly-1.3.2/'+
'jquery.mobile.custom.min',
templates: '../templates',
config: 'empty' // Override config require since this plugin
// already pulls it into the test runner
}
}
}
}
}
}
Unless the jasmine object is part of another object
I followed this tutorial:
http://www.gilluminate.com/2014/06/10/livereload-ssl-https-grunt-watch/
My Gruntfile.js looks like this:
module.exports = function(grunt) {
grunt.initConfig({
jshint: {
files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
options: {
globals: {
jQuery: true
}
}
},
watch: {
css: {
files: '**/*.sass',
tasks: ['sass'],
options: {
livereload: {
port: 9000,
key: grunt.file.read('ssl/livereload.key'),
cert: grunt.file.read('ssl/livereload.crt')
// you can pass in any other options you'd like to the https server, as listed here: http://nodejs.org/api/tls.html#tls_tls_createserver_options_secureconnectionlistener
}
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['jshint']);
};
I added
<script src="//localhost:9000/livereload.js"></script>
at the end of my index.html file.
My goal is to run livereload over httpS: port 9000.
Maybe am I missing some part, like "run Grunt to make it load to the grunt file"?
The error I get is:
GET https://localhost:9000/livereload.js net::ERR_CONNECTION_REFUSED
Grunt-contrib-watch uses tiny-lr#^0.2.1 which doesn't support SSL, someone needs to make a pull request to upgrade tiny-lr.