W
Wasp-lang8mo ago
oli

Where to actually code my feature?

I've initialised the saas app, but want to confirm which folder I should start coding my actual app?
20 Replies
kapa.ai
kapa.ai8mo ago
Hi @oli. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You should start coding your actual app in the src/ directory of your Wasp project. This is where your source code (TS/JS/CSS/HTML) goes. Wasp allows you to organize and structure your code however you think is best - there's no need to separate client files and server files into different directories. It's recommended to organize code by features (i.e., vertically) for any project that is not very small. For example, you can have a user directory for all user-related files and a task directory for all task-related files, and so on. Here is an example of a feature-based structure:
src

├── task
│   ├── actions.ts -- former taskActions.ts
│   ├── queries.ts -- former taskQueries.ts
│   ├── Task.css
│   ├── TaskLisk.tsx
│   └── Task.tsx
├── user
│   ├── actions.ts -- former userActions.ts
│   ├── Dashboard.tsx
│   ├── Login.tsx
│   ├── queries.ts -- former userQueries.ts
│   ├── Register.tsx
│   └── User.tsx
├── MainPage.tsx
└── utils.ts
src

├── task
│   ├── actions.ts -- former taskActions.ts
│   ├── queries.ts -- former taskQueries.ts
│   ├── Task.css
│   ├── TaskLisk.tsx
│   └── Task.tsx
├── user
│   ├── actions.ts -- former userActions.ts
│   ├── Dashboard.tsx
│   ├── Login.tsx
│   ├── queries.ts -- former userQueries.ts
│   ├── Register.tsx
│   └── User.tsx
├── MainPage.tsx
└── utils.ts
The most important file in the project is main.wasp. Wasp uses the configuration within it to perform its magic. Based on what you write, it generates a bunch of code for your database, server-client communication, React routing, and more. Remember not to edit anything in the .wasp folder. These are the files that Wasp is compiling for you. All your work should be in the root of the project, like on your main.wasp config file, and in src. Sources: - Wasp Docs - Project Structure (https://wasp-lang.dev/docs/tutorial/project-structure) - Wasp Docs - Migration from 0.11.X to 0.12.X (https://wasp-lang.dev/docs/migrate-from-0-11-to-0-12#next-steps) - Discord Support Thread (https://discord.com/channels/686873244791210014/1098429088164753498) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @oli, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?
miho
miho8mo ago
How you tried what the bot suggested? You should start in the app folder and in the src folder. I recommend going through the Wasp tutorial to familiarize yourself with it https://wasp-lang.dev/docs/tutorial/create
1. Creating a New Project | Wasp
You'll need to have the latest version of Wasp installed locally to follow this tutorial. If you haven't installed it yet, check out the QuickStart guide!
oli
oliOP8mo ago
thanks I have figured it out - I also encountered another issue with the dummy email sending, im getting a 500 error when i try to sign up etc, do i need to set env vars somewhere or something?
No description
miho
miho8mo ago
When you scroll the error message you'll probably see a note "You didn't migrate your DB", make sure to run wasp db migrate-dev. I definitely suggest trying out the Wasp tutorial as it goes through the basics of Wasp to help you be more confident when developing with it 🙂
oli
oliOP8mo ago
@kapa.ai explain this error Wasp can't run PostgreSQL dev database for you since port 5432 is already in use.
kapa.ai
kapa.ai8mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- The error message "Wasp can't run PostgreSQL dev database for you since port 5432 is already in use" means that the port 5432, which is the default port for PostgreSQL, is already being used by another process on your machine. This prevents Wasp from starting a PostgreSQL database for you because it can't bind to the required port. When you run wasp start db, Wasp tries to start a PostgreSQL database for you in a Docker container, and it attempts to bind this container to port 5432. If another process is already using this port, Docker will not be able to bind to it, and you'll see the error message you described. To resolve this issue, you have a few options: 1. You can stop the process that's currently using port 5432. You can find out what process is using the port by running lsof -i tcp:5432 on a Unix-based system or using a similar command or tool on other systems. 2. You can run your own PostgreSQL database and provide Wasp with the connection URL via .env.server. In this case, you can use any port that's available on your machine. 3. Wait for the feature that allows Wasp to automatically choose a different port if 5432 is occupied. This feature is currently being discussed in the Wasp community (Github Issue (https://github.com/wasp-lang/wasp/issues/1049)). Sources: - Discord Support Thread (https://discord.com/channels/686873244791210014/1216013963528245328) - Github Issue (https://github.com/wasp-lang/wasp/issues/1049) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @oli, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?
oli
oliOP8mo ago
@kapa.ai tell me how to fix this docker: Error response from daemon: Conflict. The container name "/wasp-dev-db-OpenSaaS-6f05178393" is already in use by container "2b147dc60764de525cc9e6ecfccc3881780bb22bca3aebd2f03f09aed6b3e0a2". You have to remove (or rename) that container to be able to reuse that name.
kapa.ai
kapa.ai8mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- The error message you're seeing indicates that a Docker container with the name "wasp-dev-db-OpenSaaS-6f05178393" already exists. Docker container names must be unique, so you can't create a new container with the same name as an existing one. To resolve this issue, you can either remove the existing container or rename it. Here's how you can do it: Option 1: Remove the existing container You can remove the existing container using the docker rm command followed by either the container ID or the container name. In your case, the command would be:
docker rm wasp-dev-db-OpenSaaS-6f05178393
docker rm wasp-dev-db-OpenSaaS-6f05178393
Option 2: Rename the existing container If you want to keep the existing container and just rename it, you can use the docker rename command. The syntax is docker rename CONTAINER NEW_NAME. For example:
docker rename wasp-dev-db-OpenSaaS-6f05178393 new_container_name
docker rename wasp-dev-db-OpenSaaS-6f05178393 new_container_name
Replace new_container_name with the new name you want to use for the container. After you've either removed or renamed the existing container, you should be able to create a new container with the name "wasp-dev-db-OpenSaaS-6f05178393" without any conflicts. Sources: - Docker CLI Documentation (https://docs.docker.com/engine/reference/commandline/rm/) - Docker CLI Documentation (https://docs.docker.com/engine/reference/commandline/rename/) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @oli, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?
oli
oliOP8mo ago
@kapa.ai the dummy email provider is not working and i can't see anything in the terminal output
kapa.ai
kapa.ai8mo ago
Let me check the knowledge base for you. One moment! :books:
MEE6
MEE68mo ago
Wohooo @oli, you just became a Waspeteer level 1!
kapa.ai
kapa.ai8mo ago
---------------------- The Dummy email provider in Wasp is designed to help speed up development by logging emails to the console instead of actually sending them. If you're not seeing anything in the terminal output, there could be a few reasons for this: 1. Check your main.wasp file: Make sure you've set the provider to Dummy in your main.wasp file. Here's how you can do it:
app Example {
...
emailSender: {
provider: Dummy,
}
}
app Example {
...
emailSender: {
provider: Dummy,
}
}
(Source: Wasp Docs - Using the Dummy Provider (https://wasp-lang.dev/docs/advanced/email#using-the-dummy-provider)) 2. Check your application logic: Ensure that your application is actually triggering an email to be sent. If no email sending action is triggered, the Dummy provider won't have anything to log to the console. 3. Check your terminal: Make sure you're looking at the correct terminal output. The logs from the Dummy provider should appear in the same terminal where you're running your Wasp development server. 4. Check for errors: If there are any errors in your code or configuration, they might prevent the Dummy provider from working correctly. Look for error messages in your terminal output. If you've checked all of these and you're still not seeing any output from the Dummy provider, it might be a good idea to ask for help on the Wasp Discord server (https://discord.com/channels/686873244791210014/1215756032064880711) or Github Issues (https://github.com/wasp-lang/wasp/issues/249). The Wasp community is very active and helpful, and they might be able to help you troubleshoot the issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @oli, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?
oli
oliOP8mo ago
@kapa.ai i can see "POST /auth/email/signup 200 1123.749 ms - 16" in the terminal and thats it
kapa.ai
kapa.ai8mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- The message "POST /auth/email/signup 200 1123.749 ms - 16" is a log from the server indicating that a POST request was made to the /auth/email/signup endpoint, and it completed successfully with a 200 status code. The request took approximately 1123.749 milliseconds to complete. However, if you're using the Dummy email provider and expecting to see an email logged in the console, but you're not seeing it, there could be a few reasons: 1. Email not triggered: The signup action might not be triggering an email. Ensure that your signup action is set up to send an email. 2. Check your main.wasp file: Make sure you've correctly set the email provider to Dummy in your main.wasp file. 3. Check for errors: Look for any other error messages in your terminal output that might indicate a problem. If you've checked all of these and you're still not seeing the expected output, it might be a good idea to ask for help on the Wasp Discord server (https://discord.com/channels/686873244791210014/1215756032064880711) or Github Issues (https://github.com/wasp-lang/wasp/issues/249). The Wasp community is very active and helpful, and they might be able to help you troubleshoot the issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @oli, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?
oli
oliOP8mo ago
@kapa.ai is the sign-up email trigger already configured or do I need to do myself
kapa.ai
kapa.ai8mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- In Wasp, the sign-up email trigger is not configured out of the box. You need to create a custom sign-up action to send an email upon user registration. Here's a basic example of how you can create a custom sign-up action that sends an email verification link:
import {
ensureValidEmail,
ensurePasswordIsPresent,
ensureValidPassword,
createProviderId,
sanitizeAndSerializeProviderData,
findAuthIdentity,
createUser,
createEmailVerificationLink,
sendEmailVerificationEmail,
} from 'wasp/server/auth'

export const signup = async (args, _context) => {
ensureValidEmail(args)
ensurePasswordIsPresent(args)
ensureValidPassword(args)

const providerId = createProviderId('email', args.email)
const existingAuthIdentity = await findAuthIdentity(providerId)

if (!existingAuthIdentity) {
const newUserProviderData = await sanitizeAndSerializeProviderData({
hashedPassword: args.password,
isEmailVerified: false,
emailVerificationSentAt: null,
passwordResetSentAt: null,
})
await createUser(
providerId,
providerData,
// Any additional data you want to store on the User entity
{},
)

const verificationLink = await createEmailVerificationLink(args.email, '/email-verification');
try {
await sendEmailVerificationEmail(
args.email,
{
from: {
name: "My App Postman",
email: "[email protected]",
},
to: args.email,
subject: "Verify your email",
text: `Click the link below to verify your email: ${verificationLink}`,
html: `
<p>Click the link below to verify your email</p>
<a href="${verificationLink}">Verify email</a>
`,
}
);
} catch (e: unknown) {
console.error("Failed to send email verification email:", e);
throw new HttpError(500, "Failed to send email verification email.");
}
}
}
import {
ensureValidEmail,
ensurePasswordIsPresent,
ensureValidPassword,
createProviderId,
sanitizeAndSerializeProviderData,
findAuthIdentity,
createUser,
createEmailVerificationLink,
sendEmailVerificationEmail,
} from 'wasp/server/auth'

export const signup = async (args, _context) => {
ensureValidEmail(args)
ensurePasswordIsPresent(args)
ensureValidPassword(args)

const providerId = createProviderId('email', args.email)
const existingAuthIdentity = await findAuthIdentity(providerId)

if (!existingAuthIdentity) {
const newUserProviderData = await sanitizeAndSerializeProviderData({
hashedPassword: args.password,
isEmailVerified: false,
emailVerificationSentAt: null,
passwordResetSentAt: null,
})
await createUser(
providerId,
providerData,
// Any additional data you want to store on the User entity
{},
)

const verificationLink = await createEmailVerificationLink(args.email, '/email-verification');
try {
await sendEmailVerificationEmail(
args.email,
{
from: {
name: "My App Postman",
email: "[email protected]",
},
to: args.email,
subject: "Verify your email",
text: `Click the link below to verify your email: ${verificationLink}`,
html: `
<p>Click the link below to verify your email</p>
<a href="${verificationLink}">Verify email</a>
`,
}
);
} catch (e: unknown) {
console.error("Failed to send email verification email:", e);
throw new HttpError(500, "Failed to send email verification email.");
}
}
}
In your main.wasp file, you would then use this custom sign-up action like so:
action customSignup {
fn: import { signup } from "@src/auth/signup.js",
}
action customSignup {
fn: import { signup } from "@src/auth/signup.js",
}
Please note that this is a simplified example and you might need to adjust it according to your needs. For more details, you can refer to the Wasp documentation on creating a custom sign-up action (https://wasp-lang.dev/docs/auth/email#creating-a-custom-sign-up-action). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @oli, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?
miho
miho8mo ago
The bot doesn't know everything and it might give you misguisded answers like these. What are you trying to achieve and what are the issues? You talked a lot with the bot so if you could summarize that for us and we'll help 🙂
oli
oliOP8mo ago
I am just trying the account sign in and sign up functionality with the dummy provider but I cannot see anything in the terminal log when signing up/resetting password apart from the POST . Appreciate the help 🙂
miho
miho8mo ago
You probably have SKIP_EMAIL_VERIFICATION_IN_DEV=true this in your .env.server?
oli
oliOP8mo ago
yep that was the issue thanks
Want results from more Discord servers?
Add your server