Getting Started with Cloudstarter
Cloudstarter is a boilerplate that helps you get up and running with a Next.js project on Cloudflare.
Prerequisites
- Node.js (opens in a new tab) v20 or later
- PNPM (opens in a new tab) v7 or later
- Cloudflare Account (opens in a new tab)
- (Recommended for Windows Users) WSL 2 (opens in a new tab)
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: