feat(docs): add env docs for numbers and booleans

Author: yjose

docs/src/content/docs/getting-started/environment-vars-config.mdx

@@ -69,7 +69,13 @@ const _buildTimeEnv = {
 NEW_ENV_VAR=my-new-var
 ```
 
-4. The new environment variable is now ready to use in your project. You can access it in your code using the `Env` object, like this:
+4. Make sure to run `pnpm prebuild` to load the new values.
+
+```bash
+pnpm prebuild
+```
+
+5. The new environment variable is now ready to use in your project. You can access it in your code using the `Env` object, like this:
 
 ```ts title="client.ts"
 import { Env } from '@env';
@@ -83,7 +89,7 @@ export const client = axios.create({
 Using `import { Env } from '@env';` will import the env from the `src/core/env.js` file, which export client only env vars.
 :::
 
-5. Use `APP_ENV` to load the correct `.env` file :
+6. Use `APP_ENV` to load the correct `.env` file :
 
 ```bash
 APP_ENV=production pnpm start -cc
@@ -98,28 +104,28 @@ As mentioned earlier, `zod` is used to validate environment variables at runtime
 ```
 
 :::note[Important]
-Updating `env` files will require running `pnpm prebuild` to load the new values
+As `dotenv` handles variables as strings, you need to convert them to the correct type while reading them from the `process.env` object. check the example below for more details on how to use numbers and boolean values.
 :::
 
 ## How it works
 
 #### ✅ Validate and parse environment variables
 
-If you take a look at the `env.js` file, you will notice that the file is split into tree main parts as shown below:
+If you take a look at the `env.js` file, you will notice that the file is split into three main parts as shown below:
 
 <Code file="env.js" />
 
 **In the first part** We load the correct `.env` file based on the `APP_ENV` variable using `dotenv` package. If the `APP_ENV` variable is not defined, we default to `development`.
 
-we define some static variables for the app such as the app name, bundle id and package. While these variables can be added to the `.env` files, we recommend keeping them in the `env.js` file as they are not meant to change. To handle different app variants, you can add suffixes to these variables using the `withEnvSuffix` function.
+we define some static variables for the app such as the app name, bundle Id and package. While these variables can be added to the `.env` files, we recommend keeping them in the `env.js` file as they are not meant to change. To handle different app variants, you can add suffixes to these variables using the `withEnvSuffix` function.
 
 **In the second part**, we define the `zod` schema for the environment variables.
 
 We split the environment variables into two parts:
 
 - **Client Variables**: Variables that are safe to be exposed to the client and used in the `src` folder.
 
-- **Build Time Variables**: Variables that we don't need on the client-side and are only used in the `app.config.ts`, for example `SENTRY_AUTH` to upload the source maps to Sentry.
+- **Build Time Variables**: Variables that we don't need on the client-side and are only used in the `app.config.ts`, for example, `SENTRY_AUTH` to upload the source maps to Sentry.
 
 These schemas are used to validate the environment variables. All the environment variables should be added to the correct schema.
 
@@ -129,7 +135,7 @@ We use the `z.infer` utility to infer the environment variables' types from the
 
 #### ✅ Use and send environment variables to the client
 
-Now its easy as importing `Env` , `ClientEnv` and `withEnvSuffix` from the `./env.js` file and use inside our `app.config.ts`, and finally send client env vars to the client side using `extra` property.
+Now it's as easy as importing `Env` , `ClientEnv` and `withEnvSuffix` from the `./env.js` file and use inside our `app.config.ts`, and finally sending client env vars to the client side using `extra` property.
 
 <Code file="app.config.ts" meta="{4,8-10}" />