👉 Get Started

Install dependencies

npm install

Update your .env file with values for each environment variable

API_KEY=AIzaSyBkkFF0XhNZeWuDmOfEhsgdfX1VBG7WTas
etc ...

Install the Vercel CLI

npm install -g vercel

Link codebase to a Vercel project and run development server

vercel dev

When the above command completes you'll be able to view your website at http://localhost:3000.

Note: You can run just the front-end with npm run start, but vercel dev also handles running your API endpoints (located in the /api directory).

🥞 Stack

This project uses the following libraries and services:

• Framework - Create React App with React Router
• UI Kit - Material UI
• Newsletter - Mailchimp
• Contact Form - Formspree
• Analytics - Google Analytics
• Hosting - Vercel

📚 Guide

Routing

This project uses React Router and includes a convenient useRouter hook (located in src/util/router.js) that wraps React Router and gives all the route methods and data you need.

import { Link, useRouter } from "./../util/router.js";

function MyComponent() {
  // Get the router object
  const router = useRouter();

  // Get value from query string (?postId=123) or route param (/:postId)
  console.log(router.query.postId);

  // Get current pathname
  console.log(router.pathname);

  // Navigate with the <Link> component or with router.push()
  return (
    <div>
      <Link to="/about">About</Link>
      <button onClick={(e) => router.push("/about")}>About</button>
    </div>
  );
}

Deployment

Install the Vercel CLI

npm install -g vercel

Add each variable from your .env file to your Vercel project, including the ones prefixed with "REACT_APP_". You'll be prompted to enter its value and choose one or more environments (development, preview, or production). See Vercel Environment Variables to learn more about how this works, how to update values through the Vercel UI, and how to use secrets for extra security.

vercel env add plain VARIABLE_NAME

Run this command to deploy to a unique preview URL. Your "preview" environment variables will be used.

vercel

Run this command to deploy to your production domain. Your "production" environment variables will be used.

vercel --prod

See Vercel Deployments for more details.

Other

This project was created using Divjoy, the React codebase generator. You can find more info in the Divjoy Docs.