chore: move credentials to env

Author: SkySails

examples/getting-started/.env.example

@@ -0,0 +1,2 @@
+NG_CLIENT_ID=<YOUR_NAVIGRAPH_CLIENT_ID>
+NG_CLIENT_SECRET=<YOUR_NAVIGRAPH_CLIENT_SECRET>

examples/getting-started/.gitignore

@@ -1,15 +1,9 @@
 # Logs
-logs
-*.log
-npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
 
 node_modules
 dist
-dist-ssr
 *.local
 
 # Editor directories and files

examples/getting-started/README.md

@@ -1,3 +1,34 @@
 # Navigraph SDK Example
 
-WIP - more coming soon
+## Installation
+
+Clone this repository to your local machine:
+
+```bash
+git clone https://github.com/Navigraph/navigraph-js-sdk.git
+
+cd navigraph-js-sdk/examples/getting-started
+```
+
+Install project dependencies using Yarn:
+
+```bash
+yarn
+```
+
+Create an `.env.local` file in the root of your project and add the following environment variables:
+
+```env
+NG_CLIENT_ID=your_client_id
+NG_CLIENT_SECRET=your_client_secret
+```
+
+Make sure to replace `your_client_id` and `your_client_secret` with your real credentials. These variables are required for the project to function correctly.
+
+## Running the Project
+
+To start the development server, run the following command:
+
+```bash
+yarn dev
+```

examples/getting-started/src/lib/navigraph.ts

@@ -1,18 +1,18 @@
-import { initializeApp, Scope, NavigraphApp } from "@navigraph/app";
-import { getAuth } from "@navigraph/auth";
-import { getChartsAPI } from "@navigraph/charts";
+import { initializeApp, NavigraphApp, Scope } from "@navigraph/app"
+import { getAuth } from "@navigraph/auth"
+import { getChartsAPI } from "@navigraph/charts"
 
 const config: NavigraphApp = {
-  clientId: "<YOUR_NAVIGRAPH_CLIENT_ID>",
-  clientSecret: "<YOUR_NAVIGRAPH_CLIENT_SECRET>",
+  clientId: import.meta.env.NG_CLIENT_ID,
+  clientSecret: import.meta.env.NG_CLIENT_SECRET,
   scopes: [Scope.CHARTS, Scope.FMSDATA],
-};
+}
 
 if (config.clientId.includes("<")) {
-  alert("Please add your client credentials in lib/navigraph.ts.");
+  alert("Please add your client credentials in lib/navigraph.ts.")
 }
 
-initializeApp(config);
+initializeApp(config)
 
-export const auth = getAuth();
-export const charts = getChartsAPI();
+export const auth = getAuth()
+export const charts = getChartsAPI()

examples/getting-started/src/vite-env.d.ts

@@ -1 +1,10 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly NG_CLIENT_ID: string
+  readonly NG_CLIENT_SECRET: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

examples/getting-started/vite.config.ts

@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import react from "@vitejs/plugin-react"
+import { defineConfig } from "vite"
 
-// https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  envPrefix: "NG_",
 })