Currently, I am working on a Sign Up page using SolidJs and NestJS with Prisma. However, when I try to submit the form, I encounter an error that says POST 404 (Not Found) and this error is also returned by axios.
Additionally, my setup includes postgresql as the database and all configurations like schemas, migrations, etc. seem to be set up correctly.
Below you can find snippets of code from different parts of my project:
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
model User {
id Int @id @default(autoincrement())
email String @unique
username String?
password String?
}
Prisma.service.ts
import { PrismaClient, User } from '@prisma/client';
const prisma = new PrismaClient();
export class PrismaService {
private prisma: PrismaClient;
constructor() {
this.prisma = prisma;
}
async createUser(data: Omit<User, 'id'>): Promise<User> {
return this.prisma.user.create({
data,
});
}
}
user.controller.ts
import { Body, Controller, Post } from '@nestjs/common';
import { PrismaService } from '../prisma.service';
@Controller('user')
export class UserController {
constructor(private readonly prismaService: PrismaService) {}
@Post('/register')
async register(@Body() data: { username:string, email: string, password: string }) {
const { username, email, password } = data;
const newUser = await this.prismaService.createUser({ username, email, password });
return { message: 'User registered successfully', newUser };
}
}
RegisterComponent.jsx
import { createSignal } from 'solid-js';
import axios from "axios";
const [username, setUsername] = createSignal('');
const [email, setEmail] = createSignal('');
const [password, setPassword] = createSignal('');
const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await axios.post('/api/user/register', { username, email, password });
// Handle the response, e.g., show success message or handle errors
console.log(response.data);
} catch (error) {
// Handle errors
console.error(error);
}
};
function RegisterComponent(){
return(
<section class="bg-center bg-no-repeat bg-[url('https://media.thegospelcoalition.org/wp-content/uploads/2023/04/04185025/build-theological-library-1920x1080.jpg')] bg-gray-700 bg-blend-multiply">
<div class="px-4 mx-auto max-w-screen-xl text-center py-24 lg:py-56">
<div class="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0 sm:space-x-4">
<div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
<div class="sm:mx-auto sm:w-full sm:max-w-sm">
... (remaining code continues here)