Deploying a GetStream Chat service into an HTML-based Mobile App

Welcome to this step-by-step guide on deploying a React chat application! This guide is specifically created for our team of engineers who are working on integrating the chat feature into an existing HTML-based mobile application using Monaca for distribution.

The chat feature is built as a standalone React application using the getstream and supabase libraries for real-time chat functionality. Given its standalone nature, the React chat application needs to be built and compiled into static assets that can be embedded into the larger HTML-based mobile application. This guide provides a clear process to achieve this integration, allowing for seamless addition of the chat feature.

The instructions detailed in this guide are derived from a specific use case scenario, where the React application is developed separately. It’s assumed that the application is ready for production, with all necessary components and dependencies accurately defined. The application’s root directory contains the following main items:

• README.md: Documentation for the application.
• node_modules: The directory where Node.js dependencies reside.
• package.json: The file that houses the list of module dependencies to install.
• src: The source directory containing the application's React components, including the primary App.js.
• public: The public folder that contains the HTML file React will render to.
• build: The directory created after running the build command which contains the compiled version of the application.

It’s crucial to ensure that all team members have a basic understanding of React.js, npm, and terminal commands before embarking on the process. With the context provided and instructions outlined, team members should be able to replicate the process and deploy the React chat application effectively within the larger mobile application. Now, let’s get started with the deployment steps!

Prerequisites

• Node.js installed on your system.
• Basic understanding of React.js, npm, and terminal commands.

Navigate to the React Application DirectoryNavigate to the React Application Directory

Open your terminal and navigate to the root directory of your React application using the cd command.

cd /path/to/your/react/app

Make sure to replace /path/to/your/react/app with the actual path to your React app.

Install Dependencies

Install all necessary dependencies for the project. These are listed in the package.json file in the root directory of the project. Install them by running:

npm install

This command should be run in the root directory of your React application (the same directory that contains the package.json file). This will install all of the dependencies listed in package.json and will create or update the node_modules folder in your project directory.

Run Tests (Optional)

If you have tests in your React application (such as those in App.test.js), you can run them now to make sure everything is functioning correctly:

npm test

This is an optional step, but it is good practice to run your tests before creating a production build of your application.

Create a Production Build of the Application

Create a production-ready build of your React application by running:

npm run build

This command should also be run in the root directory of your React application. It will create a build folder in your project directory which contains a version of your website with all of your React code compiled down to static JavaScript, HTML, and CSS files.

Rename the Build Folder

mv build chat

This command will rename the build folder to chat.

Move the chat Folder

Move the chat folder to your server's public directory or the directory from which you're serving your HTML files:

mv chat /path/to/your/html/directory/

Replace /path/to/your/html/directory/ with the actual path to the directory you're serving your HTML files from.

Update the HTML File

Now, you can reference your chat/index.html in the object element in your HTML file:

<template id="tab3">
    <ons-page>
        <object
            data="/chat/index.html"
            width="100%"
            height="100%"
            type="text/html"
        >
            DonateNow chat
        </object>
    </ons-page>
</template>

Ensure that your server is configured to serve static files from the /chat/ directory.

Troubleshooting

If you encounter any issues, check that the src or href attributes for static files (CSS, JS, images, etc.) are correctly referenced in your index.html file and adjust the paths as needed.

Congratulations! You’ve now successfully built and deployed your chat application. Other engineers should be able to follow these steps to reproduce your setup.