fix: properly load env vars in create-fuels template, and add docs …

…for fuels CLI (#2051)

* try using dotenv to load env

* try removing dotenv

* fix: properly load env vars in `create-fuels` template, and add docs for fuels CLI

* add fallback values for CI

* also include `.env.local`

.changeset/tender-lamps-compete.md

@@ -0,0 +1,5 @@
+---
+"fuels": patch
+---
+
+fix: properly load env vars in `create-fuels` template, and add docs for fuels CLI

apps/create-fuels-counter-guide/fuels.config.ts

@@ -1,11 +1,14 @@
+// #region fuels-config-file-env
 import { createConfig } from 'fuels';
+import dotenv from 'dotenv';
+
+dotenv.config({
+  path: ['.env.local', '.env'],
+});
 
 export default createConfig({
   workspace: './sway-programs',
   output: './src/sway-api',
-  /*
-    This is the same value as the port specified in the `.env.local` file.
-    Please keep these values in sync.
-  */
-  fuelCorePort: 4000,
+  fuelCorePort: +(process.env.NEXT_PUBLIC_FUEL_NODE_PORT as string) || 4000,
 });
+// #endregion fuels-config-file-env

apps/create-fuels-counter-guide/package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@fuel-wallet/react": "0.15.2",
+    "dotenv": "^16.4.5",
     "fuels": "workspace:*",
     "next": "14.0.1",
     "react": "^18.2",

apps/docs/src/guide/fuels/config-file.md

@@ -166,3 +166,25 @@ If `system` binaries are absent, print a warning and use `built-in` ones instead
 Check also:
 
 - [Built-in Binaries](./binaries.md)
+
+## Loading environment variables
+
+If you want to load environment variables from a `.env` file, you can use the `dotenv` package.
+
+First, install it:
+
+::: code-group
+
+```sh [pnpm]
+pnpm install dotenv
+```
+
+```sh [npm]
+npm install dotenv
+```
+
+:::
+
+Then, you can use it in your `fuels.config.ts` file:
+
+<<< @../../../create-fuels-counter-guide/fuels.config.ts#fuels-config-file-env{ts:line-numbers}

package.json

@@ -75,7 +75,6 @@
     "compare-versions": "^6.1.0",
     "conventional-changelog-angular": "^5.0.13",
     "coverage-diff": "^3.2.0",
-    "dotenv": "^9.0.2",
     "eslint": "^8.52.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-airbnb-typescript": "^17.1.0",

packages/fuels/package.json

@@ -43,6 +43,7 @@
   "dependencies": {
     "@fuel-ts/abi-coder": "workspace:*",
     "@fuel-ts/abi-typegen": "workspace:*",
+    "@fuel-ts/account": "workspace:*",
     "@fuel-ts/address": "workspace:*",
     "@fuel-ts/contract": "workspace:*",
     "@fuel-ts/crypto": "workspace:*",
@@ -58,7 +59,6 @@
     "@fuel-ts/transactions": "workspace:*",
     "@fuel-ts/utils": "workspace:*",
     "@fuel-ts/versions": "workspace:*",
-    "@fuel-ts/account": "workspace:*",
     "bundle-require": "^4.0.1",
     "chalk": "4",
     "chokidar": "^3.5.3",

templates/nextjs/fuels.config.ts

@@ -1,11 +1,12 @@
 import { createConfig } from 'fuels';
+import dotenv from 'dotenv';
+
+dotenv.config({
+  path: ['.env.local', '.env'],
+});
 
 export default createConfig({
   workspace: './sway-programs',
   output: './src/sway-api',
-  /*
-    This is the same value as the port specified in the `.env.local` file.
-    Please keep these values in sync.
-  */
-  fuelCorePort: 4000,
+  fuelCorePort: +(process.env.NEXT_PUBLIC_FUEL_NODE_PORT as string) || 4000,
 });

templates/nextjs/package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@fuel-wallet/react": "0.15.2",
+    "dotenv": "^16.4.5",
     "fuels": "workspace:*",
     "next": "14.0.1",
     "react": "^18.2",