Nuxt.config.js for running Showcode in Homestead
This gist shows the Nuxt configuration I use when developing Showcode inside of a Homestead VM.
This configuration will be helpful for running in any other isolated VM where you cannot open the browser at localhost.
All the changes are within the first 20 lines of the config:
server: {
host: '0', // '0' is short for '0.0.0.0'.
},By default, the Nuxt server will listen to localhost on port 3000. This won't work with Homestead unless we do some manual routing.
What works, however, is binding it to 0.0.0.0 instead. The server will then listen to the local address, so with a default homestead setup, you can browse to http://192.168.10.10:3000 from your host machine.
Now that we have the app running on a different system, the browser will restrict access to sensible functionality like navigator.clipboard. This can be circumvented by serving the app securely over SSL. In order to do this, in the project root, we need to generate a server key first:
vagrant@homestead:~/Code/forks/showcode$ openssl genrsa 4096 > server.key
Generating RSA private key, 4096 bit long modulus (2 primes)
..................................................................................................................................................................................................++++
...........++++
e is 65537 (0x010001)Next, we use the key to generate a self-signed certificate:
vagrant@homestead:~/Code/forks/showcode$ openssl req -new -x509 -nodes -sha256 -days 365 -key server.key -out server.crt
You are about to be asked to enter information that will be incorporated
into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter '.', the field will be left blank.
-----
Country Name (2 letter code) [AU]:
State or Province Name (full name) [Some-State]:
Locality Name (eg, city) []:
Organization Name (eg, company) [Internet Widgits Pty Ltd]:
Organizational Unit Name (eg, section) []:
Common Name (e.g. server FQDN or YOUR name) []:
Email Address []:Finally, we need to add the configuration to our server configuration, don't forget to import fs and path:
import path from 'path'
import fs from 'fs'
module.exports = {
server: {
host: '0',
https: {
key: fs.readFileSync(path.resolve(__dirname, 'server.key')),
cert: fs.readFileSync(path.resolve(__dirname, 'server.crt'))
}
},One final thing to do is to have webpack use polling mode for watching our files instead of the default inotify. I never really got inotify to work properly on the vagrant guest filesystems, but polling is working around this.
Just add the following to your config:
watchers: {
webpack: {
aggregateTimeout: 300,
poll: 1000,
}
},You should now be all set to run and participate in the development of Showcode!
If the app is not coming up after installing the SSL certificates, double-check that you are indeed using the https protocol ;-) (https://192.168.10.10:3000). There is no http fallback.