We recommend using a package manager (and a version manager if you want)!
Brew (Mac): brew install node
Choco (Window): choco install nodejs.install
Otherwise, you can install it manually
Latest release (v21) works, but requires some polyfills so be warned if using new JS APIs (see src/util/polyfill.ts
for some polyfills already implemented).
Once NodeJS is installed, install yarn globally:
npm i --global yarn
Now open the repository in a terminal and install required packages using:
yarn
(if it doesn't recognize yarn, restart terminal)
You can specify environment variables in a .env file in the root of the repo. Do not share or commit the API keys/secrets.
NEXT_PUBLIC_GCLOUD_API_KEY=...
NOTION_SECRET=...
NOTION_OFFICERS_DATABASE_ID=f82a1e06e36345088fa782632acf1dee
NOTION_OFFICER_SOCIAL_LINKS_DATABASE_ID=71a67370c416472096621cbb25335ae4
NOTION_DEBUG_ARTICLES_DATABASE_ID=457c5b5607df4219a8640d78d20b0962
To access the Google API Key, go to this link. If this doesn't work, make sure you have access to the Google Developer console. Otherwise, you can also go to the Google Developer Console, open the left-hand-side menu, and go to APIs & Services/Credentials
. For development, use the development key, and for production, use the production key.
To access the Notion API Key, make sure you have the Workspace Owner perm on the ACM Studio Notion, and navigate to [https://www.notion.so/my-integrations]. Find the ACM Studio Website Scraper
integration, click on it, and go to the secrets tab, where you will find the secret. Please don't refresh it lol.
The Notion API requires a database ID when querying the database. At the time of writing, the officers one is f82a1e06e36345088fa782632acf1dee
. However, if it is even changed, it can be found by going to a database (the database will be in the dropdown under the page displaying the database), go to the top right three dots icon, click Copy Link
, which will be of the form:
https://www.notion.so/acmstudioucla/f82a1e06e36345088fa782632acf1dee?v=30c84e38ff814e36b6f2d3cde4befa41&pvs=4
^ ^
|______________________________|
Database ID
In addition, the integration to be connected to the database, which can be granted through the three dots again, then connect to
, then find the integration. This must be done for any related databases to (eg. the Officer Social Links) database.
The scripts are visible in package.json
.
There are 2 important ones:
dev
runs the NextJS development serverindex
indexes the content in thecontent
folderindex:watch
does the same thing but automatically reruns the script when something changes
If you modify any content in content
, you need to rerun index
(or have index:watch
automatically rerun), so it is best to run yarn dev
and yarn index:watch
at the same time, either using 2 terminal instances or in parallel (yarn dev & yarn index:watch
on Mac, Linux, and MS Powershell 7).
The branch prod
is automatically deployed to the Netlify project vermillion-hummingbird-d28997
accessible through [https://vermillion-hummingbird-d28997.netlify.app/]. Thus, all you need to do is merge into prod
to deploy.
Netlify uses a CI process, so unsuccessful builds will not break everything. However, unsuccessful builds happen a lot, even with type errors that you may not get on your machine. To test if the build should work on Netlify's servers, you can run yarn build
. Depending on your version of node
, you can also install the Netlify CLI and do a local build.
If you need access to the Netlify, ask Aubrey. Note that the main configuration needed for Netlify to work is to set up the environment variables as shown above.
Please run yarn prettier
before committing!!!! This is to make every file have normalized spacing and such. If needed, we can use a precommit hook, but I don't think it's that serious.