Merge pull request #118 from consensusnetworks/enhancement/apps-break…

…down

Break out web and landing apps

.github/workflows/pull_request.yml

@@ -17,21 +17,16 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
-      - name: Build common helpers
-        run: npm run build
-        working-directory: common/helpers
+      - name: Build helpers
+        run: npm run build --workspace @casimir/helpers
 
-      - name: Build website app
-        run: npm run build
-        working-directory: apps/website
+      - name: Build landing app
+        run: npm run build --workspace @casimir/landing
         env:
           PUBLIC_STAGE: ${{ env.STAGE }}
 
       - name: Build users service
-        run: npm run build
-        working-directory: services/users
+        run: npm run build --workspace @casimir/users
 
       - name: Test cdk stacks
-        run: |
-          npm run test
-        working-directory: infrastructure/cdk
+        run: npm run test --workspace @casimir/cdk

.github/workflows/push.yml

@@ -37,19 +37,17 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
-      - name: Build common helpers
+      - name: Build helpers
         run: npm run build
         working-directory: common/helpers
 
-      - name: Build website app
-        run: npm run build
-        working-directory: apps/website
+      - name: Build landing app
+        run: npm run build --workspace @casimir/landing
         env:
           PUBLIC_STAGE: ${{ env.STAGE }}
 
       - name: Build users service
-        run: npm run build
-        working-directory: services/users
+        run: npm run build --workspace @casimir/users
 
       - name: Deploy cdk infrastructure
         run: npm run deploy

.github/workflows/release.yml

@@ -37,17 +37,14 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
-      - name: Build common helpers
-        run: npm run build
-        working-directory: common/helpers
+      - name: Build helpers
+        run: npm run build --workspace @casimir/helpers
 
-      - name: Build website app
-        run: npm run build
-        working-directory: apps/website
+      - name: Build landing app
+        run: npm run build --workspace @casimir/landing
 
       - name: Build users service
-        run: npm run build
-        working-directory: services/users
+        run: npm run build --workspace @casimir/users
 
       - name: Deploy cdk infrastructure
         run: npm run deploy

README.md

@@ -70,6 +70,17 @@ You can get up and running without configuration. You can also mock local backen
 
     > 🚩 You will need the [SAM CLI](https://docs.aws.amazon.com/serverless-application-model/latest/developerguide/serverless-sam-cli-install-mac.html) for local mocking.
 
+3. The commands and flags above apply to any package in the [apps](apps/) directory. While the default app is [@casimir/web](apps/web/), you can specify others by passing a subcommand to `npm run dev`.
+
+    ```zsh
+    # @casimir/web
+    npm run dev # or
+    npm run dev:web
+
+    # @casimir/landing
+    npm run dev:landing
+    ```
+
 ### Hardhat
 
 EVM contract development is serviced through [Hardhat](https://hardhat.io/). The Hardhat development environment is configured in the [contracts/evm/hardhat.config.ts](contracts/evm/hardhat.config.ts) file.
@@ -174,7 +185,7 @@ npm install -D some-dev-dependency
 Install a workspace dependency or dev dependency.
 
 ```zsh
-npm install some-dependency --workspace @casimir/workspace-name # i.e. @casimir/website
+npm install some-dependency --workspace @casimir/workspace-name # i.e. @casimir/web
 # or
 npm install -D some-dev-dependency --workspace @casimir/workspace-name
 ```
@@ -203,7 +214,8 @@ Code is organized into work directories (apps, services, infrastructure – and
 ├── .github/ (workflows and issue templates)
 |   └── workflows/ (gh actions workflows)
 ├── apps/ (frontend apps)
-|   └── website/ (main web app)
+    |── landing/ (landing page app)
+|   └── web/ (main web app)
 ├── infrastructure/ (deployment resources)
 |   └── cdk/ (aws stacks)
 ├── common/ (shared code)

apps/landing/README.md

@@ -0,0 +1 @@
+# Casimir Landing App

apps/landing/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@casimir/landing",
+  "description": "Casimir landing page",
+  "private": true,
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@heroicons/vue": "^1.0.6",
+    "vue": "^3.2.25",
+    "vue-router": "^4.0.15"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^2.3.3",
+    "autoprefixer": "^10.4.7",
+    "postcss": "^8.4.14",
+    "tailwindcss": "^3.0.24",
+    "typescript": "^4.5.4",
+    "vite": "^2.9.9",
+    "vite-plugin-pages": "^0.23.0",
+    "vue-tsc": "^0.34.7"
+  }
+}

apps/landing/src/App.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import { RouterView } from 'vue-router'
+import DefaultLayout from '@/layouts/default-layout.vue'
+</script>
+
+<template>
+  <Suspense>
+    <component :is="DefaultLayout">
+      <RouterView />
+    </component>
+  </Suspense>
+</template>

apps/website/src/main.ts → apps/landing/src/main.ts

@@ -1,6 +1,4 @@
 import { createApp } from 'vue'
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
 import App from '@/App.vue'
 import '@/index.css'
 import { createRouter, createWebHistory } from 'vue-router'

apps/website/src/pages/whitepaper/index.vue → apps/landing/src/pages/whitepaper/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 
-import { ArrowLeftIcon , DownloadIcon } from '@heroicons/vue/outline'
+// import { ArrowLeftIcon , DownloadIcon } from '@heroicons/vue/outline'
 </script>
 
 <template>

apps/website/tsconfig.json → apps/landing/tsconfig.json

@@ -12,7 +12,6 @@
       "esnext",
       "dom"
     ],
-    "types": ["vite/client", "vite-plugin-pages/client"],
     "skipLibCheck": true,
     "baseUrl": ".",
     "paths": {

apps/landing/vite.config.ts

@@ -0,0 +1,36 @@
+import vue from '@vitejs/plugin-vue'
+import { UserConfig } from 'vite'
+import { fileURLToPath } from 'url'
+import * as path from 'path'
+import pages from 'vite-plugin-pages'
+
+const config: UserConfig = {
+  plugins: [
+    vue({ include: [/\.vue$/] }),
+    pages({
+      dirs: [{ dir: 'src/pages', baseRoute: '' }],
+      extensions: ['vue'],
+    }),
+  ],
+  define: {
+    'window.global': 'globalThis',
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(path.dirname(fileURLToPath(import.meta.url)), 'src'),
+      './runtimeConfig': './runtimeConfig.browser',
+    },
+    extensions: [
+      '.js',
+      '.json',
+      '.jsx',
+      '.mjs',
+      '.ts',
+      '.tsx',
+      '.vue',
+    ]
+  },
+  envPrefix: 'PUBLIC_'
+}
+
+export default config

apps/web/.gitignore

@@ -0,0 +1,24 @@
+# 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
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

apps/web/README.md

@@ -0,0 +1 @@
+# Casimir Web App

apps/web/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Casimir</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

apps/website/package.json → apps/web/package.json

@@ -1,7 +1,8 @@
 {
-  "name": "@casimir/website",
+  "name": "@casimir/web",
+  "description": "Casimir web app",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.0.1",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",

apps/web/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+}

apps/web/src/App.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+  import { RouterView } from 'vue-router'
+  import DefaultLayout from '@/layouts/default-layout.vue'
+  </script>
+
+<template>
+  <Suspense>
+    <component :is="DefaultLayout">
+      <RouterView />
+    </component>
+  </Suspense>
+</template>

apps/web/src/env.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-pages/client" />
+
+import {
+  SendMessagesCommandOutput,
+  UpdateEndpointCommandOutput
+} from '@aws-sdk/client-pinpoint'
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+
+declare type APIGatewayResponse = {
+  headers?: any
+  statusCode: number
+  body: [UpdateEndpointCommandOutput, SendMessagesCommandOutput] | any | Error
+}
+
+declare global {
+  interface Window {
+    ethereum: any;
+  }
+}

apps/web/src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/web/src/layouts/default-layout.vue

@@ -0,0 +1,17 @@
+<template>
+  <div
+    id="layout"
+  >
+    <!-- Nav -->
+    <!-- <NavBar /> -->
+
+    <!-- Page -->
+    <div id="content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+// import NavBar from '@/components/nav-bar.vue'
+</script>

apps/web/src/main.ts

@@ -0,0 +1,16 @@
+import { createApp } from 'vue'
+import App from '@/App.vue'
+import '@/index.css'
+import { createRouter, createWebHistory } from 'vue-router'
+import routes from '~pages'
+
+console.log('Creating app...', import.meta.env)
+console.log('Local mocking is', import.meta.env.PUBLIC_MOCK_ENABLED ? 'enabled' : 'disabled')
+
+const app = createApp(App)
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+app.use(router)
+app.mount('#app')

apps/web/tailwind.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+    content: [
+        './**/*.{vue,ts,js,css}'
+    ],
+    theme: {
+        extend: {
+            colors: {},
+            screens: {
+                'laptop': '450px',
+                'tablet': '450px',
+                'mobile': '450px'
+            },
+        }
+    },
+    plugins: []
+}