This is the full developer documentation for LaunchFast # User Authentication with Credentials (Email and Password) > How can you authenticate users in web sites (or web apps) built with LaunchFast starter kits via Credentials (Email and Password)? > Browse the source code [here](https://github.com/LaunchFast-Boilerplates/launchfa.st-astro/blob/master/auth.config.ts). LaunchFa.st makes it easier for you to authenticate users with Credentials (Email and Password) with it’s built-in integration. To set up Credentials authentication in LaunchFast: 1. Complete the [launch checklist](/documentation/guides/launch/). 2. Redirect your users to `/signin` page. 3. and you’re done! # User Authentication > How can you authenticate users in web sites (or web apps) built with LaunchFast starter kits? LaunchFast comes with the following baked-in authentication methods [powered by Auth.js](https://authjs.dev/): * [Credentials (Email & Password)](https://authjs.dev/getting-started/authentication/credentials) * [Magic Links](https://authjs.dev/getting-started/authentication/email) * [20+ OAuth Providers](https://authjs.dev/getting-started/authentication/oauth) Following are the guides for each authentication method: * Authenticate users with [Credentials (Email and Password)](/documentation/authentication/credentials/) * Authenticate users with [Magic Links](/documentation/authentication/magic-links/) * Authenticate users with [20+ OAuth providers](/documentation/authentication/oauth/) # User Authentication with Magic Links > How can you authenticate users in web sites (or web apps) built with LaunchFast starter kits via Magic Links? > Browse the source code [here](https://github.com/LaunchFast-Boilerplates/launchfa.st-astro/blob/master/auth.config.ts). LaunchFa.st makes it easier for you to authenticate users with Magic Links with it’s built-in integration. To set up authentication with Magic Links in LaunchFast: 1. Complete the [launch checklist](/documentation/guides/launch/). 2. Redirect your users to `/signin` page. 3. and you’re done! # User Authentication with 20+ OAuth Providers > How can you authenticate users in web sites (or web apps) built with LaunchFast starter kits via 20+ OAuth Providers? > Browse the source code [here](https://github.com/LaunchFast-Boilerplates/launchfa.st-astro/blob/master/auth.config.ts). LaunchFa.st makes it easier for you to authenticate users with 20+ OAuth Providers with it’s built-in integration. To set up authentication with any OAuth Provider in LaunchFast: 1. Complete the [launch checklist](/documentation/guides/launch/). 2. Add (or update) the necessary environment variables per each OAuth guide in . 3. Redirect your users to `/signin` page. 4. and you’re done! # Using Cloud Firestore Database > How to use any Cloud Firestore Database in LaunchFast starter kits? > Browse the source code [here](https://github.com/LaunchFast-Boilerplates/launchfa.st-astro/blob/master/src/lib/db/index.ts). LaunchFa.st makes it easier for you to use any [Cloud Firestore](https://firebase.google.com/docs/firestore) as the database with it’s built-in integration. Here’s how you would set up Cloud Firestore to use it with LaunchFast: 1. Make sure to update the environment variable(s) of your application per the following instruction: * Astro * SvelteKit * Next.js 2. and you’re done! All the functionalities of the starter kit will now use Cloud Firestore as the database. # Using MongoDB Database > How to use any MongoDB Database in LaunchFast starter kits? > Browse the source code [here](https://github.com/LaunchFast-Boilerplates/launchfa.st-astro/blob/master/src/lib/db/mongodb.ts). LaunchFa.st makes it easier for you to use any [MongoDB](https://www.mongodb.com/) as the database with it’s built-in integration. Here’s how you would set up MongoDB to use it with LaunchFast: 1. Make sure to update the environment variable(s) of your application per the following instruction: * Astro * SvelteKit * Next.js 2. and you’re done! All the functionalities of the starter kit will now use MongoDB as the database. # Using any Postgres Database > How to use any Postgres Database in LaunchFast starter kits? > Browse the source code [here](https://github.com/LaunchFast-Boilerplates/launchfa.st-astro/blob/master/src/lib/db/index.ts). LaunchFa.st makes it easier for you to use any [Postgres](https://www.postgresql.org/) as the database with it’s built-in integration. Here’s how you would set up Postgres to use it with LaunchFast: 1. Make sure to update the environment variable(s) of your application per the following instruction: * Astro * SvelteKit * Next.js 2. and you’re done! All the functionalities of the starter kit will now use Postgres as the database. # Using any Redis NoSQL Database > How to use any Redis NoSQL Database in LaunchFast starter kits? > Browse the source code [here](https://github.com/LaunchFast-Boilerplates/launchfa.st-astro/blob/master/src/lib/db/index.ts). LaunchFa.st makes it easier for you to use any [Redis](https://github.com/redis/redis) as the database with it’s built-in integration. Here’s how you would set up Redis to use it with LaunchFast: 1. Make sure to update the environment variable(s) of your application per the following instruction: * Astro * SvelteKit * Next.js 2. and you’re done! All the functionalities of the starter kit will now use Redis as the database. # Using any SQLite Database > How to use any SQLite Database in LaunchFast starter kits? > Browse the source code [here](https://github.com/LaunchFast-Boilerplates/launchfa.st-astro/blob/master/src/lib/db/sqlite/index.ts). Info Services supported out of the box: **Cloudflare D1**, **SQLite Cloud** and **Turso**. LaunchFa.st makes it easier for you to use any [SQLite](https://sqlite.org/) as the database with it’s built-in integration. Here’s how you would set up SQLite to use it with LaunchFast: 1. Make sure to update the environment variable(s) of your application per the following instruction: * Astro * SvelteKit * Next.js 2. and you’re done! All the functionalities of the starter kit will now use SQLite as the database. # Deploy To AWS Amplify > How to deploy web sites and web apps built with LaunchFast starter kits to AWS Amplify? 1. Make sure your code is available in a private GitHub repository. 2. Follow the steps in [one of our blogs](https://www.launchfa.st/blog/deploy-nextjs-aws-amplify#deploy-to-aws-amplify) to set up the GitHub repository to auto-deploy updates to AWS Amplify. Note Do ensure that you copy all the environment variables in your local `.env` file to the Environment Variables section in Advanced Settings section in the flow. # Deploy To Cloudflare Workers > How to deploy web sites and web apps built with LaunchFast starter kits to Cloudflare Workers? 1. Deploy to [Cloudflare Workers](https://workers.cloudflare.com/) with the following: ```bash npm run build && npm run cloudflare:deploy ``` If you do not have an existing Cloudflare project, this command will help you set up one. 2. Create a copy of `wrangler.toml.example` as `wrangler.toml` via the following command: ```bash cp wrangler.toml.example wrangler.toml ``` 3. Next, set all the environment variables in `wrangler.toml` file from your local `.env` file. 4. Finally, deploy to Cloudflare Workers (again) with the following: ```bash npm run build && npm run cloudflare:deploy ``` 5. Now that’s set up, you can deploy in future iterations only by executing the command once. # Deploy To Fly.io > How to deploy web sites and web apps built with LaunchFast starter kits to Fly.io? 1. Deploy to [Fly](https://fly.io) with the following: ```bash fly launch && fly deploy ``` If you do not have an existing Fly project, this command will help you set up one. 2. Next, set all the environment variables from your local `.env` file to Fly infrastructure via the following command: ```bash fly secrets set VAR_NAME=VAR_VAL ``` 3. Finally, deploy to Fly (again) with the following: ```bash fly launch && fly deploy ``` 4. Now that’s set up, you can deploy in future iterations only by executing the command once. # Deployment > Where all can you deploy web sites and web apps built with LaunchFast starter kits? LaunchFast can be deployed literally anywhere. Every server that supports sending responses over **Express.js/Node.js** framework or on an **Edge Runtime** can be used to deploy LaunchFast starter kit. * [Deploy to AWS Amplify](/documentation/deployment/aws-amplify/) * [Deploy to Cloudflare Workers](/documentation/deployment/cloudflare/) * [Deploy to Fly.io](/documentation/deployment/fly/) * [Deploy to Netlify](/documentation/deployment/netlify/) * [Deploy to Vercel](/documentation/deployment/vercel/) # Deploy To Netlify > How to deploy web sites and web apps built with LaunchFast starter kits to Netlify? 1. Deploy to [Netlify](https://netlify.com) with the following: ```bash npm run build && netlify build && netlify deploy --prod ``` If you do not have an existing Netlify project, this command will help you set up one. 2. Next, set all the environment variables in your Netlify’s project `Settings` > `Environment Variables` from your local `.env` file. 3. Finally, deploy to Netlify (again) with the following: ```bash npm run build && netlify build && netlify deploy --prod ``` 4. Now that’s set up, you can deploy in future iterations only by executing the command once. # Deploy To Vercel > How to deploy web sites and web apps built with LaunchFast starter kits to Vercel? 1. Deploy to [Vercel](https://vercel.com) with the following: ```bash vercel deploy --prod ``` If you do not have an existing Vercel project, this command will help you set up one. 2. Next, set all the environment variables in your Vercel’s project `Settings` > `Environment Variables` from your local `.env` file. 3. Finally, deploy to Vercel (again) with the following: ```bash vercel deploy --prod ``` 4. Now that’s set up, you can deploy in future iterations only by executing the command once. # Sending Emails with AutoSend > How to use AutoSend to send emails with LaunchFast starter kits? > Browse the source code [here](https://github.com/LaunchFast-Boilerplates/launchfa.st-astro/blob/master/src/lib/utils/email.ts). LaunchFa.st makes it easier for you to send emails with [AutoSend](https://autosend.com) with it’s built-in integration. Here’s how you would set up AutoSend to use it with LaunchFast: 1. Create a [AutoSend](https://autosend.com) account. 2. Link your domain by completing the steps in their [domain guide](https://docs.autosend.com/domain). 3. Obtain the AutoSend API key from . 4. Make sure to update the environment variable(s) of your application per the following instruction: * Astro * SvelteKit * Next.js To send emails with AutoSend, use `sendEmail` utility inside your server-side code: * Astro src/pages/api/random.ts ```typescript import { sendEmail } from '@/lib/utils/email' import type { APIContext } from 'astro' export async function GET({ request }: APIContext) { // From a server-side API that is being fetched // Send an email using AutoSend // Read more on https://docs.autosend.com/quickstart/email-using-api await sendEmail({ text: context.text, subject: context.subject, from: 'Rishi Raj Jain ', to: typeof context.to === 'string' ? [context.to] : context.to, }, 'autosend') } export async function POST({ request }: APIContext) { // From a server-side API that is being POST-ed to // Send an email using AutoSend // Read more on https://docs.autosend.com/quickstart/email-using-api await sendEmail({ text: context.text, subject: context.subject, from: 'Rishi Raj Jain ', to: typeof context.to === 'string' ? [context.to] : context.to, }, 'autosend') } ``` # Sending Emails with Mailgun > How to use Mailgun to send emails with LaunchFast starter kits? > Browse the source code [here](https://github.com/LaunchFast-Boilerplates/launchfa.st-astro/blob/master/src/lib/utils/email.ts). LaunchFa.st makes it easier for you to send emails with [Mailgun](https://mailgun.com) with it’s built-in integration. Here’s how you would set up Mailgun to use it with LaunchFast: 1. Create a [Mailgun](https://mailgun.com) account. 2. Add and verify your domain(s) by completing the steps in their [domain guide](https://help.mailgun.com/hc/en-us/articles/32884702360603-Domain-Verification-Setup-Guide). 3. Obtain the Mailgun API key as per their [API Key Instructions](https://help.mailgun.com/hc/en-us/articles/203380100-Where-can-I-find-my-API-keys-and-SMTP-credentials). 4. Make sure to update the environment variable(s) of your application per the following instruction: * Astro * SvelteKit * Next.js To send emails with Mailgun, use `sendEmail` utility inside your server-side code: * Astro src/pages/api/random.ts ```typescript import { sendEmail } from '@/lib/utils/email' import type { APIContext } from 'astro' export async function GET({ request }: APIContext) { // From a server-side API that is being fetched // Send an email using Resend // Read more on https://resend.com/docs/api-reference/emails/send-email await sendEmail({ text: context.text, subject: context.subject, from: 'Rishi Raj Jain ', to: typeof context.to === 'string' ? [context.to] : context.to, }, 'mailgun') } export async function POST({ request }: APIContext) { // From a server-side API that is being POST-ed to // Send an email using Resend // Read more on https://resend.com/docs/api-reference/emails/send-email await sendEmail({ text: context.text, subject: context.subject, from: 'Rishi Raj Jain ', to: typeof context.to === 'string' ? [context.to] : context.to, }, 'mailgun') } ``` # Sending Emails with Postmark > How to use Postmark to send emails with LaunchFast starter kits? > Browse the source code [here](https://github.com/LaunchFast-Boilerplates/launchfa.st-astro/blob/master/src/lib/utils/email.ts). LaunchFa.st makes it easier for you to send emails with [Postmark](https://postmark.com) with it’s built-in integration. Here’s how you would set up Postmark to use it with LaunchFast: 1. Create a [Postmark](https://postmark.com) account. 2. Add your verified domain(s) and sender signatures by completing the steps in their [domain guide](https://postmarkapp.com/support/article/1002-getting-started-with-postmark#add). 3. Set up common steps for improving deliverability rates by completing the steps in their [authentication guide](https://postmarkapp.com/support/article/1002-getting-started-with-postmark#authenticating) 4. Obtain the Postmark API key from the [Setup Instructions](https://postmarkapp.com/support/article/1002-getting-started-with-postmark#changes). 5. Make sure to update the environment variable(s) of your application per the following instruction: * Astro * SvelteKit * Next.js To send emails with Postmark, use `sendEmail` utility inside your server-side code: * Astro src/pages/api/random.ts ```typescript import { sendEmail } from '@/lib/utils/email' import type { APIContext } from 'astro' export async function GET({ request }: APIContext) { // From a server-side API that is being fetched // Send an email using Resend // Read more on https://resend.com/docs/api-reference/emails/send-email await sendEmail({ text: context.text, subject: context.subject, from: 'Rishi Raj Jain ', to: typeof context.to === 'string' ? [context.to] : context.to, }, 'postmark') } export async function POST({ request }: APIContext) { // From a server-side API that is being POST-ed to // Send an email using Resend // Read more on https://resend.com/docs/api-reference/emails/send-email await sendEmail({ text: context.text, subject: context.subject, from: 'Rishi Raj Jain ', to: typeof context.to === 'string' ? [context.to] : context.to, }, 'postmark') } ``` # Sending Emails with Resend > How to use Resend to send emails with LaunchFast starter kits? > Browse the source code [here](https://github.com/LaunchFast-Boilerplates/launchfa.st-astro/blob/master/src/lib/utils/email.ts). LaunchFa.st makes it easier for you to send emails with [Resend](https://resend.com) with it’s built-in integration. Here’s how you would set up Resend to use it with LaunchFast: 1. Create a [Resend](https://resend.com/home) account. 2. Link your domain by completing the steps in their [domain guide](https://resend.com/docs/dashboard/domains/introduction). 3. Obtain the Resend API key from . 4. Make sure to update the environment variable(s) of your application per the following instruction: * Astro * SvelteKit * Next.js To send emails with Resend, use `sendEmail` utility inside your server-side code: * Astro src/pages/api/random.ts ```typescript import { sendEmail } from '@/lib/utils/email' import type { APIContext } from 'astro' export async function GET({ request }: APIContext) { // From a server-side API that is being fetched // Send an email using Resend // Read more on https://resend.com/docs/api-reference/emails/send-email await sendEmail({ text: context.text, subject: context.subject, from: 'Rishi Raj Jain ', to: typeof context.to === 'string' ? [context.to] : context.to, }, 'resend') } export async function POST({ request }: APIContext) { // From a server-side API that is being POST-ed to // Send an email using Resend // Read more on https://resend.com/docs/api-reference/emails/send-email await sendEmail({ text: context.text, subject: context.subject, from: 'Rishi Raj Jain ', to: typeof context.to === 'string' ? [context.to] : context.to, }, 'resend') } ``` # Sending Emails with Twilio SendGrid > How to use Twilio SendGrid to send emails with LaunchFast starter kits? > Browse the source code [here](https://github.com/LaunchFast-Boilerplates/launchfa.st-astro/blob/master/src/lib/utils/email.ts). LaunchFa.st makes it easier for you to send emails with [Twilio SendGrid](https://SendGrid.com) with it’s built-in integration. Here’s how you would set up Twilio SendGrid to use it with LaunchFast: 1. Create a [Twilio SendGrid](https://sendgrid.com) account. 2. Obtain the Twilio SendGrid API key from . 3. Make sure to update the environment variable(s) of your application per the following instruction: * Astro * SvelteKit * Next.js To send emails with Mailgun, use `sendEmail` utility inside your server-side code: * Astro src/pages/api/random.ts ```typescript import { sendEmail } from '@/lib/utils/email' import type { APIContext } from 'astro' export async function GET({ request }: APIContext) { // From a server-side API that is being fetched // Send an email using Resend // Read more on https://resend.com/docs/api-reference/emails/send-email await sendEmail({ text: context.text, subject: context.subject, from: 'Rishi Raj Jain ', to: typeof context.to === 'string' ? [context.to] : context.to, }, 'sendgrid') } export async function POST({ request }: APIContext) { // From a server-side API that is being POST-ed to // Send an email using Resend // Read more on https://resend.com/docs/api-reference/emails/send-email await sendEmail({ text: context.text, subject: context.subject, from: 'Rishi Raj Jain ', to: typeof context.to === 'string' ? [context.to] : context.to, }, 'sendgrid') } ``` # Introduction > Welcome to the LaunchFast documentation. This is the place to get started with the starter kit, learn about the structure, its features and how to use it. Welcome to the [LaunchFast](https://www.launchfa.st) documentation. This is the place to get started with the starter kit, learn about the structure, its features and how to use it. ### Features Before we dive into the technical details of LaunchFast, let’s go over all the features that it provides. If you want to try the functionality of LaunchFast, you can check out the [demo](https://launchfast-astro.launchfast.workers.dev). #### Static Pages * [Landing Page](https://launchfast-astro.launchfast.workers.dev) * [Careers](https://launchfast-astro.launchfast.workers.dev/careers) * [Terms](https://launchfast-astro.launchfast.workers.dev/terms) * [Privacy](https://launchfast-astro.launchfast.workers.dev/privacy) #### Dynamic Pages * [Sign in](https://launchfast-astro.launchfast.workers.dev/signin) and [Sign up](https://launchfast-astro.launchfast.workers.dev/signup) pages * [Forgot password](https://launchfast-astro.launchfast.workers.dev/forgot-password) and password reset flow. * [Dashboard](https://launchfast-astro.launchfast.workers.dev/dashboard) page to update your profile name, avatar and delete account. * [Protected](https://launchfast-astro.launchfast.workers.dev/protected) page to only allow authorized users. * [Protected and Paid](https://launchfast-astro.launchfast.workers.dev/protected_and_paid) page to only allow authorized and paid users. * [Partially Protected and Paid](https://launchfast-astro.launchfast.workers.dev/partial_protected_and_paid) page to selectively display content for authorized and/or paid users. #### Blog Pages Content is managed with Markdown (and MDX) in the codebase. * [1x Blog Home](https://launchfast-astro.launchfast.workers.dev/blog/) * [2x Blog Posts](https://launchfast-astro.launchfast.workers.dev/blog/todo-1/) #### Documentation Content is managed with Markdown (and MDX) in the codebase. * [Documentation pages](https://launchfast-nextjs.launchfast.workers.dev/docs) * Automatic table of contents generation # Setup > This guide will walk you through setting up LaunchFast. We will go through the process of cloning the project, installing dependencies, setting up your database and running the local development server. This guide will walk you through setting up LaunchFast. We will go through the process of cloning the project, installing dependencies, setting up your database and running the local development server. ## Prerequisites Before you can get started, you will need to have the following installed on your machine. * [Node.js](https://nodejs.org/en/) (v18 or higher) * [Git](https://git-scm.com/) * [VSCode](https://code.visualstudio.com/) (recommended, or any other code editor) ## Project setup 1. **Create a new project with LaunchFast** Clone the LaunchFast repository: * Astro ```bash git clone https://github.com/LaunchFast-Boilerplates/launchfa.st-astro ``` * SvelteKit ```bash git clone https://github.com/LaunchFast-Boilerplates/launchfa.st-sveltekit ``` * Next.js ```bash git clone https://github.com/LaunchFast-Boilerplates/launchfa.st-nextjs ``` Next, install all the dependencies. Make sure you have installed [npm](https://nodejs.org/en/download/current) before running the following command: ```bash npm install ``` Next, set up the environment variables. To do this, copy the `.env.example` file in the root of your project and rename it to `.env` with the following: ```bash cp .env.example .env ``` Finally, set the LaunchFast repository as the upstream origin for your project, so you can pull in updates in the future via the following commands: * Astro ```bash rm -rf .git git init # Your writable remote git remote add origin git@github.com:/.git # LaunchFast template for pulling updates only git remote add upstream https://github.com/LaunchFast-Boilerplates/launchfa.st-astro git add -A git commit -m "Initial commit" # First push: establishes branch tracking git push -u origin main # use 'master' if that’s your default ``` * SvelteKit ```bash rm -rf .git git init # Your writable remote git remote add origin git@github.com:/.git # LaunchFast template for pulling updates only git remote add upstream https://github.com/LaunchFast-Boilerplates/launchfa.st-sveltekit git add -A git commit -m "Initial commit" # First push: establishes branch tracking git push -u origin main # use 'master' if that’s your default ``` * Next.js ```bash rm -rf .git git init # Your writable remote git remote add origin git@github.com:/.git # LaunchFast template for pulling updates only git remote add upstream https://github.com/LaunchFast-Boilerplates/launchfa.st-nextjs git add -A git commit -m "Initial commit" # First push: establishes branch tracking git push -u origin main # use 'master' if that’s your default ``` 2. **Set up your database provider** Open the `.env` file and update the `DATABASE_TYPE` and the relevant database provider environment variable(s) per the following instructions: * Astro * SvelteKit * Next.js Finally, initiate the relevant schema on the database provider if only you are using Postgres or SQLite via the following command: ```bash npm run db:setup ``` 3. **Set up your storage provider** Set up the storage environment variables to use the ability to upload and serve files (like images, videos, etc.) over pre-signed URLs. LaunchFast supports all S3-compatible storage providers (Amazon S3, Cloudflare R2, and Supabase Storage) and Firebase Storage. Open the `.env` file and update the `STORAGE_PROVIDER` and the relevant storage provider environment variable(s) per the following instructions: * Astro * SvelteKit * Next.js 4. **Set up authentication** Open the `.env` file and update the authentication environment variables per the following instructions: * Astro * SvelteKit * Next.js 5. **Set up your email provider** Open the `.env` file and update the environment variables for the email provider that you intend to use per the following instructions: * Astro * SvelteKit * Next.js 6. **Start your development server** Now your app should be ready to go. To start the local development server, navigate into your project root folder and run the following command. ```bash npm run dev ``` Open [localhost:3000](http://localhost:3000) in your browser to see the your app. # Using Amazon S3 as Object Storage > How to use Amazon S3 as Object Storage with LaunchFast starter kits? > Browse the source code [here](https://github.com/LaunchFast-Boilerplates/launchfa.st-astro/blob/master/src/lib/storage/s3.ts). LaunchFa.st provides you with the APIs to interact with [Amazon S3](https://aws.amazon.com/s3/), built on top of Web Standards. Here’s how you would set up Amazon S3 to use it with LaunchFast: 1. Follow the instructions in [one of our blogs](https://www.launchfa.st/blog/aws-s3-storage-cloudflare-workers#create-access-keys-for-iam-users) to set up Amazon S3. 2. Update the environment variables via the following instructions: * Astro * SvelteKit * Next.js ## Using the `` Component To easily implemented file uploads in your application, import the `Upload` component in your application: * Astro page.astro ```astro --- import Upload from '@/components/Upload.astro' --- ``` * SvelteKit +page.svelte ```svelte ``` * Next.js page.tsx ```typescript 'use client' import Upload from '@/components/Upload' export default async function () { return } ``` ## `GET` files from Amazon S3 To fetch files from Amazon S3, pass the file’s slug as the `file` searchParam in `/api/storage` route as following: * Astro page.astro ```diff ``` * SvelteKit +page.svelte ```diff ``` * Next.js page.tsx ```diff 'use client' useEffect(() => { +const getFile = new URL('/api/storage', window.location.origin) + getFile.searchParams.set('file', fileURL) +fetch(getFile.toString()) + .then((res) => res.json()) + .then((res) => { +const { filePublicURL } = res + console.log(filePublicURL) + }) }, []) ``` # Using Cloudflare R2 as Object Storage > How to use Cloudflare R2 as Object Storage with LaunchFast starter kits? > Browse the source code [here](https://github.com/LaunchFast-Boilerplates/launchfa.st-astro/blob/master/src/lib/storage/s3.ts). LaunchFa.st provides you with the APIs to interact with [Cloudflare R2](https://developers.cloudflare.com/r2/), built on top of Web Standards. Here’s how you would set up Cloudflare R2 to use it with LaunchFast: 1. Follow the instructions in [one of our blogs](https://www.launchfa.st/blog/cloudflare-r2-storage-cloudflare-workers#setting-up-cloudflare-r2) to set up Cloudflare R2. 2. Update the environment variables via the following instructions: * Astro * SvelteKit * Next.js ## Using the `` Component To easily implemented file uploads in your application, import the `Upload` component in your application: * Astro page.astro ```astro --- import Upload from '@/components/Upload.astro' --- ``` * SvelteKit +page.svelte ```svelte ``` * Next.js page.tsx ```typescript 'use client' import Upload from '@/components/Upload' export default async function () { return } ``` ## `GET` files from Cloudflare R2 To fetch files from Cloudflare R2, pass the file’s slug as the `file` searchParam in `/api/storage` route as following: * Astro page.astro ```diff ``` * SvelteKit +page.svelte ```diff ``` * Next.js page.tsx ```diff 'use client' useEffect(() => { +const getFile = new URL('/api/storage', window.location.origin) + getFile.searchParams.set('file', fileURL) +fetch(getFile.toString()) + .then((res) => res.json()) + .then((res) => { +const { filePublicURL } = res + console.log(filePublicURL) + }) }, []) ``` # Using Firebase Storage as Object Storage > How to use Firebase Storage as Object Storage with LaunchFast starter kits? > Browse the source code [here](https://github.com/LaunchFast-Boilerplates/launchfa.st-astro/blob/master/src/lib/storage/firebase.ts). LaunchFa.st provides you with the APIs to interact with [Firebase Storage](https://firebase.google.com/docs/storage), built on top of Web Standards. Here’s how you would set up Firebase Storage to use it with LaunchFast: 1. In the Firebase console, open **Settings** > [Service Accounts](https://console.firebase.google.com/project/_/settings/serviceaccounts/adminsdk). 2. Click **Generate New Private Key**, then confirm by clicking **Generate Key**. 3. Securely store the JSON file containing the key. 4. In the **Firebase Console**, Go to **Storage**, and save the value starting with **gs\://…**. 5. Update the environment variables (with the key **storageBucket** and rest of the values obtained) via the following instructions: * Astro * SvelteKit * Next.js ## Using the `` Component To easily implemented file uploads in your application, import the `Upload` component in your application: * Astro page.astro ```astro --- import Upload from '@/components/Upload.astro' --- ``` * SvelteKit +page.svelte ```svelte ``` * Next.js page.tsx ```typescript 'use client' import Upload from '@/components/Upload' export default async function () { return } ``` ## `GET` files from Firebase Storage To fetch files from Firebase Storage, pass the file’s slug as the `file` searchParam in `/api/storage` route as following: * Astro page.astro ```diff ``` * SvelteKit +page.svelte ```diff ``` * Next.js page.tsx ```diff 'use client' useEffect(() => { +const getFile = new URL('/api/storage', window.location.origin) + getFile.searchParams.set('file', fileURL) +fetch(getFile.toString()) + .then((res) => res.json()) + .then((res) => { +const { filePublicURL } = res + console.log(filePublicURL) + }) }, []) ``` # Using Supabase Storage as Object Storage > How to use Supabase Storage as Object Storage with LaunchFast starter kits? > Browse the source code [here](https://github.com/LaunchFast-Boilerplates/launchfa.st-astro/blob/master/src/lib/storage/supabase.ts). LaunchFa.st provides you with the APIs to interact with [Supabase Storage](https://supabase.com/docs/guides/storage), built on top of Web Standards. Here’s how you would set up Supabase Storage to use it with LaunchFast: 1. In the Supabase console, open the **Storage** tab, and grab the bucket name. 2. Update the environment variables via the following instructions: * Astro * SvelteKit * Next.js ## Using the `` Component To easily implemented file uploads in your application, import the `Upload` component in your application: * Astro page.astro ```astro --- import Upload from '@/components/Upload.astro' --- ``` * SvelteKit +page.svelte ```svelte ``` * Next.js page.tsx ```typescript 'use client' import Upload from '@/components/Upload' export default async function () { return } ``` ## `GET` files from Supabase Storage To fetch files from Supabase Storage, pass the file’s slug as the `file` searchParam in `/api/storage` route as following: * Astro page.astro ```diff ``` * SvelteKit +page.svelte ```diff ``` * Next.js page.tsx ```diff 'use client' useEffect(() => { +const getFile = new URL('/api/storage', window.location.origin) + getFile.searchParams.set('file', fileURL) +fetch(getFile.toString()) + .then((res) => res.json()) + .then((res) => { +const { filePublicURL } = res + console.log(filePublicURL) + }) }, []) ``` # API Call > How to create APIs with LaunchFa.st? * Astro In Launchfa.st, to make it more easier for the developers, all the APIs are right now inside the `src/pages/api` directory. * SvelteKit In Launchfa.st, to make it more easier for the developers, all the APIs are right now inside the `src/routes/api` directory. - Astro Any file inside the `src/pages` ending with `.js`/`.ts` can be an API enpoint. The good thing with APIs with Launchfa.st is that you get to use the Web APIs on top of Astro. This ensures that the code can be reused in any number of projects irresepctive of their stack. Find more on the API Routes in Astro at . - SvelteKit Any file inside the `src/routes` ending with `+server.ts` can be an API enpoint. Find more on the API Routes in SvelteKit at . ## Protected API Routes To illustrate, to create an API route that returns whether a user is logged in or not, follow the steps in the LaunchFa.st template: * Astro 1. Create a file: `src/pages/api/test.js`. 2. Add the content below to the `test.js`: src/pages/api/test.js ```typescript // Handle GET Request to /api/test export async function GET({ request }) { // Get the user session from the 'request' const session = getSession(request) if (!session) { return new Response('unauthenticated', { status: 403, }) } return new Response('authenticated', { status: 200, }) } // Handle POST Request to /api/test export async function POST({ request }) { // Parse the incoming form data from the 'request' const context = await request.formData() // Get the user session from the 'request' const session = getSession(request) if (!session) { return new Response('unauthenticated', { status: 403, }) } return new Response('authenticated', { status: 200, }) } ``` * SvelteKit 1. Create a file: `src/route/api/test/+server.ts`. 2. Add the content below to the `+server.ts`: ```typescript import { json, error } from '@sveltejs/kit' import type { RequestEvent } from './$types' import { getSession } from '@/lib/utils/auth' // Handle GET Request to /api/test export async function GET(event: RequestEvent) { // Get the user session from the 'request' const user = getSession(event.request) if (!user) { throw error(403) } // Extract the 'file' parameter from the request URL and do something const url = new URL(event.request.url) const file = url.searchParams.get('file') } // Handle POST Request to /api/test export async function POST(event: RequestEvent) { // Get the user session from the 'request' const user = getSession(event.request) if (!user) { throw error(403) } if (user.email) { const data = await event.request.formData() // Get the 'file' field from the form data const file = data.get('file') } } ``` # One-Time Payment > How to accept one time payments from your customers via LaunchFa.st? Capturing one time payments is heck easy with LaunchFa.st. Post payment processes such as updating users in a database, or sending them emails becomes super easy with APIs shipped with LaunchFa.st. ## Accept Payments via Stripe To start accepting payments via Stripe and creating checkout sessions: * Update the `STRIPE_SECRET_KEY` in the `.env` file * Import the Button-Checkout component to start accepting payments. For example on the homepage: - Astro ```astro --- import ButtonCheckout from '@/components/Button-Checkout.astro' --- ``` - SvelteKit ```svelte ``` Click the pay button to make a payment with the credit card number `4242 4242 4242 4242`. The Stripe webhook will be fired and the user will be created in the database. You can add your own logic in `src/pages/api/stripe/webhook.js` like sending an email using the resend helper, turning on a boolean in the database for specific access, etc. ## Accept Payments via Lemon Squeezy Once you’re done setting up your Lemon Squeezy account and adding a product(s), import the Button-LS-Checkout component to start accepting payments. For example on the homepage: * Astro ```astro --- import ButtonLSCheckout from '@/components/Button-LS-Checkout.astro' --- ``` * SvelteKit ```svelte ``` Click the pay button to make a payment with the credit card number `4242 4242 4242 4242`. The Lemon Squeezy webhook will be fired and the user will be created in the database. You can add your own logic in `src/pages/api/lemonsqueezy/webhook.js` like sending an email using the resend helper, turning on a boolean in the database for specific access, etc. # Private Page(s) > How to create pages that are only visible to logged in users with LaunchFa.st? Once [user is authenticated](/documentation/authentication/user-authentication), you can build private routes like a user dashboard, account, etc. Tip If you want to make protected API calls, follow [this tutorial](/documentation/tutorials/api-call#protected-api-routes). * Astro Here’s an example of a simple user dashboard showing private user data in the page: ```astro --- import { getSession } from '@/lib/auth' const session = getSession(Astro.request) if (session) { // If need to do something on the server side say fetch data for the user // This is the right block to do it } else { // In case the user is not logged in // Redirect them for example return Astro.redirect('/') } --- The user that's logged name is {session.user.name} ``` * SvelteKit Here’s a simple example of protecting a route in SvelteKit. Create a `+page.server.ts` in/along the directory that you want to protect: src/routes/something/+page.server.ts ```typescript import { error } from '@sveltejs/kit' import type { RequestEvent } from './$types' import { getSession } from '@/lib/utils/auth' export async function load(event: RequestEvent) { const session = getSession(event.request) if (!session) { // In case the user is not logged in // Send 403 throw error(403, { message: 'Unauthorized' }) } // If need to do something on the server side say fetch data for the user // This is the right block to do it return session } ``` # Static Page > How to create static pages in LaunchFa.st? LaunchFa.st comes with many components to help you build SEO-optimized pages (like a landing page) in no time. The `src/components` directory contains all you need (hero, pricing, FAQ, analytics, prefetching, etc.). Here’s the list of all the components & themes. The `src/components/SEO.astro` file helps you set SEO tags to better rank on Google. Make sure to customize SEO tags. A simple landing page can done like this: ```astro --- // Use this to pre-render on per page basis export const prerender = true import SEO from '@/components/SEO.astro' import Header from '@/components/Header.astro' import Footer from '@/components/Footer.astro' import Divider from '@/components/Divider.astro' import GoogleFonts from '@/components/Google-Fonts.astro' ---

Privacy Policy

Your privacy is important to us. It is LaunchFa.st's policy to respect your privacy regarding any information we may collect from you across our website, and other sites we own and operate. This policy is effective as of {new Date().toString()}.