I'm trying to set up to run Nuxt 3 with HTTPS for localhost. I've looked at other guides and questions that were already asked online, but they all seem to be using older versions of Nuxt and for some reason, that way does not work anymore. For example, I've tried using this link as a reference on how to set up my nuxt.config.ts file, however, it's not working out for me.
When using the server property, I'm getting the error "server does not exist in type NuxtConfig", however, devServer seems to not give me any errors at least (still not working). Here's my
nuxt.config.file
import { fileURLToPath } from "node:url"
export default defineNuxtConfig({
css: ["~/assets/global.scss"],
experimental: {
reactivityTransform: true,
},
app: {
head: {
htmlAttrs: {
lang: "en",
},
},
},
devServer: {
https: {
key: fileURLToPath(new URL("~/certs/localhost-key.pem", import.meta.url)),
cert: fileURLToPath(new URL("~/certs/localhost.pem", import.meta.url)),
},
},
})
SSL certificate is created and self-signed using mkcert.
After I generate the SSL certificate and install everything and try to access https://localhost:3000, I get the error "SSL_ERROR_RX_RECORD_TOO_LONG".
I'd really appreciate if someone could help me out with this. I've never done this before so not really sure what I am doing and it's taking a while already to solve.
It seems I managed to find a way to set up HTTPS on localhost in the end.
Here's how I did it:
First I followed this short guide to set up & self-sign the SSL certificate. I also changed nuxt dev from the package.json file to the following nuxt dev --https --ssl-cert localhost.pem --ssl-key localhost-key.pem.
However, this gave me a 500 fetch failed error. This was solved by following this thread, which basically stated that you need to enable the NODE_TLS_REJECT_UNAUTHORIZED=0 variable.
Now everything seems to be working perfectly!
Related
I have a simple Nuxt ssr app with a serverMidlleware handling one api endpoint (/api/contact). To deploy the app I am using pm2.
Running the app in development and in production (locally without pm2) everything works fine. Deploying it on a basic ubuntu server using pm2, the api endpoint becomes unreachable (404 not found).
As pointed out here, the middleware is not included in the .nuxt build. So, I made sure to copy the api directory (where my middleware is located) too.
for pm2 deployment, ecosystem.config.js:
module.exports = {
apps: [
{
name: 'App',
exec_mode: 'cluster',
instances: 'max',
script: './node_modules/nuxt/bin/nuxt.js',
args: 'start'
}
]
}
and inside nuxt.config.js:
serverMiddleware: [
{ path: '/api/contact', handler: '~/api/contact.js' }
]
As only the deployment via pm2 fails, I assume the other files are not of interest. I am assuming this must be related to some sort of pm2 config to find the api folder.
Following my answer here solved the issue here too.
You probably had something missing in your nuxt.config.js file
export default {
ssr: true,
target: 'server',
modules: [
'#nuxtjs/axios',
],
serverMiddleware: [
{ path: '/api', handler: '~/server-middleware/rest.js' },
],
}
Hi i build a new vuejs project with "npm create test" and serve that with "npm run serve"
And the result was this
But when I go to the desired address in "http://localhost:8080/" I get these errors in the console:
I researched this topic and the way I was suggested was to edit the config file and add this section
devServer: {
host: "localhost"
}
And this is my whole config file
But my problems persisted
I'm new in vuejs and i hopeful that you can help me. Thanks.
Your project attempts to use WebSockets via socketjs.
You will need to run
npm install sockjs
see: https://www.npmjs.com/package/sockjs
You will also need to have a sockhost, see: https://webpack.js.org/configuration/dev-server/
create a fill named "vue.config.js" in main root.
add this scripts to the created fill:
module.exports = {
devServer: {
host: 'localhost',
hot: true,
disableHostCheck: true,
https: false
}
}
Maybe it's just due to a change of network, I think that if you restart the server or reconnect to original network it will dissapear.
I have configured devserver in vue-config.js before like this:
devServer: {
proxy: {
"/api/*": {
target: "http://localhost:3001",
secure: false
}
}
}
In nuxt-SPA this dont work. My front is still sending API-calls to same origin localhost:3000. How to configure API-calls to different port?
Duplicate of
How to use webpack dev proxy with Nuxt
https://github.com/nuxt/nuxt.js/issues/762
Due to its unversal app nature Nuxts doe not have webpack proxy.
Simpliest one to implement is here - https://github.com/nuxt-community/proxy-module
I recently upgraded my VUE CLI to 3.5.5
After running the standard install, I noticed CORS and websocket errors being thrown in the browser ...Connection closed before receiving a handshake response. The errors are thrown in both Firefox and Chrome.
I am guessing this has something to do with the webpack devserver and CORS but its a guess because I know nearly nothing about webpack.
I added a vue.config.js and tried various configs for the webpack devServer but none have worked.
Can anyone illuminate this issue? - it must be very common. Thanks
So the solution i found was to create a vue.config.js file at the root level of the project and use this webpack config:
module.exports = {
devServer: {
host: "0.0.0.0",
public: "0.0.0.0:8080",
disableHostCheck: true,
proxy: {
"/app": {
target: "http://localhost:8081",
changeOrigin: true,
ws: true
}
}
}
};
I just ran the angular-cli setup for a new app. I have Apache running which is serving a local API on port 80 at http://localhost/path/to/api. Of course, ng start serves on port 4200 at http://localhost:4200.
I'm on Windows 10 if that is relevant.
So I researched proxying for Angular-cli and created proxy.config.json:
{
"/api/": { //I've tried "/api", "/api", "/api/*", none worked
"target" : {
"host": "localhost",
"protocol": "http:",
"port": 80
}, //also tried just straight "http://localhost" and "http://localhost:80"
"secure" : false,
"changeOrigin": false,
"logLeverl" : "debug",
"pathRewrite": {
"^/api/clients/public/" : "/path/to/api/clients/public/"
}
}
}
And hooked it up to npm start via package.json. I added the "pathRewrite" to test it on a specific path.
In the console, I get ERROR Object { _body: "<!DOCTYPE html> <html lang="en"> <h…", status: 404, ok: false, statusText: "Not Found", headers: Object, type: 2, url: "http://localhost:4200/path/to/api/clients/public/" } for the call /api/clients/public/
So from the URL I know the proxy config is working (pathRewrite is in effect) but the port is not changed.
I have tried every permutation of the config I've found on the internet and in the documentation.
Does anyone have an idea?
I also tried using a symlink into the Angular application folder but it is redirected to index.html, so if there is a way to exclude that path from the redirect, that works for me too.
Start with a simple version of proxy-conf.json. Here's what I use:
{
"/api": {
"target": "http://localhost:8000",
"secure": false
}
}
and run it with
ng serve --proxy-config proxy-conf.json
This works for me when I use the Node.js server (runs on port 8000), and it also works fine with Java Spring Boot (the Tomcat server). My servers just return data. Why do you need path rewrite? Using proxy-conf.json is for dev environment. When you'll deploy the app bundles under Apache, you won't need this proxy.