Initial Setup on Local Machine

Introduction

If you are working on blog posts, most pages (i.e. those listed in the various page sections of the CMS), download distributions, sponsors, store items, or featured add-ons, you DO NOT need to install anything. All manangement of those items is done via the Netlify CMS. Please see the section on Routine Editing for more information.

Installing GatsbyJS

While technically it is possible to edit many of the pages with just a text editor, installing GatsbyJS locally allows you to preview how the page will look in your web browser. To install GatsbyJS (and NodeJS), please follow these instructions:

https://www.gatsbyjs.com/docs/tutorial/part-zero/

NOTE: The Gatsby instructions talk about installing and setting a particular version of Node. The site is built using Node 15, so you should install that. Node 15.13.0 is listed as Current on the Node.js web site. It might not matter if you have an existing version that is slightly different than that, but if you're installing from scratch, it's probably worth using that version as the default.

Getting the Kodi-TV Site Code

The kodi-tv site code is all in this repo. You either need to use git from the command line or a desktop client of some sort to get the repo on your local machine. Once you can that, from a command line, cd into the directory and run npm install. That will install and needed dependencies so that you can run GatsbyJS to preview the site.

Setting Up Some Local Environment Variables

You may skip this section unless you need to work on the donor wall, the Stripe donation form, or the Paypal donation form.

You will need to create some environment variables for things to work properly. To create those environment variables, you need to add a file called .env.development in the root of the kodi-tv directory. Because this file contains sensitive API keys, it is ignored by git and will not be uploaded to the repo. You will need the following in the file:

AWS_ID=<see team OnePassword>
AWS_KEY=<see team OnePassword>
AWS_DBNAME=donations-dev
NETLIFY_CMS_BACKEND=staging
GATSBY_PAYPAL_URL=https://www.sandbox.paypal.com/cgi-bin/webscr
GATSBY_PAYPAL_BUSINESS=<See team OnePassword>
GATSBY_STRIPE_APIKEY=<see team OnePassword>
GATSBY_STRIPE_TYPE=test
GATSBY_SITEURL=https://kodi-tv.netlify.app

If you do not have access to the Team OnePassword where the kodi-tv API keys are stored, please post something in the Slack #website channel.

Running GatsbyJS

You should now be able to type gatsby develop from the kodi-tv directory. If all goes well, at the end there will be a message with a URL you can use on your local machine to see the version of the site on your machine. For the most part, changes you make will be reflected immediately. Sometimes you do have to restart the development server. To do that, type CNTL-C in your command line window and then start the development environment again using gatsby develop.

In some cases, Gatsby may fail to run because the executable can't be found in the path. If you don't want to fix that, you can try using npm run develop instead. That takes longer to run, but it does work as an alternative.

Work Around for Gatsby Bug Causing Error on Page Render

With the current version of Gatsby there appears to be a bug that causes page renders to fail with an error about a StaticQuery not being loaded. The bug seems to occur with installations that include the Netlify CMS (which ours does). If you get an error while rendering pages in development mode, please try this:

1. Run gatsby develop as normal and attempt to load a page from your web browser.
2. When you get the error, open the file src/components/Header.tsx
3. add a space to the file (anywhere at the end of a line), save it, and wait 5 seconds
4. remove the space, save the file again (this is mostly so it doesn't get flagged by Git as changed), and wait another 5 seconds.
5. Reload the page in your browser.

That should resolve the error until next time you restart the Gatsby development server, but if you get the error again during the same session, repeat the steps above.