Can someone guide me how to configure generator-webapp to use HTTPS instead of HTTP.
Tried https option and specified key files but somehow I made something wrong.
Thanks.
Figured it out by myself. All that needs to be done was to add https. The rest will be handled by browserSync. It also assigns a self-signed certificate.
browserSync: {
options: {
notify: false,
background: true,
watchOptions: {
ignored: ''
},
https: {
key: '',
cert: ''
}
},
Related
I'm hosting my App on an EC2-instance behind an Elastic Load Balancer which manages my SSL-Certificate. On this EC2-Instance my nginx-configuration is redirecting all http-Requests to https.
I recently switched to Vite which caused me a lot of trouble. When I push my app to the server after calling npm run build my assets are blocked. In the browser console I get:
Mixed Content: The page at 'example.com' was loaded over HTTPS, but requested an insecure ...
My Setup:
vite.config.js
export default defineConfig({
server: {
host: 'localhost',
},
plugins: [
laravel([
'resources/assets/sass/app.sass',
// etc...
]),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
});
Setting "https: true" in the server-block didn't help me.
.env
APP_ENV=production
APP_URL=https://example.com
ASSET_URL=https://example.com
In my blade template I'm using the Vite-directive:
#vite('resources/assets/sass/app.sass')
I tried the following solutions:
Setting $proxies = '*' in TrustProxies.php, which doesn't have any effect.
Setting URL::forceScheme('https'); in AppServiceProvider.php, which will load the assets but lead to a lot of other issues.
Somehow the #vite-directive is not resolving my assets as secure assets. With Laravel Mix I could just call secure_asset.
How can I fix this?
In the end I used the TrustedProxies-middleware. However back then I forgot to register it as global middleware.
import fs from 'fs';
const host = 'example.com';
server: {
host,
hmr: {host},
https: {
key: fs.readFileSync(`ssl-path`),
cert: fs.readFileSync(`ssl-cert-path`),
},
},
you should add this to vite.config.js file along with ASSET_URL to your .env file
I have been trying to get Rewrites working in NextJS for my API Paths. It was to avoid CORS issues.
I followed the solution from: NextJs CORS issue.
It is working on localhost but does not work in a production environment (I was deploying on Vercel itself).
I basically tried with all the types of rewrites:
async rewrites() {
return {
beforeFiles: [
{
source: "/api/:path*",
destination: `https://example.com/api/v1/:path*`,
basePath: false,
},
],
afterFiles: [
{
source: "/api/:path*",
destination: `https://example.com/api/v1/:path*`,
basePath: false,
},
],
fallback: [
{
source: "/api/:path*",
destination: `https://example.com/api/v1/:path*`,
basePath: false,
},
],
};
},
This rewrite works on localhost but on production, the rewrite stops working and the API calls go to /api/:path* itself.
The /api path is reserved for their Serverless Functions. Changing the source path to something else would resolve the issue.
My goal is to add a token in the socketio reconnection from the client (works fine on the first connection, but the query is null on the reconnection, if the server restarted while the client stayed on).
The documentation indicates I need to use the Manager to customize the reconnection behavior (and add a query parameter).
However, I'm getting trouble finding how to use this Manager: I can't find a way to connect to the server.
What I was using without Manager (works fine):
this.socket = io({
query: {
token: 'abc',
}
});
Version with the Manager:
const manager = new Manager(window.location, {
hostname: "localhost",
path: "/socket.io",
port: "8080",
query: {
auth: "123"
}
});
So I tried many approaches (nothing, '', 'http://localhost:8080', 'http://localhost:8080/socket.io', adding those lines to the options:
hostname: "localhost",
path: "/socket.io",
port: "8080" in the options,
But I couldn't connect.
The documentation indicates the default URL is:
url (String) (defaults to window.location)
For some reasons, using window.location as URL refreshes the page infinitely, no matter if I enter it as URL in the io() creator or in the new Manager.
I am using socket.io-client 3.0.3.
Could someone explain me what I'm doing wrong ?
Thanks
Updating to 3.0.4 solved the initial problem, which was to be able to send the token in the initial query.
I also found this code in the doc, which solves the problem:
this.socket.on('reconnect_attempt', () => {
socket.io.opts.query = {
token: 'fgh'
}
});
However, it doesn't solve the problem of the Manager that just doesn't work. I feel like it should be removed from the doc. I illustrated the problem in this repo:
https://github.com/Yvanovitch/socket.io/blob/master/examples/chat/public/main.js
so far I've managed to create two webhooks by using their official gem (https://github.com/bigcommerce/bigcommerce-api-ruby) with the following events:
store/order/statusUpdated
store/app/uninstalled
The destination URL is a localhost tunnel managed by ngrok (the https) version.
status_update_hook = Bigcommerce::Webhook.create(connection: connection, headers: { is_active: true }, scope: 'store/order/statusUpdated', destination: 'https://myapp.ngrok.io/bigcommerce/notifications')
uninstall_hook = Bigcommerce::Webhook.create(connection: connection, headers: { is_active: true }, scope: 'store/app/uninstalled', destination: 'https://myapp.ngrok.io/bigcommerce/notifications')
The webhooks seems to be active and correctly created as I can retrieve and list them.
Bigcommerce::Webhook.all(connection:connection)
I manually created an order in my store dashboard but no matter to which state or how many states I change it, no notification is fired. Am I missing something?
The exception that I'm seeing in the logs is:
ExceptionMessage: true is not a valid header value
The "is-active" flag should be sent as part of the request body--your headers, if you choose to include them, would be an arbitrary key value pair that you can check at runtime to verify the hook's origin.
Here's an example request body:
{
"scope": "store/order/*",
"headers": {
"X-Custom-Auth-Header": "{secret_auth_password}"
},
"destination": "https://app.example.com/orders",
"is_active": true
}
Hope this helps!
I'm now writing a vue project and I want to send some api requests to the remote server.
So I add this in my webpack.dev.conf.js:
devServer: {
historyApiFallback: true,
noInfo: true,
hot:true,
open:true,
proxy: {
'/api': {
target: 'http://47.93.247.233',
secure: false,
changeOrigin: true,
pathRewrite: {'^/api' : ''}
}
}
},
But I still get 404 in my browser.
And I'm sure the server is ok:
I think maybe the webpack devServer didn't forward my http request to the remote server. Is there anything wrong in my code? Or, can I try some other methods?
Thanks in advance!
Did you try to use
proxyTable: {...},
instead of
proxy{}
I'm running with webpack version 3.10.0 with npm v 5.6.0 and this works fine!
May be, you will try "logLevel: 'debug' too, to see some hints in your terminal window.