In case the migration script doesn't work well for you, you can do the same steps manually, as described here:
1. Rename your project's root directory to something like `foo_old`.
2. Create a new project by running `wasp new foo`.
3. Delete all files of `foo/src` except `vite-env.d.ts`.
4. If `foo_old/src/client/public` exists and contains any files, copy those files into
`foo/public`.
5. Copy the contents of `foo_old/src` into `foo/src`.
`foo/src` should now contain `vite-env.d.ts`, `.waspignore`, and three subdirectories (`server`, `client`, and `shared`).
Don't change anything about this structure yet.
6. Delete redundant files and folders from `foo/src`:
- `foo/src/.waspignore` - A new version of this file already exists at the top level.
- `foo/src/client/vite-env.d.ts` - A new version of this file already exists at the top level.
- `foo/src/client/tsconfig.json` - A new version of this file already exists at the top level.
- `foo/src/server/tsconfig.json` - A new version of this file already exists at the top level.
- `foo/src/shared/tsconfig.json` - A new version of this file already exists at the top level.
- `foo/src/client/public` - You've moved all the files from this directory in step 5.
7. Update all the `@wasp` imports in your JS(X)/TS(X) source files in the `src/` dir.
For this, we prepared a special script that will rewrite these imports automatically for you.
Before doing this step, as the script will modify your JS(X)/TS(X) files in place, we advise committing
all changes you have so far, so you can then both easily inspect the import rewrites that our
script did (with `git diff`) and also revert them if something went wrong.
To run the import-rewriting script, make sure you are in the root dir of your wasp project, and then run
```
npx jscodeshift@0.15.1 -t https://raw.githubusercontent.com/wasp-lang/wasp-codemod/main/src/transforms/imports-from-0-11-to-0-12.ts --extensions=js,ts,jsx,tsx src/
```
Then, check the changes it did, in case some kind of manual intervention is needed (in which case you should see TODO comments generated by the script).
Alternatively, you can find all the mappings of old imports to the new ones in [this table](https://docs.google.com/spreadsheets/d/1QW-_16KRGTOaKXx9NYUtjk6m2TQ0nUMOA74hBthTH3g/edit#gid=1725669920) and use it to fix some/all of them manually.
8. Replace the Wasp file in `foo` (i.e., `main.wasp`) with the Wasp file from `foo_old`
9. Change the Wasp version field in your Wasp file (now residing in `foo`) to `"^0.12.0"`.
10. Correct external imports in your Wasp file (now residing in `foo`).
imports. You can do this by running search-and-replace inside the file:
- Change all occurrences of `@server` to `@src/server`
- Change all occurrences of `@client` to `@src/client`
For example, if you previously had something like:
```js
page LoginPage {
// highlight-next-line
// This previously resolved to src/client/LoginPage.js
// highlight-next-line
component: import Login from "@client/LoginPage"
}
// ...
query getTasks {
// highlight-next-line
// This previously resolved to src/server/queries.js
// highlight-next-line
fn: import { getTasks } from "@server/queries.js",
}
```
You should change it to:
```js
page LoginPage {
// highlight-next-line
// This now resolves to src/client/LoginPage.js
// highlight-next-line
component: import Login from "@src/client/LoginPage"
}
// ...
query getTasks {
// highlight-next-line
// This now resolves to src/server/queries.js
// highlight-next-line
fn: import { getTasks } from "@src/server/queries.js",
}
```
Do this for all external imports in your `.wasp` file. After you're done, there shouldn't be any occurrences of strings `"@server"` or `"@client"`
11. Take all the dependencies from `app.dependencies` declaration in
`foo/main.wasp` and move them to `foo/package.json`. Make sure to remove the `app.dependencies` field from `foo/main.wasp`.
For example, if `foo_old/main.wasp` had:
```css
app Foo {
// ...
dependencies: [ ('redux', '^4.0.5'), ('reacjt-redux', '^7.1.3')];
}
```
Your `package.json` in `foo` should now list these dependencies (Wasp already generated most of the file, you just have to list additional dependencies).
```json
{
"name": "foo",
"dependencies": {
"wasp": "file:.wasp/out/sdk/wasp",
"react": "^18.2.0",
// highlight-next-line
"redux": "^4.0.5",
// highlight-next-line
"reactjs-redux": "^7.1.3"
},
"devDependencies": {
"typescript": "^5.1.0",
"vite": "^4.3.9",
"@types/react": "^18.0.37",
"prisma": "4.16.2"
}
}
```
12. Copy all lines you might have added to `foo_old/.gitignore` into
`foo/.gitignore`
13. Copy the rest of the top-level files and folders (all of them except for `.gitignore`, `main.wasp` and `src/`)
in `foo_old/` into `foo/` (overwrite the existing files in `foo`).
14. Run `wasp clean` in `foo`.
15. Delete the `foo_old` directory.
That's it! You now have a properly structured Wasp 0.12.0 project in the `foo` directory.
Your app probably doesn't quite work yet due to some other changes in Wasp 0.12.0, but we'll get to that in the next sections.
### Migrating declaration names
Wasp 0.12.0 adds a casing constraints when naming Queries, Actions, Jobs, and Entities in the `main.wasp` file.
The following casing conventions have now become mandatory:
- Operation (i.e., Query and Action) names must begin with a lowercase letter: `query getTasks {...}`, `action createTask {...}`.
- Job names must begin with a lowercase letter: `job sendReport {...}`.
- Entity names must start with an uppercase letter: `entity Task {...}`.
### Migrating the Tailwind Setup
:::note
If you don't use Tailwind in your project, you can skip this section.
:::
There is a small change in how the `tailwind.config.cjs` needs to be defined in Wasp 0.12.0.
You'll need to wrap all your paths in the `content` field with the `resolveProjectPath` function. This makes sure that the paths are resolved correctly when generating your CSS.
Here's how you can do it: