2019-02-05 08:28:43 -08:00
# Contributing
There are two pieces to `og-image` that are worth noting before you begin development.
2020-08-11 12:53:00 -07:00
1. The backend image generator located in [/api/index.ts ](https://github.com/vercel/og-image/blob/main/api/index.ts )
2. The frontend inputs located in [/web/index.ts ](https://github.com/vercel/og-image/blob/main/web/index.ts )
2019-02-05 08:28:43 -08:00
2020-10-09 09:59:01 -07:00
Vercel handles [routing ](https://github.com/vercel/og-image/blob/main/vercel.json#L6 ) in an elegant way for us so deployment is easy.
2019-02-05 08:28:43 -08:00
2019-03-31 18:09:16 -07:00
To start hacking, do the following:
2019-02-05 08:28:43 -08:00
2020-05-27 16:15:22 -07:00
1. Clone this repo with `git clone https://github.com/vercel/og-image`
2019-03-31 18:09:16 -07:00
2. Change directory with `cd og-image`
2019-04-30 10:07:22 -07:00
3. Run `yarn` or `npm install` to install all dependencies
2020-05-27 16:15:22 -07:00
4. Run locally with `vercel dev` and visit [localhost:3000 ](http://localhost:3000 ) (if nothing happens, run `npm install -g vercel` )
2020-08-11 12:53:00 -07:00
5. If necessary, edit the `exePath` in [options.ts ](https://github.com/vercel/og-image/blob/main/api/_lib/options.ts ) to point to your local Chrome executable
2019-02-05 08:28:43 -08:00
Now you're ready to start local development!
2019-04-29 15:02:09 -07:00
You can set an environment variable to assist with debugging `export OG_HTML_DEBUG=1` . This will render the image as HTML so you can play around with your browser's dev tools before committing changes to the template.