Getting Started

Getting Started with Cloudstarter

Cloudstarter is a boilerplate that helps you get up and running with a Next.js project on Cloudflare.

Prerequisites

Getting the first project up and running

The goal of Cloudstarter was to get people up and running with a Next.js project on Cloudflare as quickly as possible.

Usually, setting up a project like this takes ALOT of precious time and effort on both the development and deployment side. Without pulling any punches, the Cloudflare documentation is not the most user-friendly and can be quite a mess to navigate.

That's why we created the Cloudstarter dashboard, a place where you can create, manage and deploy your projects to Cloudflare without leaving your tab. Let us handle the boring stuff so you can focus on what you do best: building your startup.

Once you have purchased Cloudstarter, you will have access to the Cloudstarter dashboard. Since the dashboard is self-guiding, we will not go into much details about it here. Instead, we will focus on the intricacies of the Cloudstarter code and how you can get the most out of it and the Cloudflare platform.

Setting up the project

Once you have deployed your project via the dashboard, you will be able to clone the project to your local machine. The project will be a Next.js project with a few extra files and configurations to make it work with Cloudflare.

To get started, clone the project to your local machine and navigate to the project directory.

git clone username/project-name my-project
cd my-project

Next, install the project dependencies using PNPM (or NPM if you prefer).

pnpm install

Now run the following to generate the migration files for the project.

pnpm db:generate

This will generate the migration files in the db/migrations directory. You can now run the migrations to create the database tables for the local development environment.

pnpm db:migrate:local

You can also push the changes to the preview and production environments by running the following commands.

pnpm db:migrate:preview
pnpm db:migrate:production

Once the dependencies are installed, you can start the development server by running:

pnpm dev

This will start the development server on http://localhost:3000. You can now open your browser and navigate to this URL to see your project running.

File Structure

The Cloudstarter project has a few extra files and directories that you might not be familiar with. Here is a brief overview of the project structure:

    • .dev.vars
    • tailwind.config.js --> tailwind config
    • config.js --> projects config file
    • components.js --> shadcn config file
    • wrangler.toml --> cf pages config file
      • Environment Variables