https://github.com/tyler36/ddev-vite
Basic Vite implementation for DDEV
https://github.com/tyler36/ddev-vite
ddev ddev-get hacktoberfest vitejs
Last synced: 3 months ago
JSON representation
Basic Vite implementation for DDEV
- Host: GitHub
- URL: https://github.com/tyler36/ddev-vite
- Owner: tyler36
- License: apache-2.0
- Created: 2024-04-03T06:34:27.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-13T00:32:26.000Z (4 months ago)
- Last Synced: 2025-03-28T14:34:12.163Z (3 months ago)
- Topics: ddev, ddev-get, hacktoberfest, vitejs
- Language: Shell
- Homepage: https://github.com/tyler36/ddev-vite
- Size: 74.2 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/tyler36/ddev-vite/actions/workflows/tests.yml) 
# ddev-vite
- [What is ddev-vite?](#what-is-ddev-vite)
- [Components of the repository](#components-of-the-repository)
- [Getting started](#getting-started)
- [Automatically start ViteJs](#automatically-start-vitejs)
## What is ddev-vite?
[ViteJs](https://vitejs.dev/) is a modern bundler, designed to be fast.
This add-on is a low-config option that exposes Vite's default port from DDEV so you can view the page in your browser.
It is based on the article [Working with Vite in DDEV - an introduction](https://ddev.com/blog/working-with-vite-in-ddev/), by Matthias Andrasch.
Developers are responsible for installing, maintaining, and running the Vite server. This add-on only exposes the port.
## Components of the repository
- [config.vite.yaml](config.vite.yaml): configure DDEV to expose the port.
- [install.yaml](install.yaml): describes how to install the service or other component.
- [test.bats](tests/test.bats): test suite to confirm add-on continues to work as expected.
- [Github actions setup](.github/workflows/tests.yml): automates daily tests and on pull requests.
## Getting started
This add-on assumes the developer has:
- Installed ViteJs via their preferred package manager.
- A valid ViteJS configuration file is present in the project root.
1. Install the add-on and restart DDEV
```shell
ddev add-on get tyler36/ddev-vite
ddev restart
```
1. Update `vite.config.js`
```js
const port = 5173;
const origin = `${process.env.DDEV_PRIMARY_URL}:${port}`;
export default defineConfig({
...
// Adjust Vites dev server for DDEV: https://vitejs.dev/config/server-options.html
server: {
// The following line is require until the release of https://github.com/vitejs/vite/pull/19241
cors: { origin: process.env.DDEV_PRIMARY_URL },
// ----------------
host: '0.0.0.0',
port: port,
origin: origin,
strictPort: true
},
});
```
1. Start Vite inside the container.
```shell
ddev npn run dev
```
### Automatically start ViteJs
To automatically start the ViteJs server, update DDEV `post-start` hook in `.ddev/config.yaml`.
For example:
```yaml
hooks:
post-start:
- exec: npm run dev
```
**Contributed and maintained by [@tyler36](https://github.com/tyler36)**