Act Now Template

Getting Started

This web application is based on Next.js.

To start, install the project dependencies:

yarn

Run the development server:

yarn dev

Open http://localhost:3000 with your browser to see the result.

TODO

To set up your Act Now website based on the template, you'll want to:

• Set site-wide configuration options.
  • CMS Setup
  • Update title, meta tags, etc. in src/pages/_app.tsx.
  • Customize theme (TBD).
  • Update public/favicon.ico
  • Set up analytics.
• Set up regions in utils/regions.ts.
• Set up routing.ts.
• Set up metrics in utils/metrics.ts.
• Customize home page in screens/Homepage/Homepage.tsx.
• Customize location pages.

CMS Setup

This template comes pre-configured to use Netlify CMS as Content Management System, with GitHub as an authentication provider.

Using GitHub to authenticate CMS users requires a server handling the authentication flow. We use Vercel serverless functions to handle the authentication flow. See src/pages/api/auth.js and src/pages/api/callback.js.

Step-By-Step Instructions

1. Create a GitHub OAuth App. This application will be used to authenticate your CMS users. For example, if the URL of the production deployment of your app is https://act-now-template.vercel.app, you will need to set the following fields when creating the app.

   • Homepage URL: https://act-now-template.vercel.app/admin/
   • Authorization callback URL: https://act-now-template.vercel.app/api/callback

   Upon creating the app, you will get the Client ID of the GitHub OAuth App. You will also need to create a Client secret before the next step (the client secret can only be seen once, make sure to store it securely).

2. Go to the project in Vercel. Go to Settings → Environment Variables and create the following environment variables (for the Production environment if you use develop to edit the CMS content).

   ORIGIN=act-now-template.vercel.app
   COMPLETE_URL=https://act-now-template.vercel.app/api/callback
   OAUTH_CLIENT_ID=xxxx
   OAUTH_CLIENT_SECRET=xxxx

3. Update the CMS configuration, making sure to point to your repository and to the branch that you want to use as preview.

   backend:
     name: github
     repo: act-now-coalition/act-now-template
     branch: develop
     base_url: https://act-now-template.vercel.app
     auth_endpoint: api/auth

   The CMS interface will be available at https://act-now-template.vercel.app/admin/

Learn More

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.
• MUI - React UI library.