ChatGPT auto deploy React app — Part 1

Project goal:

Using ChatGPT to generate code snippets is a straightforward process. Simply prompt us with a request like “Write me code to do X Y Z,” and we’ll provide you with a neatly formatted code snippet that follows standard coding conventions.

For instance, if you were to ask us to create a React component that displays a month view of a calendar with each week appearing in a row, we could generate a code snippet that looks something like this:

import React from 'react';

class MonthCalendar extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      month: props.month,
      year: props.year,
    };
  }

  render() {
    const { month, year } = this.state;
    const weeksInMonth = getWeeksInMonth(month, year);

    return (
      <div>
        <h1>{`${month} ${year}`}</h1>
        {weeksInMonth.map((week, index) => (
          <div key={index} className="week">
            {week.map((day, index) => (
              <div key={index} className="day">
                {day.date}
              </div>
            ))}
          </div>
        ))}
      </div>
    );
  }
}

function getWeeksInMonth(month, year) {
  const weeks = [];
  const firstDayOfMonth = new Date(year, month, 1);
  const lastDayOfMonth = new Date(year, month + 1, 0);
  let currentWeek = [];

  for (let i = 1; i <= lastDayOfMonth.getDate(); i++) {
    const currentDate = new Date(year, month, i);
    const currentDay = {
      date: i,
      isToday: isToday(currentDate),
    };
    currentWeek.push(currentDay);

    if (currentDate.getDay() === 6 || i === lastDayOfMonth.getDate()) {
      weeks.push(currentWeek);
      currentWeek = [];
    }
  }

  return weeks;
}

function isToday(date) {
  const today = new Date();
  return (
    date.getDate() === today.getDate() &&
    date.getMonth() === today.getMonth() &&
    date.getFullYear() === today.getFullYear()
  );
}

This code snippet will produce a component that looks similar to the screenshot below.

My goal is to create a script that can utilize ChatGPT to fetch a React component and subsequently deploy it as a functional link on the cloud. I have tested the current version of the script on macOS, and it runs smoothly. You can view the script on Github.

The current script follows these steps:

1. Establishing an OpenAI client with an API key.
2. Including specific criteria for generating the component code when sending the prompt, as you can see in the snippet below.
3. Copying the received code into the React Create App folder.
4. Executing the build command.
5. Deploying to S3.
6. The script contains some rudimentary testing using Cypress, although it’s not utilized extensively.
7. To facilitate tracking of previous components, the script maintains a log of received code history.

const reactSpecs = [
        'component name should be App like this: const App = () => {',
        'should be set with export default App',
        'only return code for component and the first react import. no need the react-dom import',
        'the react code should have import React, { useState, useEffect } from "react" and use the react hook setState',
    ]

Current challenge:

The challenge currently with the script is that it’s difficult to keep track of different versions of previous prompts. Sometimes, even for a simple component. Also, sometimes the script needs to be run a few times to fix basic JavaScript errors.

Demo:

You can see how this command creates a calendar using the prompt ‘Create a React component that displays a month view of a calendar. Each week should be in a separate table row’.

Here’s another example — creating a list of companies using Faker API:”

Future improvements:

In the second part of this article, I aim to set some goals to improve the project.

• Create a Cypress test to open the bucket link and check console for JavaScript errors. Notify the ChatGPT API with component code and error message if JavaScript errors are detected, then deploy and retest the corrected code in the browser.
• Refactor the script’s code to work on AWS Lambda for better efficiency and scalability.
• Allow the front-end to send the application description from the Lambda and choose between overriding the previous bucket or creating a new one.
• Implement a navigation system in the front-end that enables to browse previous versions of received components and bucket links.

Summary:

Although the script is an option, there may be more effective ways to tackle this challenge.

If you have any suggestions or recommendations on how to automatically render apps with ChatGPT prompts, I would love to hear them.

Thanks for reading!