The fastest way to develop full-stack web apps with React & Node.js.
MIT License
Bot releases are visible (Hide)
Published by github-actions[bot] 12 months ago
Published by github-actions[bot] 12 months ago
Published by github-actions[bot] about 1 year ago
You can now customise the Vite config for your client app. This allows you to add plugins, change the dev server settings and more.
By adding a vite.config.ts
or vite.config.js
to your client
directory, you can customise the Vite config. For example, you change the dev server behaviour
not to open the browser automatically:
import { defineConfig } from 'vite'
export default defineConfig({
server: {
open: false,
},
})
⚠️ Be careful when changing the dev server port, you'll need to update the WASP_WEB_CLIENT_URL
env var in your .env.server
file.
Running wasp studio
in the root of your project starts Wasp Studio which visualises your application and shows you the relationships between pieces of your app. It is an experimental feature which is not yet fully ready, but we are working on it and will be adding more features to it in the future.
Published by github-actions[bot] about 1 year ago
Published by github-actions[bot] about 1 year ago
Published by github-actions[bot] about 1 year ago
Wasp Studio version
Published by github-actions[bot] about 1 year ago
Published by github-actions[bot] about 1 year ago
Published by github-actions[bot] about 1 year ago
We added an API for extending the default signup form with custom fields. This allows you to add fields like age
, address
, etc. to your signup form.
You first need to define the auth.signup.additionalFields
property in your .wasp
file:
app crudTesting {
// ...
auth: {
userEntity: User,
methods: {
usernameAndPassword: {},
},
onAuthFailedRedirectTo: "/login",
signup: {
additionalFields: import { fields } from "@server/auth.js",
},
},
}
Then, you need to define the fields
object in your auth.js
file:
import { defineAdditionalSignupFields } from '@wasp/auth/index.js'
export const fields = defineAdditionalSignupFields({
address: (data) => {
// Validate the address field
if (typeof data.address !== 'string') {
throw new Error('Address is required.')
}
if (data.address.length < 10) {
throw new Error('Address must be at least 10 characters long.')
}
// Return the address field
return data.address
},
})
Finally, you can extend the SignupForm
component on the client:
import { SignupForm } from "@wasp/auth/forms/Signup";
export const SignupPage = () => {
return (
<div className="container">
<main>
<h1>Signup</h1>
<SignupForm
additionalFields={[
{
name: "address",
label: "Address",
type: "input",
validations: {
required: "Address is required",
},
},
]}
/>
</main>
</div>
);
};
Wasp now supports PostgreSQL extensions! You can enable them in your main.wasp
file:
app todoApp {
// ...
db: {
system: PostgreSQL,
prisma: {
clientPreviewFeatures: ["postgresqlExtensions"],
dbExtensions: [{
name: "pgvector",
// map: "vector", (optional)
// schema: "public", (optional)
// version: "0.1.0", (optiona)
}]
}
}
}
This will add the necessary Prisma configuration to your schema.prisma
file. Keep in mind that your database needs to support the extension you want to use. For example, if you want to use the pgvector
extension, you need to install it in your database first.
Now you can type your async jobs better and receive all the benefits of Typescript. When you define a job, Wasp will generate a generic type which you can use to type your job function:
job simplePrintJob {
executor: PgBoss,
perform: {
fn: import { simplePrint } from "@server/jobs.js",
},
entities: [Task]
}
import { SimplePrintJob } from "@wasp/jobs/simplePrintJob";
import { Task } from "@wasp/entities";
export const simplePrint: SimplePrintJob<
{ name: string },
{ tasks: Task[] }
> = async (args, context) => {
// 👆 args are typed e.g. { name: string }
// 👆 context is typed e.g. { entitites: { Task: ... } }
const tasks = await context.entities.Task.findMany({});
return {
tasks,
};
};
When you use the job, you can pass the arguments and receive the result with the correct types:
import { simplePrintJob } from "@wasp/jobs/simplePrintJob.js";
...
const job = await simplePrintJob.submit({ name: "John" })
...
const result = await result.pgBoss.details()
// 👆 result is typed e.g. { tasks: Task[] }
Published by github-actions[bot] about 1 year ago
Wasp now offers a way to link to pages in your app in a type-safe way. This means that you can't accidentally link to a page that doesn't exist, or pass the wrong arguments to a page.
After you defined your routes:
route TaskRoute { path: "/task/:id", to: TaskPage }
You can get the benefits of type-safe links by using the Link
component from @wasp/router
:
import { Link } from '@wasp/router'
export const TaskList = () => {
// ...
return (
<div>
{tasks.map((task) => (
<Link
key={task.id}
to="/task/:id"
{/* 👆 You must provide a valid path here */}
params={{ id: task.id }}>
{/* 👆 All the params must be correctly passed in */}
{task.description}
</Link>
))}
</div>
)
}
You can also get all the pages in your app with the routes
object:
import { routes } from '@wasp/router'
const linkToTask = routes.TaskRoute({ params: { id: 1 } })
wasp new
) is now more aggressive when ignoring .env files, ensuring they don't get committed by accident (wrong name, wrong location, ...).Published by github-actions[bot] about 1 year ago
.env.server
instead of .env.client
to the client app .env
file. This prevented using the .env.client
file in the client app."@client/file.jsx"
could mean "@client/file.tsx"
, which could hide some missing import diagnostics and cause go-to definition to jump to the wrong file.When an external import is missing its implementation, waspls now offers a Code Action to quickly scaffold the missing JavaScript or TypeScript function:
query getTasks {
fn: import { getTasks } from "@server/queries.js",
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// ERROR: `getTasks` is not exported from `src/server/queries.ts`
entities: [Task],
}
Using the code action (pressing Ctrl + . or clicking the lightbulb 💡 icon in VSCode) will add the following code to src/server/queries.ts
:
import { GetTasks } from '@wasp/queries/types'
import GetTasksInput = void
import GetTasksOutput = void
export const getTasks: GetTasks<GetTasksInput, GetTasksOutput> = async (args, context) => {
// Implementation goes here
}
Published by github-actions[bot] over 1 year ago
Published by github-actions[bot] over 1 year ago
Wasp now allows you to enable desired previewFeatures
for the Prisma client:
app MyApp {
title: "My app",
// ...
db: {
// ...
prisma: {
clientPreviewFeatures: ["extendedWhereUnique"]
}
}
}
Read all about Prisma preview features in the official docs.
Published by github-actions[bot] over 1 year ago
Published by github-actions[bot] over 1 year ago
Published by github-actions[bot] over 1 year ago
Published by github-actions[bot] over 1 year ago
Published by github-actions[bot] over 1 year ago
Published by github-actions[bot] over 1 year ago
Published by github-actions[bot] over 1 year ago