GitHub Codespace & Serverless Backend

Developing and deploying serverless backends using GitHub Codespaces provides a cloud-hosted, pre-configured environment that eliminates local setup overhead. More importantly, having a backend is essential for handling critical aspects such as security, authentication, and data protection.

A frontend-only application exposes sensitive logic and API keys to users, making it vulnerable to misuse and attacks. By introducing a backend, you can securely manage requests, validate user input, protect credentials, and enforce access control. This separation ensures that sensitive operations — such as database access, authentication, and business logic — are handled in a controlled and secure environment rather than being exposed in the client-side code.

Let’s Begin

1. Log in to your GitHub account and create a new repository.

Click “new” button

2. Enter a name for your repository, then click “Create repository.”

3. Create a README.md file to initialize the project and make the “Code” button visible.

Click the “creating a new file”

Name it README.md, type any text

Click the “commit changes”

4. After the commit is complete, the “Code” button will appear. Click the “Code” button to proceed.

5. A Codespaces popup will appear. Click “Create codespace on main” to proceed.

6. Your Codespace will open as an online Visual Studio Code (VS Code) IDE, allowing you to write, edit, and run your code directly in the browser.

7. Next, we will install React JS, Tailwind CSS, and DaisyUI.

In the Terminal view, run the following command to create a new Vite project:

npm create vite@latest my-project

Then follow the prompts:

• Select React
• Choose JavaScript
• Select Install with npm (press Enter)

This will set up your React project.

8. Vite will start a development server so you can preview your app, and a new port will be opened automatically.

Get Dr. Zainal Abdul Kahar’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Go to the Ports view (labeled “1”), where you will see a newly assigned port. In this example, it is 5173, though the number may vary. Click on the forwarded address (e.g., https://<random-text>...) to open and view your application output.

9. The link will open your React JS application powered by Vite, as shown below. Any changes you make to the code will be automatically reflected on this page in real time.

10. In the CSM3401 Codespace, you will see a folder named my-project that has been created.

11. To install Tailwind CSS, first open a new Terminal. Then, change the directory to your project folder (my-project) before running the installation commands.

Click this icon to open new Terminal

12. Type “cd my-project” to change the directory to the react js project

13. In the my-project directory, run the following command in the Terminal and press Enter to install the required packages:

npm install tailwindcss @tailwindcss/vite

13. After that, locate the vite.config.js file and add the Tailwind CSS import along with the tailwindcss() plugin as shown below:

14. Next, we need to install DaisyUI. Open the Terminal, then run the following command:

npm i -D daisyui@latest

15. Locate the App.css file and add the following lines at the very beginning of the file:

@import "tailwindcss";
@plugin "daisyui";

16. If an error occurs, locate the daisyui.css file in the following path: my-project → node_modules → daisyui.css. Rename it to daisyuibackup.css, then refresh the page—the error should disappear.

Error due to Daisyui package

Rename daisyui.css to daisyuibackup.css

17. We have completed setting up React JS, Tailwind CSS, and DaisyUI in Codespaces. Now, to prepare the backend, proceed to the Google Cloud Console.

open https://console.cloud.google.com

18. Create a new project, then navigate to and select Cloud Run from the available services.

19. Once opened, you will be presented with several runtime options. Select Node.js as your development environment.

20. Enter a suitable service name, then choose the asia-southeast region for deployment.

21. Make the service publicly accessible by selecting “Allow public access.”

22. Click “Create” to start the server.

22. Once the environment is created, you will see your source code workspace. You can now begin developing your backend from here.

In the functions.http file, add the following line to enable CORS:

res.set("Access-Control-Allow-Origin", "*");

23. Copy the link to be used at the codespace

24. Go back to your Codespace and locate the App.jsx file in the following directory: my-project → src → App.jsx.

25. Replace the contents of App.jsx with the following code. In the fetch section, make sure to update the URL with the endpoint you generated from Cloud Run.

import { useEffect, useState } from "react";

function App() {
  const [data, setData] = useState("");

  useEffect(() => {
    async function fetchData() {
      try {
        const res = await fetch(
          "https://csm3401-759274578379.asia-southeast2.run.app"
        );
        const text = await res.text();
        console.log(text);
        setData(text);
      } catch (err) {
        console.error(err);
      }
    }

    fetchData();
  }, []);

  return (
    <div>
      <h1>Backend Response:</h1>
      <div>{data}</div>
    </div>
  );
}

export default App;

26. Refresh the output URL, and you should see the React JS web app successfully call Cloud Run and display the message.

We have now completed the process of creating a React JS web application using Codespaces, without requiring you to set up any development environment on your local computer. This approach allows you to start building and running your application directly in the cloud, making the setup much faster and more convenient. It also means you are not limited to a desktop or laptop — you can easily work from devices such as tablets or other portable devices, as long as you have a browser and internet connection.