fix dynamic import of amplify config (#3)

Author: psprings

README.md

@@ -1,2 +1,25 @@
-# template-project
-Template for new project repositories
+# project-volunteer-platform
+
+Platform concept to connect volunteers with projects and opportunities within the Helpful community.
+
+## Getting started
+
+```shell
+npm ci
+npm run build
+npm preview
+```
+
+### Amplify considerations
+
+By default, this project will generate a mock `amplify_outputs.json` file for local development.
+
+If you would like to use a real Amplify configuration file, simply download from
+the AWS console or generate one with the following command:
+
+```shell
+npm i @amplify/backend-cli
+npx apx generate
+```
+
+Then you can run the standard build and preview commands as directed above.

mock_amplify_outputs.json

@@ -5,7 +5,8 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "prebuild": "node scripts/generate-config.cjs",
+    "build": "npm run prebuild && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "test": "vitest run --passWithNoTests"

package.json

@@ -0,0 +1,26 @@
+const fs = require("fs");
+const path = require("path");
+
+// Path to amplify_outputs.json
+const amplifyOutputsPath = path.resolve(__dirname, "../amplify_outputs.json");
+
+// Check if amplify_outputs.json exists
+if (!fs.existsSync(amplifyOutputsPath)) {
+  console.log("amplify_outputs.json not found. Generating default configuration...");
+
+  // Default configuration
+  const defaultConfig = {
+    data: {
+      url: "https://example.com/graphql",
+      aws_region: "us-east-1",
+      default_authorization_type: "AMAZON_COGNITO_USER_POOLS",
+      authorization_types: ["AMAZON_COGNITO_USER_POOLS", "AWS_IAM"],
+    },
+  };
+
+  // Write the default configuration to amplify_outputs.json
+  fs.writeFileSync(amplifyOutputsPath, JSON.stringify(defaultConfig, null, 2));
+  console.log("Default amplify_outputs.json has been generated.");
+} else {
+  console.log("amplify_outputs.json already exists. Skipping generation.");
+}

scripts/generate-config.cjs

@@ -5,25 +5,12 @@ import Dashboard from "./pages/Dashboard.tsx";
 import "./index.css";
 import { Amplify } from "aws-amplify";
 
-// Import the Amplify configuration
-// This is a workaround to avoid the error: "Cannot find module '../amplify_outputs.json' or its corresponding type declarations."
-// as we would like to avoid adding sensitive information to the repository and would like to
-// avoid maintaining long-running infrastructure for this project.
-let outputs;
-try {
-  // If you would like to generate the amplify_outputs.json file, run something like:
-  // npm i @amplify/backend-cli
-  // npx apx generate
-  outputs = require(`../amplify_outputs.json`);
-} catch (error) {
-  outputs = require("../mock_amplify_outputs.json");
-}
+import outputs from "../amplify_outputs.json";
 
 Amplify.configure(outputs);
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    {/* <App /> */}
     <Dashboard />
   </React.StrictMode>
-);
+);

src/main.tsx

@@ -0,0 +1,4 @@
+declare module "*.json" {
+  const value: any;
+  export default value;
+}

src/types/global.d.ts

@@ -13,6 +13,7 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
+    "esModuleInterop": true,
 
     /* Linting */
     "strict": true,