Skip to content

[9.x] Update TLS configuration options #8164

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

Merged
merged 3 commits into from
Sep 21, 2022
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 33 additions & 6 deletions vite.md
Original file line number Diff line number Diff line change
Expand Up @@ -130,19 +130,46 @@ The Laravel plugin also supports multiple entry points and advanced configuratio
<a name="working-with-a-secure-development-server"></a>
#### Working With A Secure Development Server

If your development web server is running on HTTPS, including Valet's [secure command](/docs/{{version}}/valet#securing-sites), you may run into issues connecting to the Vite development server. You may configure Vite to also run on HTTPS by adding the following to your `vite.config.js` configuration file:
If your local development web server is serving your application via HTTPS, you may run into issues connecting to the Vite development server.

If you are using [Laravel Valet](/docs/{{version}}/valet) for local development and have run the [secure command](/docs/{{version}}/valet#securing-sites) against your application, you may configure the Vite development server to automatically use Valet's generated TLS certificates:

```js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
plugins: [
laravel({
// ...
valetTls: 'my-app.test', // [!tl add]
}),
],
});
```

When using another web server, you should generate a trusted certificate and manually configure Vite to use the generated certificates:

```js
// ...
import fs from 'fs'; // [tl! add]

const host = 'my-app.test'; // [tl! add]

export default defineConfig({
// ...
server: { // [tl! add]
https: true, // [tl! add]
host: 'localhost', // [tl! add]
}, // [tl! add]
server: { // [!tl add]
host, // [!tl add]
hmr: { host }, // [!tl add]
https: { // [!tl add]
key: fs.readFileSync(`/path/to/${host}.key`), // [!tl add]
cert: fs.readFileSync(`/path/to/${host}.crt`), // [!tl add]
}, // [!tl add]
}, // [!tl add]
});
```

You will also need to accept the certificate warning for Vite's development server in your browser by following the "Local" link in your console when running the `npm run dev` command.
If you are unable to generate a trusted certificate for your system, you may install and configure the [`@vitejs/plugin-basic-ssl` plugin](https://github.com/vitejs/vite-plugin-basic-ssl). When using untrusted certificates, you will need to accept the certificate warning for Vite's development server in your browser by following the "Local" link in your console when running the `npm run dev` command.

<a name="loading-your-scripts-and-styles"></a>
### Loading Your Scripts And Styles
Expand Down