After installing the modules and the emulators, we can finally run the application in development mode.
We need to execute two commands (and an optional one for Stripe):
- Next.js Server: the first command is for running the Next.js server
- Firebase Emulators: the second command is for running the Firebase emulators
- Stripe CLI: finally, the Stripe CLI is needed to dispatch webhooks to our local server (optional, only needed when interacting with Stripe)
First, let's run the emulators. The command below runs the emulators for the following products: Authentication, Firestore, and Storage.
npm run firebase:emulators:start
Additionally, it imports the default emulator's data from the folder
. /firebase-seed, which we set up upfront to run the Cypress tests.
And now, the Next server:
npm run dev
If everything goes well, your server should be running at http://localhost:3000.
Run the Stripe CLI with the following command:
npm run stripe:listen
If this is the first time you run this command, you will need to copy the Webhooks key printed on the console and add it to your development environment variables file:
After shutting the emulators down, the Firebase emulator clears all the records and the users added during the session while the emulators are running.
Fortunately, we can save and restore as many dumps as we want. For example, this can be useful for saving and loading particular scenarios for testing.
To save the current snapshot, run the following command while the emulators are up and running:
npm run firebase:emulators:export
By default, MakerKit imports and exports to
./firebase-seed, but you can change this to any other path.
We don't particularly recommend this, but if you want to keep persisting data as you exit the emulators,
you can decorate the
firebase:emulators:start with the following options:
firebase emulators:start --export-on-exit=./your-directory
Saving your emulators' state can be handy, but keep in mind that for testing reasons, it's always best to create a snapshot of your data and use the same one so that your tests won't break if the data changes.
Of course, change
./your-directory to your preferred path.