This is a Blitz.js app.
Run your app in the development mode.
blitz dev
Open http://localhost:3000 with your browser to see the result.
Ensure the .env.local file has required environment variables:
DATABASE_URL=postgresql://<YOUR_DB_USERNAME>@localhost:5432/blitz-saas
Ensure the .env.test.local file has required environment variables:
DATABASE_URL=postgresql://<YOUR_DB_USERNAME>@localhost:5432/blitz-saas_test
Runs your tests using Jest.
yarn test
Blitz comes with a test setup using Jest and react-testing-library.
Blitz comes with a powerful CLI that is designed to make development easy and fast. You can install it with npm i -g blitz
blitz [COMMAND]
dev Start a development server
build Create a production build
start Start a production server
prisma Run prisma commands
generate Generate new files for your Blitz project
console Run the Blitz console REPL
help display help for blitz
test Run project tests
You can read more about it on the CLI Overview documentation.
Here is the starting structure of your app.
blitz-saas
├── app/
│ ├── api/
│ ├── auth/
│ │ ├── components/
│ │ │ ├── LoginForm.tsx
│ │ │ └── SignupForm.tsx
│ │ ├── mutations/
│ │ │ ├── changePassword.ts
│ │ │ ├── forgotPassword.test.ts
│ │ │ ├── forgotPassword.ts
│ │ │ ├── login.ts
│ │ │ ├── logout.ts
│ │ │ ├── resetPassword.test.ts
│ │ │ ├── resetPassword.ts
│ │ │ └── signup.ts
│ │ ├── pages/
│ │ │ ├── forgot-password.tsx
│ │ │ ├── login.tsx
│ │ │ ├── reset-password.tsx
│ │ │ └── signup.tsx
│ │ └── validations.ts
│ ├── core/
│ │ ├── components/
│ │ │ ├── Form.tsx
│ │ │ └── LabeledTextField.tsx
│ │ ├── hooks/
│ │ │ └── useCurrentUser.ts
│ │ └── layouts/
│ │ └── Layout.tsx
│ ├── pages/
│ │ ├── 404.tsx
│ │ ├── _app.tsx
│ │ ├── _document.tsx
│ │ ├── index.test.tsx
│ │ └── index.tsx
│ └── users/
│ └── queries/
│ └── getCurrentUser.ts
├── db/
│ ├── index.ts
│ ├── schema.prisma
│ └── seeds.ts
├── integrations/
├── mailers/
│ └── forgotPasswordMailer.ts
├── public/
│ ├── favicon.ico*
│ └── logo.png
├── test/
│ ├── setup.ts
│ └── utils.tsx
├── README.md
├── babel.config.js
├── blitz.config.js
├── jest.config.js
├── package.json
├── tsconfig.json
├── types.d.ts
├── types.ts
└── yarn.lock
These files are:
-
The
app/folder is a container for most of your project. This is where you’ll put any pages or API routes. -
db/is where your database configuration goes. If you’re writing models or checking migrations, this is where to go. -
public/is a folder where you will put any static assets. If you have images, files, or videos which you want to use in your app, this is where to put them. -
integrations/is a folder to put all third-party integrations like with Stripe, Sentry, etc. -
test/is a folder where you can put test utilities and integration tests. -
package.jsoncontains information about your dependencies and devDependencies. If you’re using a tool likenpmoryarn, you won’t have to worry about this much. -
tsconfig.jsonis our recommended setup for TypeScript. -
.babelrc.js,.env, etc. ("dotfiles") are configuration files for various bits of JavaScript tooling. -
blitz.config.jsis for advanced custom configuration of Blitz. It extendsnext.config.js. -
jest.config.jscontains config for Jest tests. You can customize it if needed.
You can read more about it in the File Structure section of the documentation.
Read the Blitz.js Documentation to learn more.
The Blitz community is warm, safe, diverse, inclusive, and fun! Feel free to reach out to us in any of our communication channels.