This is a Blitz.js app.
First you should install postgres on your computer. For MacOS an easy method is to use Postgres.app. If you have an M1 chip, the lastest version has support for it without Rossetta. As documented in their page, you can add postgresql tools to your path using:
sudo mkdir -p /etc/paths.d &&
echo /Applications/Postgres.app/Contents/Versions/latest/bin | sudo tee /etc/paths.d/postgresapp
After that you can create a DB using this commands on the terminal:
createdb projectlab
createdb projectlab_test
For Windows you can install postgres from here and you can follow this easy setup (it also works for MacOS)
Then open the SQL Shell and write this commands for creating a DB:
CREATE DATABASE projectlab;
CREATE DATABASE projectlab_test;
- In root, create
.env.local
file with the following:
DATABASE_URL=postgresql://[username]@localhost:5432/projectlab
AUTH0_CLIENT_ID=
AUTH0_DOMAIN=
AUTH0_CLIENT_SECRET=
## Optional, for WizelineOS sync-* commands
WOS_AUTH_API_URL=
WOS_AUTH_API_AUDIENCE=
WOS_AUTH_API_CLIENT_ID=
WOS_AUTH_API_CLIENT_SECRET=
WOS_API_URL=
- In root, create
.env.test.local
file with the following:
DATABASE_URL=postgresql://[username]@localhost:5432/projectlab_test
If you are using Windows, you should use this format in both files for the DATABASE_URL:
DATABASE_URL=postgresql://[username]:[password]@localhost:5432/[database]?schema=public
-
Ask in
#team-projectlab
channel on Slack for the environment values for.env.local
and.env.test.local
. -
Edit
db/seeds.ts
file and add your user at the very bottom, make sure to replace with your data:
await db.profiles.upsert({
where: { email: "[YOUR_USERNAME]@wizeline.com" },
update: {},
create: {
email: "[YOUR_USERNAME]@wizeline.com",
firstName: "[YOUR_FIRNAME]",
lastName: "[YOUR_LASTNAME]",
department: "[YOUR_DEPARTMENT]",
},
})
- (Only dev environment) Set the project's node version with NVM. If you don't have NVM installed read the documentation:
nvm use
- Install dependencies:
yarn install
- Create or reset the database schema:
npx blitz prisma migrate reset
- Sync profiles and skills from Wizeline OS, this is optional and it takes a couple of minutes, the seeding contains sample data that can be enough to run locally:
yarn sync-all-from-wos
- Populate with test data:
npx blitz db seed
- Run blitz:
npx blitz dev
Finally, open http://localhost:3000 in a browser to see the result.
Runs your tests using Jest.
The used database will be the defined in .env.test.local
otherwise .env
will be used.
yarn test
Blitz comes with a test setup using Jest and react-testing-library.
BlitzJS is updated constantly so in order to get the latest features we need to mantain the package in its LTS
version. These are the steps to upgarde BlitzJS in the project:
- Update the global BlitzJS package through yarn:
yarn global add blitz
-
Navigate to the parent directory of the project, for example if the project is located at
~/dev/projects/project-lab
you have to navigate to~/dev/projects
. -
Once you are located in the parent directory, run the following command:
blitz new project-lab
-
A prompt will be launched with a series of options, you should skip the generation of the following files:
- Database generation
- package.json
- Authentication
- README.md
-
Finally, follow the Getting started instructions from step 5 to make sure everything is working.
Admin users are allowed to impersonate other other in the App.
- The User must be an admin user.
- The User you want to impersonate must exist in the
User
table.
- Go to the
/impersonate
path to access the impersonate page. There is no button for this path so you must type it manually. - Type the user email you want to impersonate and click on 'Switch to User'.
- Click on 'GO HOME' and that's it! You are now impersonating this User.
To Stop impersonating, go to the /impersonate
path and click on 'STOP IMPERSONATING', you will stop the impersonating, and it's done!
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
export Export your Blitz app as a static application
prisma Run prisma commands
generate Generate new files for your Blitz project
console Run the Blitz console REPL
install Install a recipe
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.
proposalHunt
├── 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.json
contains information about your dependencies and devDependencies. If you’re using a tool likenpm
oryarn
, you won’t have to worry about this much. -
tsconfig.json
is our recommended setup for TypeScript. -
.babelrc.js
,.env
, etc. ("dotfiles") are configuration files for various bits of JavaScript tooling. -
blitz.config.js
is for advanced custom configuration of Blitz. It extendsnext.config.js
. -
jest.config.js
contains config for Jest tests. You can customize it if needed.
You can read more about it in the File Structure section of the documentation.
Blitz comes with a set of tools that corrects and formats your code, facilitating its future maintenance. You can modify their options and even uninstall them.
- ESLint: It lints your code: searches for bad practices and tell you about it. You can customize it via the
.eslintrc.js
, and you can install (or even write) plugins to have it the way you like it. It already comes with theblitz
config, but you can remove it safely. Learn More. - Husky: It adds githooks, little pieces of code that get executed when certain Git events are triggerd. For example,
pre-commit
is triggered just before a commit is created. You can see the current hooks inside.husky/
. If are having problems commiting and pushing, check out ther troubleshooting guide. Learn More. - Prettier: It formats your code to look the same everywhere. You can configure it via the
.prettierrc
file. The.prettierignore
contains the files that should be ignored by Prettier; useful when you have large files or when you want to keep a custom formatting. Learn More.
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.