Need More Clarification

[Dilavar-Me4u]

Questions:

1. Can you give more detailed information/steps on how to run this react app from scratch
2. Which server link is expected in VITE_BASE_URL?
3. After giving the npm run dev command, I can only see "{"message":"Hello from VirtualSpeakz-AI!"}" this message on the localhost server, the app UI is not showing so what can be the issue?
   

[ladunjexa]

Hi Dilavar-Me4u,
First let me inform you that Vite.js none but a build tool that provide a faster development experience for modern web projects.
The application maintains a server-side and a client-side, which are actually separated by different folders, as you must have already noticed. (server and client directory).
The client directory takes care of the implementation of the app UI and communicate with the server-side (at the specific level, this is done through creating an API using the reduxjs-tookit, it's setting up a base query with the base URL from the environment, and then defining endpoints for various mutations such as postLogin, postSignUp, postAiCode, etc. It also defines functions for each of these endpoints that can be used to make requests to the API).
The server directory takes care of the server-side implementation , think of it as our website API. (at the specific level, this setting up an Express server to handle requests from a web application. It is configuring the server with various middleware, such as body-Parser, cors, and helmet. it is also settings up routes for openAI and authentication.
at the index.js that can be found in server directory you can find the app.listen() method - which binds itself with the specific host and port to bind and listen for any connections. (in our case, it will take PORT if written in .env file, otherwise, the default port is 9000. (As mentioned below)

const PORT = process.env.PORT || 9000;

Well, what is process.env.x? 'x' is a environment variable whose value is set outside the program, typically through functionality built into the os or microservices.
In our code we use dotenv which is a zero-dependency module that loades environment variables from a .env file into process.env. (In order to keep sensitive data out of your code).
but, in our client-side we use Vite (where .env files are loaded at the start of Vite) so if we want to access our environment variable we should prefix it with VITE_, for example

VITE_BASE_URL=<URL>

So now we understand at the conceptual level how the client-side and the server-side communicate with each other.

As an ai chat application, the application use OpenAI and Chat-Engine APIs (Application Programming Interfaces).
So first of all, we have to provide some keys of those APIs

1. Create OpenAI account and generate API key here
2. Create a Chat Engine account here, and create a new project - different "keys" will be created for the project automatically. we need Project ID and Private Key.

Now, create .env file for both server and client directory. let's start server-side,

PORT=<PORT>
OPENAI_API_KEY=<OPEN_AI_API_KEY>
CE_PROJECT_ID=<CHAT_ENGINE_PROJECT_ID>
CE_PRIVATE_KEY=<CHAT_ENGINE_PRIVATE_KEY>
CE_BOT_USER_NAME=<SYSTEM_AI_BOT_USER_NAME>
CE_BOT_USER_SECRET=<SYSTEM_AI_BOT_USER_SECRET>

If you dont set PORT the port will be 9000. (ofc, if you want to define a port, be aware it is not the port that used for the client-side).
OPENAI_API_KEY - set the api key from step 1 before.
CE_PROJECT_ID, CE_PRIVATE_KEY - set the keys from step 2 before.
CE_BOT_USER_NAME, CE_BOT_USER_SECRET - create account manually on your ChatEngine project (secret takes on the meaning of a user password).

Now, in our client .env file we have only to define two environment variables,

VITE_BASE_URL=<SERVER_URL>
VITE_PROJECT_ID=<CHAT_ENGINE_PROJECT_ID>

In our case, you run the web-application locally, se our VITE_BASE_URL is none but

http://localhost:<PORT>

where the PORT comes from the server .env file. (I hope you remember, If you didn't defined it, the port will be 9000 as a default).
and for the second env variable we've to do the same as we do before, write down your ChatEngine Project ID.

Now we are ready to run our application,
At both client and server folder run in Terminal:

npm i

in order to download the required packages.
At server folder, run in Terminal:

npm start

This command purpose is to run the server.
At client folder, run in Terminal:

npm run dev

btw, sorry for the delay, I saw your issue just now.
Hope everything is clearer and more understandable to you now. let me know if something went wrong
:)

[Dilavar-Me4u]

Hi Dilavar-Me4u, First let me inform you that Vite.js none but a build tool that provide a faster development experience for modern web projects. The application maintains a server-side and a client-side, which are actually separated by different folders, as you must have already noticed. (server and client directory). The client directory takes care of the implementation of the app UI and communicate with the server-side (at the specific level, this is done through creating an API using the reduxjs-tookit, it's setting up a base query with the base URL from the environment, and then defining endpoints for various mutations such as postLogin, postSignUp, postAiCode, etc. It also defines functions for each of these endpoints that can be used to make requests to the API). The server directory takes care of the server-side implementation , think of it as our website API. (at the specific level, this setting up an Express server to handle requests from a web application. It is configuring the server with various middleware, such as body-Parser, cors, and helmet. it is also settings up routes for openAI and authentication. at the index.js that can be found in server directory you can find the app.listen() method - which binds itself with the specific host and port to bind and listen for any connections. (in our case, it will take PORT if written in .env file, otherwise, the default port is 9000. (As mentioned below)

const PORT = process.env.PORT || 9000;

Well, what is process.env.x? 'x' is a environment variable whose value is set outside the program, typically through functionality built into the os or microservices. In our code we use dotenv which is a zero-dependency module that loades environment variables from a .env file into process.env. (In order to keep sensitive data out of your code). but, in our client-side we use Vite (where .env files are loaded at the start of Vite) so if we want to access our environment variable we should prefix it with VITE_, for example

VITE_BASE_URL=<URL>

So now we understand at the conceptual level how the client-side and the server-side communicate with each other.

As an ai chat application, the application use OpenAI and Chat-Engine APIs (Application Programming Interfaces). So first of all, we have to provide some keys of those APIs

1. Create OpenAI account and generate API key here
2. Create a Chat Engine account here, and create a new project - different "keys" will be created for the project automatically. we need Project ID and Private Key.

Now, create .env file for both server and client directory. let's start server-side,

PORT=<PORT>
OPENAI_API_KEY=<OPEN_AI_API_KEY>
CE_PROJECT_ID=<CHAT_ENGINE_PROJECT_ID>
CE_PRIVATE_KEY=<CHAT_ENGINE_PRIVATE_KEY>
CE_BOT_USER_NAME=<SYSTEM_AI_BOT_USER_NAME>
CE_BOT_USER_SECRET=<SYSTEM_AI_BOT_USER_SECRET>

If you dont set PORT the port will be 9000. (ofc, if you want to define a port, be aware it is not the port that used for the client-side). OPENAI_API_KEY - set the api key from step 1 before. CE_PROJECT_ID, CE_PRIVATE_KEY - set the keys from step 2 before. CE_BOT_USER_NAME, CE_BOT_USER_SECRET - create account manually on your ChatEngine project (secret takes on the meaning of a user password).

Now, in our client .env file we have only to define two environment variables,

VITE_BASE_URL=<SERVER_URL>
VITE_PROJECT_ID=<CHAT_ENGINE_PROJECT_ID>

In our case, you run the web-application locally, se our VITE_BASE_URL is none but

http://localhost:<PORT>

where the PORT comes from the server .env file. (I hope you remember, If you didn't defined it, the port will be 9000 as a default). and for the second env variable we've to do the same as we do before, write down your ChatEngine Project ID.

Now we are ready to run our application, At both client and server folder run in Terminal:

npm i

in order to download the required packages. At server folder, run in Terminal:

npm start

This command purpose is to run the server. At client folder, run in Terminal:

npm run dev

btw, sorry for the delay, I saw your issue just now. Hope everything is clearer and more understandable to you now. let me know if something went wrong :)

Thank you very much for the detailed explanation. I hope this will be helpful to many people. Great Job!!!

[ladunjexa]

My pleasure, feel free to open the issue if needed.