Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: support https in vuepress log output (fix #2357 #2358) #2750

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

morphatic
Copy link

Summary

Make the URL displayed in output logged by the dev server accurately reflects whether the dev server is running in HTTPS mode or not.

NOTE: I'm aware this repo is at or near EOL. This is such a minor tweak, at the very least I thought someone else might find it useful and/or something similar might find its way into v2 or Vitepress. Won't be upset/offended/discouraged if it gets closed/rejected without merge.

Explanation/Justification

This is mostly a cosmetic/convenience change. Previously, when running the dev server (yarn docs:dev or npm run docs:dev), the console would output messages like:

  • VuePress dev server listening at http://docs.example.test:8080/
  • success [16:27:43] Build b6b75d finished in 111 ms! ( http://docs.example.test:8080/ )

Many editors (e.g. VSCode) allow the developer to hover over that URL and open up the link in a web browser. The problem was that the http:// part of the URLs displayed here were hard-coded. Since it is relatively easy to run the local dev server using SSL, and this is desirable for making the dev environment match the deployment environment as closely as possible, it would be nice if the URLs logged to the console accurately reflected this. Running locally in SSL mode is also a good way to be able to test the PWA functions of your Vuepress site before deployment (although I haven't tested this).

To set up SSL for the local dev server:

  1. Update your hosts file to add a custom domain at which to test, e.g. docs.example.test. Using a *.test TLD is recommended for local testing (and may be required to get this to work in some browsers?).
  2. Install locally-trusted SSL certificates. mkcert is a nice tool for this. By running mkcert docs.example.test in the root of the Vuepress project, the cert and key pem files will be generated and registered to be trusted by your local machine.
  3. Update your .vuepress/config.js accordingly (NOTE: update the path to the certs according to your project structure):
    const fs = require('fs')
    const path = require('path')
    module.exports = {
      title: 'My Docs',
      description: 'Everything you need to know to use my app',
      host: 'docs.example.test',
      devServer: {
        https: true,
        key: fs.readFileSync(path.resolve(__dirname, '..', '..', 'docs.example.test-key.pem'), 'utf8'),
        cert: fs.readFileSync(path.resolve(__dirname, '..', '..', 'docs.example.test.pem'), 'utf8'),
      },
    }

With this PR, once you've added SSL to your dev server in this way, the URL logged to the console will look something like https://docs.example.test:8080.

What kind of change does this PR introduce? (check at least one)

  • Bugfix
  • Feature
  • Code style update
  • Refactor
  • Docs
  • Build-related changes
  • Other, please describe:

If changing the UI of default theme, please provide the before/after screenshot:

Does this PR introduce a breaking change? (check one)

  • Yes
  • No

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

  • When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)

You have tested in the following browsers: (Providing a detailed version will be better.)

  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE

If adding a new feature, the PR's description includes:

  • A convincing reason for adding this feature
  • Related documents have been updated
  • Related tests have been updated

No unit tests were added, but I did run the tests after making the change to make sure it didn't break anything.

Other information:

#2357 and #2358 would be addressed by this.

Add a property `isHttps` to the options passed to the `DevLogPlugin` used with the `vuepress-log` plugin. The value of this property is determined based on the existence and value of the `devServer.https` property which in turn is part of the `webpack-dev-server` instance used by Vuepress for running a Vuepress site in development mode
Originally, the `displayUrl` output in log messages was hard-coded to be `http`. Now it is set to `https` if the `isHttps` value passed in via `options` is truthy.
@morphatic morphatic changed the title feat/support https in vuepress log output (fix #2357 #2358) feat: support https in vuepress log output (fix #2357 #2358) Dec 30, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant