Quirrel.dev Save
Quirrel Landing Page & Console
This is a Blitz.js app.
name
Getting Started
Run your app in the development mode.
blitz dev
Open http://localhost:3000 with your browser to see the result.
Environment Variables
Ensure the .env.local file has required environment variables:
DATABASE_URL=postgresql://<YOUR_DB_USERNAME>@localhost:5432/console
Ensure the .env.test.local file has required environment variables:
DATABASE_URL=postgresql://<YOUR_DB_USERNAME>@localhost:5432/console_test
Tests
Runs your tests using Jest.
blitz test
or
yarn test
Blitz comes with a test setup using Jest and react-testing-library.
Commands
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]
build Create a production build
console Run the Blitz console REPL
db Run database commands
generate Generate new files for your Blitz project
help display help for blitz
start Start a development server
test Run project tests
You can read more about it on the CLI Overview documentation.
What's included?
Here is the structure of your app.
console
├── app
│ |── auth
│ │ ├── components
│ │ │ └── LoginForm.tsx
│ │ ├── mutations
│ │ │ ├── login.ts
│ │ │ ├── logout.ts
│ │ │ └── signup.ts
│ │ └── pages
│ │ ├── login.tsx
│ │ └── signup.tsx
│ ├── auth-utils.ts
│ ├── validations.ts
│ ├── components
│ │ ├── Form.tsx
│ │ └── LabeledTextField.tsx
│ ├── hooks
│ │ └── useCurrentUser.ts
│ ├── layouts
│ │ └── Layout.tsx
│ │── pages
│ │ ├── _app.tsx
│ │ ├── _document.tsx
│ │ ├── 404.tsx
│ │ ├── index.tsx
│ │ └── index.test.tsx
│ └── users
│ │ └── queries
│ │ └── getCurrentUser.ts
├── db
│ ├── migrations
│ ├── index.ts
│ └── schema.prisma
├── integrations
├── node_modules
├── public
│ ├── favicon.ico
│ └── logo.png
├── test
│ ├── __mocks__
│ │ └── fileMock.js
│ ├── setup.ts
│ └── utils.tsx
├── utils
├── .env
├── .eslintrc.js
├── .gitignore
├── .npmrc
├── .prettierignore
├── babel.config.js
├── blitz.config.js
├── jest.config.js
├── package.json
├── README.md
├── tsconfig.json
└── yarn.lock
These files are:
-
The
app/directory 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. -
node_modules/is where your “dependencies” are stored. This directory is updated by your package manager, so you don’t have to worry too much about it. -
public/is a directory 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. -
test/is a directory where you can put your unit and integration tests. -
utils/is a good place to put any shared utility files which you might use across different sections of your app. -
.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. -
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.
You can read more about it in the File Structure section of the documentation.
Learn more
Read the Blitz.js Documentation to learn more.
The Blitz.js Manifesto
Read the Blitz Manifesto to learn the Blitz foundational principles.
Blitz is built on Next.js. For more info on this see Why use Blitz instead of Next.js
Get in touch
The Blitz community is warm, safe, diverse, inclusive, and fun! Feel free to reach out to us in any of our communication channels.
Contributors ✨
Thanks goes to these wonderful people (emoji key):
 0xflotus 🖋 |
 Talor Anderson 🐛 |
This project follows the all-contributors specification. Contributions of any kind welcome!
Open Source Agenda Badge
