lofty crypt
So, I have added the node configuration in my Astro project and changed the output from server to hybrid after the change the astro config file look like this
import { defineConfig } from "astro/config"
import mdx from "@astrojs/mdx"
import sitemap from "@astrojs/sitemap"
import react from "@astrojs/react"
import tailwind from "@astrojs/tailwind"
import NetlifyCMS from "astro-netlify-cms"
import node from "@astrojs/node"
import { config } from "./src/netlify-cms"
// https://astro.build/config
export default defineConfig({
site: "https://Buyonegram.com",
integrations: [
mdx(),
sitemap(),
react(),
tailwind(),
NetlifyCMS({
config,
}),
],
experimental: {
assets: true,
},
output: "hybrid",
adapter: node({
mode: "standalone",
}),
})
now I'm running an Api in a component of main page here is the code of main-page
---
import ContactForm from "../components/contact-form"
import MainLayout from "../layouts/MainLayout.astro"
---
<MainLayout>
<ContactForm />
</MainLayout>
here is the code of ContactForm
import type { FormEvent } from "react"
export const prerender = false
function Form() {
async function onSubmit(e: FormEvent<HTMLFormElement>) {
e.preventDefault()
const response = await fetch("https://jsonplaceholder.typicode.com/todos")
const data = await response.json()
if (data) console.log(data)
}
return (
<form onSubmit={onSubmit}>
<input type="text" id="name" name="name" required />
<button type="submit">submit</button>
</form>
)
}
const ContactForm = () => {
return (
<div>
<Form />
</div>
)
}
export default ContactForm
atomic comet