This README outlines the necessary steps to get the quote-invoice-generator development environment up and running. Please follow the instructions carefully to ensure compatibility across different work environments.
This project starts as a POC for running Puppeteer in NextJS Server Actions (for PDF generation) and a first attempt at storing all state in the URL. It's also used as a sandbox to research the best way to configure and structure a NextJS App for a fluid development and a robust software. Finally, it tries to be a showcase for the state of MY art with these technologies. PS : I may really need to generate invoices & quotes but I prefer to spend my time coding this rather than opening Acrobat like any sane person.
This project leverages NextJS's new server actions feature in conjunction with Puppeteer. Current deployment on Vercel involves a serverless environment which poses compatibility issues with Puppeteer, preventing it from functioning correctly when deployed. As such, please be aware that the current intended use-case for this program is strictly for local development and execution. Future updates may address this deployment limitation, but for now, ensure to run and test the application locally.
We use NVM (Node Version Manager) to ensure a consistent Node.js version. Install NVM and set the Node.js version for this project with :
$ nvm install
Pnpm is the package manager of choice for this project. Make sure you are using at least Node.js 14 (lts/fermium) and then activate it through corepack
:
$ corepack enable pnpm
To ensure consistent behaviour across all development environments, they should all use the same version of pnpm. That's why an explicit pnpm version is specified in the package.json. Check if your pnpm version is matching the one under the packageManager
property :
$ pnpm -v
If it is not the case, install the corresponding version :
$ corepack install
Consistency in TypeScript versions is crucial. For VSCode users, ensure that you use the workspace version of TypeScript and not the built-in version provided by VSCode.
For an enhanced development experience with project-specific editor settings, duplicate .vscode.sample
as .vscode
:
$ cp -R .vscode.sample .vscode
Ensure that you follow the sections below in sequence to set up your development environment without issues. Documentation is provided to guide you through the major setup steps.
Initiate by setting up environment variables. Duplicate .env.local.sample
as .env.local
:
$ cp .env.local.sample .env.local
Amend .env.local
with your specific configurations.
Install necessary project dependencies :
$ pnpm install
To precisely keep track of the dependencies of this application, each dependency should be added with a specific version number.:
$ pnpm add <pkg> -E
Also, for easier dependency updating, you should use the pnpm interactive mode :
$ pnpm up -i -L
Execute the app in various modes using :
# Development mode
$ pnpm dev
# Production mode
$ pnpm start