# Fullmetal Chat Example

Try Fullmetal Chat—a cool chat demo on the web! It uses FullMetal for instant, smart conversations. Easy and fun—experience it now! Dive into the demo—unleash the power of Fullmetal Chat now [Github](https://github.com/m0dE/fullmetal-chat-example.git)🌐✨

1. **Clone the following repository**<br>

   ```
   git clone https://github.com/m0dE/fullmetal-chat-example.git
   ```

   \
   Clone the repository to your local machine, then create the `.env` file in the root directory of the project<br>

2. **Install NPM Packages**<br>

   ```
     npm install
   ```

3. **Enter your API key (**[**How to obtain it**](https://fullmetal.gitbook.io/docs/getting-an-api-key)**)**\
   \
   Create the `FULLMETAL_API_KEY` variable in it, and pass your private FULLMETAL key

   ```properties
   // .env
   FULLMETAL_API_KEY=YOUR_API_KEY
   ```

   <br>

4. **How to run the project**\
   \
   Start frontend server with vite.

   ```
     npm run dev:frontend
   ```

   \
   Start backend server with nodemon.

   ```
     npm run dev:backend
   ```

   \
   To use the app with https server, you need to configure the key in vite.config.js file and use following command<br>

   <pre class="language-javascript" data-title="./vite.config.js" data-overflow="wrap" data-line-numbers><code class="lang-javascript">import { defineConfig } from 'vite';
   import react from '@vitejs/plugin-react-swc';

   // https://vitejs.dev/config/
   export default defineConfig({
     plugins: [react()],
     server: {
       port: '443',
       https: {
         key: 'key.pem',
         cert: 'cert.pem',
       },
       proxy: {
         '/socket.io': {
           target: 'YOUR_WEBSOCKET_LINK', // This is chat backend websocket address. As we are using websocket connection between chat-frontend and chat-backend, we need to configure this proxy in order to make it work
           ws: true,
         },
       },
     },
   });

   </code></pre>

   <br>

   ```
     npm run dev:secure:backend
   ```

   \
   For this chat app, we have used [socket.io](https://www.npmjs.com/package/socket.io) in backend and [socket.io-client](https://www.npmjs.com/package/socket.io-client) on frontend. You need to configure the /socket.io/ proxy in vite.config.js file.<br>

5. **Enjoy using the app!** :thumbsup:\
   \
   If everything goes as planned, the app should be running at <http://localhost:5173> and the following page should load.\ <br>

   <figure><img src="https://111965121-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcnI6iPRcNGrMA91LczgM%2Fuploads%2F9RR733fsk7BjVEHkPDzk%2Fimage.png?alt=media&#x26;token=46eda8e6-b4c4-45c5-8729-9c9f8b4bdf3c" alt=""><figcaption></figcaption></figure>
