DEV Community: Mark Woodson

React Scheduler using Google Calendar API

Mark Woodson — Wed, 29 Apr 2026 02:43:36 +0000

Hey team! I was recently working on a project that involved getting someone's personal calendar integrated into a React project. After looking into it a bit, I couldn't find anything that had a full documentation on how to do it, which inspired me to make this. So today, let's make a fully functioning calendar in React, and populate it with events from your own Google Calendar!

Now this tutorial is broken up into a few parts:

Firstly, we'll focus entirely on the front end, using sample data from a local json file.
Next, we'll create the Firebase functions that use the Google Calendar API to retrieve events
Lastly, we'll connect the two and talk about some future ideas you can add.

This tutorial will assume you have some experience or familiarity with React.

Project Setup

To begin, we'll start with a basic React project by running npx create-react-app reservation-demo in the terminal and then opening the directory in your editor of choice.

Next, we will take advantage of a few npm packages, so run the following script to install all the packages we'll need for this tutorial:

npm install devextreme@24.1 devextreme-react@24.1 --save --save-exact
npm install dayjs@1.11.11 --save

While we can just use Javascript's native Date object, I found using dayjs for the Firebase functions to be a lot easier to use.

Create Calendar Component

For the frontend, we will make use of the DevExtreme React Scheduler. This package gives us everything we need to get a working frontend to display our calendar events, and handle any additions, edits, and deletions for the events. Inside our App.js file, replace the contents with the following:

import 'devextreme/dist/css/dx.light.css';
import { Scheduler, View, Editing } from 'devextreme-react/scheduler';

const App = () => {
  return (
    <Scheduler defaultCurrentView='week'>
      <Editing />
      <View 
        type="week"
        startDayHour={9}
        endDayHour={19}
      />
      <View type="month" />
    </Scheduler>
  );
};

export default App;

This code uses the DevExtreme package to get each component that we need. If you run this, you should see a scheduler with a view of the week from 9am-7pm, and the option to see it by month. If you're curious on how each component works and any additional props or components that you can use with this, the documentation for each component can be found in the DevExtreme Docs within the API Reference section.

Create Calendar Data

For now, we will use some dummy data to populate our calendar, but by the end, we will use the data that we get from our API call. We'll add this data to a json file and then incorporate that into our Calendar logic.
Now create a new file called appointments.js and paste the following into the file:

import dayjs from 'dayjs';

export const appointments = [
    {
      title: 'Website Re-Design Plan',
      startDate: dayjs('2023-07-16 9:35').toDate(),
      endDate: dayjs('2023-07-16 11:30').toDate(),
      id: 0,
      location: 'Room 1',
    }, {
      title: 'Book Flights to San Fran for Sales Trip',
      startDate: dayjs('2023-07-18 12:35').toDate(),
      endDate: dayjs('2023-07-18 13:30').toDate(),
      id: 1,
      location: 'Room 1',
    }
];

This array contains each event that will display on the calendar.
When we import this object to our App.jsx file, we can populate our calendar by adding the object to the scheduler in our App.jsx like this:

// previous imports above
import { appointments } from './appointments';
const App = () => {
    const currentDate = dayjs('2023-07-16').toDate()
    return (
        <Scheduler
          dataSource={appointments}
          textExpr='title'
          defaultCurrentView='week'
          currentDate={currentDate}
          adaptivityEnabled={true}
        >
        // other components below
    );
}; 
export default App;

A couple notes on this block of code:

For the props, we set textExpr to use 'title' as the key from the appointments to represent the 'subject' for each appointment (This is useful for part two).
We add the 'currentDate' value to set the schedule to a date where we can see the dummy events in the calendar.

By adding our appointments to our scheduler and creating a default date near those event dates, we should see them in the calendar with the code running with npm start.

Great! Everything should be up and running. You should be able to see the events that you created with the dummy data, and also add, edit, and remove events. One thing to note is that the data does not persist if you refresh the page, so be mindful of that.

This concludes the bulk of the frontend portion (it wasn't much but it's honest work). But now we can dive into creating those backend functions to populate the calendar.

Create Google Project

We will now go create a Google Cloud Project so we can set up our Calendar API calls and Firebase Functions. Go to the
Firebase Console to create an account or sign in, and create a new project. You can give the project whatever name, but keep note of the PROJECT_ID that gets generated, since this will be our unique identifier.

You can leave the Enable Google Analytics option on or turn it off, but I enabled mine during this demo. Select 'Create Project' and then you're project should be ready within a few minutes. This should also initialize the project in the Google Cloud Console.

Once that's ready, we will set up Firebase Function, which will be what our component calls to read our Google calendar's events and add new ones. Inside the root of our project, we will set up our Firebase structure with:

npm install -g firebase-tools
firebase login
firebase init

In the options presented, select Functions and hit Enter to continue. Afterwards, make sure to select your PROJECT_ID and hit Enter. Now, select Javascript for the language we are using, and hit Enter to finish the set up for our Functions. Once it's all finished, our Functions should be set-up! There should be a hello-world example in our index.js file that you can test out if you want.

Create Google API Key

This section will focus on setting up the credentials that are needed to get the backend working.
Let's go to Google Cloud Console and select Go to APIs overview and click Credentials. Create a new project with whatever name (my-calendar-demo for consistency). In the top bar, go to Create Credentials -> OAuth Client ID. If you get a warning to create an OAuth Client ID, click the Configure consent screen button and provide a name and support email, and hit save. You should now be on the Credentials screen. Go to Application Type -> Web Application and give your credentials a name. In the Restrictions section, add the URI https://developers.google.com/oauthplayground to Authorized redirect URIs. Now we can hit Create. If successful, you should now see your clientId and client secret. Copy these since we'll need them in a second. Select OK and then in the table that appears, download the json file so that we can add it to our project. If you lose the client ID and secret, you can retrieve them in this json file.
Now we must configure our OAuth2 by going to the redirect added: OAuth Playground.
Click the Settings icon in the top right and select Use your own OAuth credentials, so we can add our client ID and secret. Now in the left side column, we are going to search for and select Calendar API v3 and give it the scope of https://www.googleapis.com/auth/calendar so that we can read and write to our calendar. Now click Authorize APIs to move to Step 2. You should be taken to the Google sign-in page, so log in (thankfully just this once) and now it should return back to a screen like the following.

Click the Exchange authorization code for tokens button to get a refresh token, which will allow us access to the API calls we'll make. We'll add the refresh_token to the json file that we downloaded, so now it should look like:

{
  "web": {
    "client_id": "706881267217-852pu9orud6araf6k.apps.googleusercontent.com",
    "project_id": "my-calendar-demo-444701",
    "auth_uri": "https://accounts.google.com/o/oauth2/auth",
    "token_uri": "https://oauth2.googleapis.com/token",
    "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
    "client_secret": "<REDACTED>",
    "redirect_uris": [
      "https://developers.google.com/oauthplayground"
    ]
  },
  "refresh_token": "<REDACTED>"
}

Get Calendar ID

Lastly let's retrieve the ID for the calendar that we'll get and add events. Go to your Google Calendar and go to the settings of the calendar you want to use. In the settings, click the Integrate Calendar button and you should see the Calendar ID.

Copy this and add it to the credentials.json file.

Once we've done that, we are done with the tedious setup! Now let's do the finishing touches.

Set up the functions

Now for our calendar to work how we want, we need to implement a read and write function to get the events on the calendar and add new ones. So back in our functions/index.js file, we are going to add the following code.

const { google } = require('googleapis');
const OAuth2 = google.auth.OAuth2; 
const calendar = google.calendar('v3');
const { onRequest } = require("firebase-functions/v2/https");
const { defineSecret } = require("firebase-functions/params");
const cors = require('cors')({ origin: true });
const credentials = require('./credentials.json');

const clientSecret = defineSecret("CLIENT_SECRET");
const refreshToken = defineSecret("REFRESH_TOKEN");

const READ_ERROR_RESPONSE = {
  status: "500",
  message: "There was an error reading your events on your Google calendar"
};

const ADD_ERROR_RESPONSE = {
  status: "500",
  message: "There was an error adding an event to your Google calendar"
};

Here we are instantiating the variables and constants that will be used for each of our functions.
Next, we'll add the code for reading the calendar events:

const readEvents = (params, auth) => {
  return calendar.events.list({
    auth: auth,
    timeMin: params.timeMin,
    timeMax: params.timeMax,
    calendarId: credentials.web.calendar_id,
    singleEvents: true,
    orderBy: 'startTime',
  }).then(res => {
    console.log('Request successful');
    return res.data;
  }).catch(err => {
    console.log('Rejecting because of error');
    throw new Error(err);
  })
};

exports.readEventsFromCalendar = onRequest(
  { secrets: [clientSecret, refreshToken] },
  async (request, response) => {
    cors(request, response, () => {
      const oAuth2Client = new OAuth2(
        credentials.web.client_id,
        process.env.CLIENT_SECRET,
        credentials.web.redirect_uris[0]
      );
      oAuth2Client.setCredentials({
        refresh_token: process.env.REFRESH_TOKEN,
      });
      const eventData = {
        timeMin: request.body.timeMin,
        timeMax: request.body.timeMax,
      };
      readEvents(eventData, oAuth2Client).then(data => {
        response.status(200).send(data);
        return;
      }).catch(err => {
        console.error('Error reading events: ' + err.message); 
        response.status(500).send(READ_ERROR_RESPONSE); 
        return;
      });
    });
  }
);

Our function uses the Events List Google Calendar call to get the details of the events in our calendar, with an optional timeMin and timeMax parameter to narrow the scope of our returned events.

And finally, we'll add the code to publish new events in our calendar:

const addEvent = (event, auth) => {
  return calendar.events.insert({
    auth: auth,
    calendarId: credentials.web.calendar_id,
    resource: {
      'summary': event.eventName,
      'description': event.description,
      'start': {
        'dateTime': event.startTime,
        'timeZone': event.timeZone,
      },
      'end': {
        'dateTime': event.endTime,
        'timeZone': event.timeZone,
      },
    },
  }).then(res => {
    console.log('Request successful');
    return res.data;
  }).catch(err => {
    console.log('Rejecting because of error');
    throw new Error(err);
  })
};

exports.addEventToCalendar = onRequest(
  { secrets: [clientSecret, refreshToken] },
  async (request, response) => {
    cors(request, response, () => {
      const oAuth2Client = new OAuth2(
        credentials.web.client_id,
        process.env.CLIENT_SECRET,
        credentials.web.redirect_uris[0]
      );

      oAuth2Client.setCredentials({
        refresh_token: process.env.REFRESH_TOKEN,
      });
      const eventData = {
        eventName: request.body.eventName,
        description: request.body.description,
        startTime: request.body.startTime,
        endTime: request.body.endTime,
        timeZone: request.body.timeZone,
      };
      addEvent(eventData, oAuth2Client).then(data => {
        response.status(200).send(data);
        return;
      }).catch(err => {
        console.error('Error adding event: ' + err.message); 
        response.status(500).send(ADD_ERROR_RESPONSE); 
        return;
      });
    });
  }
);

Now we are almost ready to publish our functions, but first we want to make sure we publish this as safely as possible. Since our client secret and refresh key are things we don't really want to expose, we are going to take those out of the credentials file, before publishing. So copy those and put them somewhere for a second, because we'll come back to them in the next step. Now that your credentials should look like:

{
  "web": {
    "calendar_id": "a4f940ab772d782b18824b5cb114ce4b91412fb8b7631d0@group.calendar.google.com",
    "client_id": "706881267217-852cmqf4vrud6araf6k.apps.googleusercontent.com",
    "project_id": "my-calendar-demo-444701",
    "auth_uri": "https://accounts.google.com/o/oauth2/auth",
    "token_uri": "https://oauth2.googleapis.com/token",
    "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
    "redirect_uris": [
      "https://developers.google.com/oauthplayground"
    ]
  }
}

We can run firebase deploy --only functions to get our functions deployed. Once that's complete, we are almost ready to start testing.

Create function secrets

Let's go to [Google Cloud Console (https://console.cloud.google.com/) and select the Firebase project. In the navigation menu, go to Cloud Functions in the Serverless section and from here you should be able to see our two functions. Let's start with addEventToCalendar by clicking on it, and in this view you should be able to see the details about our function. Click the edit button and go to Runtime, build, connections and security settings. Now we'll go to the
SECURITY AND IMAGE REPO tab and click Add a secret reference. In the first input, click the dropdown and Create New Secret, and add CLIENT_SECRET as the name and paste the value in the Secret value section, and then click Create Secret. Now select this secret, change the Reference method to Exposed as environment variable, and for the path, add CLIENT_SECRET and then select Done. Now we will repeat these steps for REFRESH_TOKEN. After that, we have to do the same for our second function readEventsFromCalendar. And once we complete all that, we can finally try and test it out.

Testing the functions

So within our Function details for addEventToCalendar, there is a Testing tab that we'll select and add the following payload:

Once we add this and hit Test the Function, we should see a successful response, and if we check out calendar, we should see this new event!
And just to check our other function, we'll go to the testing tab there and add this payload:

And this success should show the information on the event we just added! If these are successful, now all that's left to do is just tie it all together!

Use with our app

Now that we’ve published and tested our functions, we are going to make those function calls to populate the calendar in our app. We’re going to create a new file called util.js and will add these lines of code:

import dayjs from 'dayjs';

const parseCalendarEvents = (data) => {
  const eventsList = data.items?.map(event => ({
    startDate: dayjs(event.start.dateTime).toDate(),
    endDate: dayjs(event.end.dateTime).toDate(),
    title: event.summary,
    description: event.description,
    id: event.id,
  }))
  return {calendarTimeZone: data.timeZone, eventsList};
};

export const readCalendarEvents = async (timeMin, timeMax) => {
  const requestBody = {
    timeMin,
    timeMax
  }
  return fetch('https://us-central1-my-calendar-demo-fa016.cloudfunctions.net/readEventsFromCalendar', {
    method: 'POST',
    body: JSON.stringify(requestBody),
    headers: { 'Content-Type': 'application/json' }
  })
  .then(res => res.json())
  .then(json => parseCalendarEvents(json))
  .catch(error => console.log(error));
};

export const addToCalendar = async ({title, startDate, endDate, description, allDay}, timeZone) => {
  const startTime = dayjs(startDate);
  const endTime = dayjs(endDate);
  const requestBody = {
    eventName: title,
    description,
    startTime: startTime.format('YYYY-MM-DDTHH:mm:ssZ'),
    endTime: endTime.format('YYYY-MM-DDTHH:mm:ssZ'),
    timeZone
  };
  return fetch('https://us-central1-my-calendar-demo-fa016.cloudfunctions.net/addEventToCalendar', {
    method: 'POST',
    body: JSON.stringify(requestBody),
    headers: { 'Content-Type': 'application/json' }
  }).catch(error => console.log(error));
}

The addToCalendar function calls our Firebase function addEventToCalendar and readCalendarEvents calls readEventsFromCalendar while using a helper function called parseCalendarEvents to clean up the response and format the data to how we need it for our scheduler.

Now we will call these functions in App.jsx. We will add useEffect to fetch the events once the module loads by adding:

useEffect(() => {
    const getAppointments = async () => {
      const startTime = currentDate.subtract(2, 'month').format('YYYY-MM-DDTHH:mm:ss') + '.000Z';
      const endTime = currentDate.add(2, 'month').format('YYYY-MM-DDTHH:mm:ss') + '.000Z';
      const {calendarTimeZone, eventsList} = await readCalendarEvents(startTime, endTime);
      setApps(eventsList);
      setTimeZone(calendarTimeZone);
    };
    getAppointments();
 }, []);

So now your App.jsx file should look like:

import 'devextreme/dist/css/dx.light.css';
import { useCallback, useState, useEffect } from 'react';
import { Scheduler, View, Editing } from 'devextreme-react/scheduler';
import { addToCalendar, readCalendarEvents } from './util';
import dayjs from 'dayjs';

const App = () => {
  const currentDate = dayjs();
  const [apps, setApps] = useState([]);
  const [timeZone, setTimeZone] = useState('');

  useEffect(() => {
    const getAppointments = async () => {
      const startTime = currentDate.subtract(2, 'month').format('YYYY-MM-DDTHH:mm:ss') + '.000Z';
      const endTime = currentDate.add(2, 'month').format('YYYY-MM-DDTHH:mm:ss') + '.000Z';
      const {calendarTimeZone, eventsList} = await readCalendarEvents(startTime, endTime);
      setApps(eventsList);
      setTimeZone(calendarTimeZone);
    };
    getAppointments();
 }, []);

  const handleAppointment = useCallback(async (e) => {
    await addToCalendar(e.appointmentData, timeZone);
  }, []);

  return (
    <Scheduler
      dataSource={apps}
      timeZone={timeZone}
      textExpr='title'
      defaultCurrentView='week'
      currentDate={currentDate.toDate()}
      adaptivityEnabled={true}
      onAppointmentAdding={handleAppointment}
    >
      <Editing />
      <View 
        type="week"
        startDayHour={9}
        endDayHour={19}
      />
      <View type="month" />
    </Scheduler>
  );
};

export default App;

And with this we should be able to run the app and see how your calendar looks like (with or without events). But to fully test this out, lets double click a spot on the scheduler, add some event details, and click create. If no console log shows up for an error, we should have a successful API call, and we should see the newly created event in the calendar!

Conclusion

And with that, you should have a Calendar up and running, populated with your Google Calendar events! Now there's still a lot you can do to add onto this, like playing around with some more of the props that you can use with the scheduler, creating functions for updating and deleting events, adding a loading state for the read call, etc. Please let me know in replies if you have any questions but I hope this was helpful!

Grow your mailing list: Mailchimp x React x Firebase

Mark Woodson — Fri, 13 Oct 2023 02:06:00 +0000

For this tutorial, we're gonna make a React Subscriber form, which adds someone to an audience list in Mailchimp. We'll break it down to these steps:

Create React form
Create Mailchimp account
Create serverless Mailchimp API function
Combine the two

As always, I like to add a bit of context to the tutorial before starting, but if you want to skip ahead, feel free.

A popular addition that I normally add to websites I create are Subscriber forms, and typically I use Mailchimp, since it's easy to work with and useful overall. Since it's a great tool to utilize, I felt like making a quick tutorial on how to set it up. I also wanted to make sure that you could either come away with:

a reusable form that you can add to other projects
a serverless function that you can call for other use cases
why not both?

For the frontend, we will utilize Material UI to create the form and Firebase Functions to create the serverless function. Material UI is a component library that makes it much easier to create a form that you can continue to build upon afterwards. And Firebase Functions is a serverless framework where we can run store our backend code and trigger our functions upon HTTPS requests. To answer any potential questions.

Why Firebase? Because I'm familiar with it and the project I was working on already had a Firebase project set up. You can use another Serverless architecture, or even run it locally with an Express server. But this tutorial will use Firebase.
Why even make a serverless function? Since Firebase will be using an API Key, keeping it stored in a serverless architecture can be much safer than having it in the client, especially if there's plans for this function in the future. So we're going with best practices. Any other questions, please ask in the comments and I'll answer! But anyways, let's jump into the tutorial.

Create Simple Input Form

Firstly, let's create our standard React project by running
npx create-react-app mailchimp-form. Once it finishes, run npm install @mui/material @emotion/react @emotion/styled to install the dependencies for what we need for the frontend.

Once it's created, let's remove the code inside the App.jsx file so that it's pretty barebones. It should look like:

import React from 'react';

function App() {

return (
    <div>Hello!</>
)

export default App;

So now let's create the form to get all the user info we want. Let's add the following to the App.jsx file:

import React, { useState } from 'react';
import { TextField, Button, Container, Stack } from '@mui/material';

function App() {
  return (
    <Container>
      <h2>Mailchimp Form</h2>
      <form onSubmit={handleSubmit} >
        <Stack spacing={{ xs: 3, sm: 2 }} direction={{ xs: 'column', sm: 'row' }} sx={{mb: 3}}>
          <TextField
            name='firstName'
            type="text"
            variant='outlined'
            label="First Name"
            onChange={handleUserChange}
            value={firstName}
            fullWidth
            required
          />
          <TextField
            name='lastName'
            type="text"
            variant='outlined'
            label="Last Name"
            onChange={handleUserChange}
            value={lastName}
            fullWidth
            required
          />
        </Stack>
        <TextField
          name='email'
          type="email"
          variant='outlined'
          label="Email"
          onChange={handleUserChange}
          value={email}
          fullWidth
          required
          sx={{mb: 3}}
        />
        <Button variant="outlined" type="submit">Subscribe</Button>
      </form>
    </Container>
  )
}

export default App;

And if we see the app, it should look like this:

Great, so now we have our form showing up, but at the moment, it doesn't keep track of the user input. So let's add that piece, let's add useState to fully keep track of what a user inputs.

const [user, setUser] = useState({
    firstName: '',
    lastName: '',
    email: '',
});

const { firstName, lastName, email } = user;

Now for the form to update the state of our userInfo, we'll add this function.

  const handleUserChange = (e) => {
    setUser({
      ...user,
      [e.target.name]: e.target.value
    })
  };

Lastly, let's add a function to handle the submission when the user clicks the subscribe button:

const handleSubmit = async (e) => {
    e.preventDefault();
    console.log(user);
};

Now, our code should look like:

import React, { useState } from 'react';
import { TextField, Button, Container, Stack, Snackbar, Alert, Skeleton } from '@mui/material';

function App() {

  const [user, setUser] = useState({
    firstName: '',
    lastName: '',
    email: '',
  });

  const { firstName, lastName, email } = user;

  const handleUserChange = (e) => {
    setUser({
      ...user,
      [e.target.name]: e.target.value
    })
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    console.log(user);
  };

  return (
    <Container>
      <h2>Mailchimp Form</h2>
      <form onSubmit={handleSubmit} >
        <Stack spacing={{ xs: 3, sm: 2 }} direction={{ xs: 'column', sm: 'row' }} sx={{mb: 3}}>
          <TextField
            name='firstName'
            type="text"
            variant='outlined'
            label="First Name"
            onChange={handleUserChange}
            value={firstName}
            fullWidth
            required
          />
          <TextField
            name='lastName'
            type="text"
            variant='outlined'
            label="Last Name"
            onChange={handleUserChange}
            value={lastName}
            fullWidth
            required
          />
        </Stack>
        <TextField
          name='email'
          type="email"
          variant='outlined'
          label="Email"
          onChange={handleUserChange}
          value={email}
          fullWidth
          required
          sx={{mb: 3}}
        />
        <Button variant="outlined" type="submit">Subscribe</Button>
      </form>
    </Container>
  )
}

export default App;

With this, our form takes, stores, and submits the user input! But submits to what? Currently, nothing. But then enters Mailchimp.

Create Mailchimp Account

Let's create a Mailchimp audience form. Now first we need to go to Mailchimp.com and sign up for an account. If you already have an account, awesome! If not, no worries. When you sign up, it does ask for a your business email and business address. It does need this info for anti-spam laws. If you don't have a business location, you can use one of the alternate address suggestions that it recommends. Or you can just skip this part entirely, bookmark it, and use it in the future when you create one for yourself or a future client.
Once your account is setup, go to the Audience Tab -> Signup Forms. On this page, go to Settings -> Audience Name and Defaults. On this page, you should see an Audience ID, which is what we'll need in the next step, so take note of it.
Now one more thing we'll want to check out is in Settings -> Audience fields and MERGE tags.

Here we can see the fields that we can collect from our subscribers, and add any additional ones. We'll stick with the ones we have here, which is First Name, Last Name, and Email Address.

Create Serverless function

Now that we have our form and Mailchimp account set up, let's connect to it with a serverless function using Firebase Functions.

Now we'll initialize a firebase project. I'll write the quick steps here but for a description of the steps and more about firebase I'll point you to the documentation

Create Project in the Firebase Console
Install the Firebase CLI with npm install -g firebase-tools
Log into Firebase from your terminal with firebase login
At the root of our project, run firebase init functions, select Javascript for our language, and install the dependencies

Now that should set us up. Now we'll add our function into the index.js file within the functions directory:


exports.addSubscriber = functions
.runWith({ secrets: ["MAILCHIMP_SECRET_KEY"] })
.https.onCall(async (data, context) => {
  const audienceId = ""; // add your audienceId here

  const {firstName, lastName, email} = data;
  const mailchimp = new Mailchimp(process.env.MAILCHIMP_SECRET_KEY);
  try {
    const resp = await mailchimp.post(`/lists/${audienceId}/members`, {
      merge_fields: {
        "FNAME": firstName,
        "LNAME": lastName
      },
      email_address: email,
      status: "subscribed"
    });
    return resp;
  } catch (error) {
    throw new functions.https.HttpsError("unknown", error);
  }
});

So all that our function is doing is destructing our request body for the parameters that we'll use for the Mailchimp call, and then returning a response indicating if it's successful.
Now one thing to note, we'll have to add that MAILCHIMP_SECRET_KEY to your secrets in Firebase so before you deploy, you'll just add the secret with firebase functions:secrets:set MAILCHIMP_SECRET_KEY and then paste the key. Afterwards, you can deploy with npm run deploy and once it succeeds, you should see the URL of the function that we'll use with our form.
If you want to just run it locally, first you can remove the .runWith({ secrets: ["MAILCHIMP_SECRET_KEY"] }) line and paste your key in place of process.env.MAILCHIMP. And then you can run npm run serve to start the function emulator, which will give you a URL for the function that you can use locally.
To test this, we can send a request in Postman with a request body of:

{
    "data": {
        "firstName": "Mark",
        "lastName": "Woodson",
        "email": "mark@markwoodson.me"
    }
}

You can verify the success of the request through the response or checking your Mailchimp Audience list to see if it grew by one!

Side note: The reason the request is in a field called 'data' is because the way we created the Firebase function. By using the "onCall" method, the request needs to be sent in that format. Using "onRequest", you can make the request without that field at the top level.

Alright, now we got two pretty useful, but separate, components. But how about we combine them into one awesome piece.

Bring It All Together

Let's make the call to our Firebase function. All we need to do is make a change to our submit function. Let's change the submit function to:

const handleSubmit = async (e) => {
    e.preventDefault();
    fetch('http://127.0.0.1:5001/mailchimp-form/us-central1/addSubscriber', {
      method: 'POST',
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({ firstName, lastName, email }),
    })
    .then((response) => response.json())
    .then((data) => {
      if (data.status === 'subscribed') {
        setUser({
          firstName: '',
          lastName: '',
          email: '',
        });
      } else {
        console.error('Error:', data);
      }
    })
    .catch((error) => {
      console.error('Error:', error);
    });
  };

After running the app, you should be good to go!

Next Steps

Awesome work on this. I hope it worked smoothly and will serve you well in the future! Now this definitely can be improved with a couple of things, like error handling, styling, additional form inputs, etc. But if you had any comments, questions, or concerns, please let me know in the comments and check out my other work at markwoodson.me

Create Deployment Pipeline for React App on Hostinger

Mark Woodson — Sat, 23 Apr 2022 17:37:49 +0000

Today, I'll go over the steps needed to create a pipeline to deploy a React app to Hostinger so that whenever you push to your Github repository, your changes will automatically be deployed to your website. This tutorial will dive deeper into deploying React apps onto Hostinger, so if you do not know how to do so, please check out my previous tutorial: Deploy React App on Hostinger.
The steps in this tutorial will be broken down into:

Create Git repository for code
Set up Git configuration on Hostinger
Configure Github to push to Hostinger
Add Github actions to your repository

1. Create Git repository for code

First thing you'll need to do is create a repo for your code on Github. Whether you choose to create a public or private repo, you'll have to do some different steps in the future, so be mindful.

Once you have the repo created, add, commit, and push your changes to the repo. There's many resources online to help you with this. But if this is your first time, the following commands should be all you need to do:

echo "# test-repo" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:sample/react.git #change to your Github repository
git push -u origin main

Once that's finished and you see your code in your repository, you're good to go to the next step!

2. Set up Git configuration on Hostinger

Next we'll set up the Git configurations for Hostinger. Back on Hostinger, you'll need to go to the GIT configuration settings for your website. So go to Hosting -> (your website) -> scroll to the Advanced section and select GIT.

First, we will go to the Create a Repository section and add your git repo (private repo's should look like git@github.com:sample/react.git and public repo's should look like https://github.com/sample/react.git). For branch, put build. The reason for this is when we push our code to Github, we want the build of the code to be sent to Hostinger, not the code itself (the last step will cover this).

If this branch does not exist, that's okay. If you currently have a branch for build, make sure you are ok with it being used to have the builds pushed to this branch for the future. Note: if you already have contents in your public_html folder, you will have to delete the contents inside, but we will quickly get everything back in there soon enough!
In the Manage Repositories section, click Auto Deployment and note the Webhook URL, since we will use it in the next step.

If your repo is private, continue with this next step, but if not you can skip to step 3.
Scroll up to the Private Git Repository and click the generate SSH Key button. Keep note of key, since we will use it in the next step.

3. Configure Github to push to Hostinger

Next, we'll set up your repository to send your builds to Hostinger whenever you push to your repo. First on Github, go to your settings on your repository and then select Webhooks. Paste the Webhook URL from the previous step into the payload URL input and leave the content type as application/x-www-form-urlencoded. You don't need to add a secret, and you can leave everything else as is (just make sure that the Just the push event option is selected. Select Add webhook and then you're almost done.

Now if your repo is private, you'll have to follow this next step, otherwise you can skip to the final part.
Now to successfully allow Hostinger to pull your build, you need to go to Deploy keys in the repo settings and paste the ssh key that was generated in the previous step. You can title it Hostinger key and it does not need write access, so you can leave the allow write access box unchecked.

Once you click Add key you're good to go to the final step.

4. Add Github action to repository

Lastly, we will set up Github Actions to build your code whenever you push to your repo. Now all you need to do is create a folder called .github/workflows from the root, and add a publish.yml file in there.

Post the following code into this file, and if you are not using the build branch, then make sure to change lines 26-27 to the name of the branch you plan to use:

name: Generate a build and push to another branch

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    name: Build and Push
    steps:
      - name: git-checkout
        uses: actions/checkout@v3

      - name: Install all dependencies
        run: npm install

      - name: Build
        run: npm run build # The build command of your project

      - name: Push
        uses: s0/git-publish-subdir-action@develop
        env:
          REPO: self
          BRANCH: build # The branch name where you want to push the assets
          FOLDER: build # The directory where your assets are generated
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # GitHub will automatically add this - you don't need to bother getting a token
          MESSAGE: "Build: ({sha}) {msg}" # The commit message

Once you add this, add, commit, and push the change.
Your pipeline should be fully set up so whenever you push a change to your main branch, this should automatically update your website on Hostinger!

If you have any comments or questions, please leave a reply or reach out to me on my portfolio!

Deploy React App on Hostinger

Mark Woodson — Sun, 07 Nov 2021 23:05:57 +0000

Today, I'll show you the steps needed to deploy a react app to Hostinger. The tutorial will be broken down into the following steps:

Create and Build React app
Configure Hostinger account for deployment
Troubleshooting

Once you complete this, I have a follow up on creating a Continuous Deployment pipeline so that you can automatically publish your changes once you push to Git. Check that out here!

1. Create and Build React app

The point of this tutorial is to mainly focus on the deployment of a React app onto Hostinger, so the app we'll create will be the default app created for a new app.

Create React App

Open your terminal and in the directory that you wish to create the app, type npx create-react-app hostinger-react-app for a new app called "hostinger-react-app" (or whatever you choose to call your app). Once it has finished installing, you should be able to run npm start in the terminal and see the following in your browser at localhost:3000:

If you're able to see the above, then you are all set to build.

Build React App

For your app to deploy correctly on Hostinger, you will need to have your app point to your domain.

Add "homepage": "https://hostinger-react-app.com" to the package.json file, so it will look like:

{
  "name": "hostinger-react-app",
  "version": "0.1.0",
  "homepage": "https://hostinger-react-app.com",
  "private": true,
  "dependencies": { 
  ...

Now run npm run build in your terminal to create the production build of your app, that will be used to deploy to Hostinger. When the build completes, you should see a build folder and this in the terminal:

If you do not see The project was built assuming it is hosted at https://hostinger-react-app.com/. (a problem that I had when first built my app), then you can configure the homepage another way. If you do see this line, you can skip to the Compress section.

Add a new file called .env at the root level of your project, so that it's at the same level of your package.json. Inside the file, add PUBLIC_URL=https://hostinger-react-app.com. Now, when you run npm run build, you should see it points the domain.

Compress

Lastly, go to you build folder and compress all the files into a zip folder. This will be needed when we add the files to Hostinger.

At this point, your app is ready to be deployed to Hostinger.

2. Configure Hostinger account for deployment

In your Hostinger panel, navigate to the Website tab and select Import Website. Select the zipped folder to upload your files into the public_html folder. Once it's finished uploading, go to the file manager to check that your files are present.

Lastly, you'll need to add a .htaccess file inside your public_html folder with the following code:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>

There are other ways to write this .htaccess file, but in my experience, this configuration makes sure that apps that use routing will work.

After that, you should be able to navigate to the domain and see your app running!

Troubleshooting

I added some troubleshooting steps in each section to make sure your on track to having your app work, but in case the app doesn't show once you're done, here's a couple more tips.

In case when you go to your domain and a page like this shows:

Navigate to the DNS Zone Editor and make sure the content of you A record is pointing to your account's IP Address (shown in the left panel on your home page).

If you're still having problems, I suggest reaching out to the Hostinger chat support, to make sure your account is set up and good to go!

If you have any questions or issues, please leave a comment!