Skip to content
Draft
1 change: 0 additions & 1 deletion src/routes/solid-router/concepts/data.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
"nesting.mdx",
"layouts.mdx",
"alternative-routers.mdx",
"queries.mdx",
"actions.mdx"
]
}
1 change: 1 addition & 0 deletions src/routes/solid-start/data.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"pages": [
"index.mdx",
"getting-started.mdx",
"migrating-from-v1.mdx",
"building-your-application",
"advanced",
"guides"
Expand Down
108 changes: 108 additions & 0 deletions src/routes/solid-start/migrating-from-v1.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
---
title: Migrating from v1
use_cases: >-
existing project, migration, upgrade
tags:
- setup
- installation
- starter
- template
- quickstart
- init
version: '2.0'
description: >-
Migrate your SolidStart project from v1 to v2.
---

This is a migration guide of how to upgrade your v1 SolidStart app to our new v2 version.

Please note that some third-party packages may not be compatible with v2 yet.

## Migration steps

**1. Update your project to use the latest version of SolidStart**

```package-install
@solidjs/start@alpha
```

**2. Rename `app.config.ts` to `vite.config.ts`**

**3. Update`vite.config.ts`**

v2 ships as a native vite plugin using the environment api instead of vinxi.

```tsx
import { defineConfig } from "vite";
import { solidStart } from "@solidjs/start/config";
export default defineConfig({
Comment on lines +37 to +38
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
import { solidStart } from "@solidjs/start/config";
export default defineConfig({
import { solidStart } from "@solidjs/start/config";
export default defineConfig({

plugins: [
solidStart(),
]
});
```

An important note is that `defineConfig` comes from `vite` directly.

#### Defining middleware

Middlware is defined using the `middleware` option on the `solidStart` vite plugin.

```tsx
import { defineConfig } from "vite";
import { solidStart } from "@solidjs/start/config";
export default defineConfig({
Comment on lines +53 to +54
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
import { solidStart } from "@solidjs/start/config";
export default defineConfig({
import { solidStart } from "@solidjs/start/config";
export default defineConfig({

plugins: [
solidStart({
middleware: "./src/middleware.ts"
}),
]
});
```

**4. Remove the vinxi dependency and add the vite dependency**

```bash
pnpm remove vinxi
```
Comment on lines +65 to +67
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
```bash
pnpm remove vinxi
```
```package-remove
vinxi
```

In order for this to work you also need to define the remove command in app.config.ts within the packageManagers object.


```json
"dependencies": {
"vite": "^7"
}
```

**5. Update`package.json` build/dev commands**

Update the build/dev commands to use native vite instead of vinxi.

```json
"scripts": {
"dev": "vite dev",
"build": "vite build"
}
```

**6. Replace all leftover vinxi imports**

- `useSession` now comes from `@solidjs/start/server` instead of `vinxi/http
Comment on lines +86 to +88
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
**6. Replace all leftover vinxi imports**
- `useSession` now comes from `@solidjs/start/server` instead of `vinxi/http
**6. Replace all imports from `vinxi/http` with `@solidjs/start/http`**

It seems that nearly all exports from vinxi/http have been moved to @solidjs/start/http. A few functions are not, but I don't think they are relevant to users.


**7. Add back nitro via the vite plugin**

```package-install
nitro@latest
```

```tsx
import { defineConfig } from "vite";
import { solidStart } from "@solidjs/start/config";

export default defineConfig({
plugins: [
solidStart(),
nitro({
preset: 'netlify'
})
]
});
```