I've got an application with AngularJS in front-end and Java Spring 3 in backend.
So when i run grunt-server i use grunt-connect-proxy to contact the backend part form the frontend part.
So my connect configuration is like that :
connect: {
proxies: [
{
context:'/mdp-web',
host: 'localhost',
port: 8080,
https: false,
changeOrigin: true
}
],
options: {
port: 9000,
// Change this to '0.0.0.0' to access the server from outside.
hostname: 'localhost'
},
livereload: {
options: {
middleware: function (connect) {
return [
proxySnippet,
lrSnippet,
mountFolder(connect, '.tmp'),
mountFolder(connect, cegedimConfig.app)
];
}
}
}
}
But my matter is that in Java the context-root of the application is mdp-web/
But in AngularJS my uri's are like : /api/users
$resource('/api/users', {}, {
query: {
isArray: true,
method:'GET',
cache: HttpCache
}
});
I want to proxy all the /api/ uris but with a redirection to /mdp-web/api
Is it possible to do that with grunt-connect-proxy (maybe with rewrite property) ?
If you get an idea i take it really !
Use a rewrite rule:
proxies: [
{
context:'/api',
host: 'localhost',
port: 8080,
https: false,
changeOrigin: true,
rewrite: {
'^/api': '/mdp-web/api'
}
}
]
Related
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 2 interfaces, one mqtt and one for websocket. I noticed if I have a backend, the mqtt does not route to websocket.
I created the mosca server as below:
server = new mosca.Server(
{
interfaces:
[
{ type: "mqtt", port: 1883 },
{
type: "mqtts",
port: 8443,
credentials: { keyPath: SECURE_KEY, certPath: SECURE_CERT }
},
{ type: "http", port: 4000, bundle: true }
],
onQoS2publish: "noack",
logger: { name: 'MoscaServer', level: 'debug' },
backend: {
type: "mqtt",
json: false,
mqtt: require("mqtt"),
key: filesys.readFileSync(__dirname + "/certs/private.key"),
cert: filesys.readFileSync(__dirname + "/certs/cert.pem"),
ca: filesys.readFileSync(__dirname + "/certs/rootCA.cer"),
clientId: "randomClientId",
port: 8883,
host: "<aws IOT endpoint>.iot.<aws region>.amazonaws.com",
rejectUnauthorized: false,
protocol: "mqtts"
},
}
);
What do I need to do to route between all the 3: mqtt, websocket and the backend?
Thanks!
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 %>'
}
}
},