btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

feat: updated frontend docker containers to allow for runtime environment variable definitions

Browse Source
This commit is contained in:
Andrew Bastin
2023-07-14 16:43:38 +05:30
parent 6454d83486
commit 1b1a09c675
24 changed files with 466 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/hoppscotch-sh-admin/index.html
View File

@@ -2,6 +2,9 @@
<html lang="en" data-font-size="large">
<head>
<script>
globalThis.import_meta_env = JSON.parse('"import_meta_env_placeholder"')
</script>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -14,4 +17,4 @@
<script type="module" src="/src/main.ts"></script>
</body>
</html>
</html>

3
packages/hoppscotch-sh-admin/package.json
View File

@@ -51,9 +51,12 @@
"@graphql-codegen/typescript-document-nodes": "3.0.0",
"@graphql-codegen/typescript-operations": "3.0.0",
"@graphql-codegen/urql-introspection": "2.2.1",
"@import-meta-env/cli": "^0.6.3",
"@import-meta-env/unplugin": "^0.4.8",
"@intlify/vite-plugin-vue-i18n": "^7.0.0",
"@vitejs/plugin-vue": "^3.1.0",
"@vue/compiler-sfc": "^3.2.6",
"dotenv": "^16.0.3",
"graphql-tag": "^2.12.6",
"npm-run-all": "^4.1.5",
"sass": "^1.57.1",

18
packages/hoppscotch-sh-admin/prod_run.mjs Executable file
View File

@@ -0,0 +1,18 @@
#!/usr/local/bin/node
import { execSync } from "child_process"
import fs from "fs"
const envFileContent = Object.entries(process.env)
.filter(([env]) => env.startsWith("APP_"))
.map(([env, val]) => `${env}=${
(val.startsWith("\"") && val.endsWith("\""))
? val
: `"${val}"`
}`)
.join("\n")
fs.writeFileSync("build.env", envFileContent)
execSync(`npx import-meta-env -x build.env -e build.env -p "/site/**/*"`)
fs.rmSync("build.env")

23
packages/hoppscotch-sh-admin/src/components.d.ts vendored
View File

@@ -39,5 +39,28 @@ declare module '@vue/runtime-core' {
Tippy: typeof import('vue-tippy')['Tippy'];
UsersInviteModal: typeof import('./components/users/InviteModal.vue')['default'];
UsersTable: typeof import('./components/users/Table.vue')['default'];
AppHeader: typeof import('./components/app/Header.vue')['default']
AppLogin: typeof import('./components/app/Login.vue')['default']
AppLogout: typeof import('./components/app/Logout.vue')['default']
AppModal: typeof import('./components/app/Modal.vue')['default']
AppSidebar: typeof import('./components/app/Sidebar.vue')['default']
AppToast: typeof import('./components/app/Toast.vue')['default']
DashboardMetricsCard: typeof import('./components/dashboard/MetricsCard.vue')['default']
HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary']
HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary']
HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']
HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']
HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture']
IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
TeamsAdd: typeof import('./components/teams/Add.vue')['default']
TeamsDetails: typeof import('./components/teams/Details.vue')['default']
TeamsInvite: typeof import('./components/teams/Invite.vue')['default']
TeamsMembers: typeof import('./components/teams/Members.vue')['default']
TeamsPendingInvites: typeof import('./components/teams/PendingInvites.vue')['default']
TeamsTable: typeof import('./components/teams/Table.vue')['default']
Tippy: typeof import('vue-tippy')['Tippy']
UsersInviteModal: typeof import('./components/users/InviteModal.vue')['default']
UsersTable: typeof import('./components/users/Table.vue')['default']
}
}

26
packages/hoppscotch-sh-admin/src/helpers/auth.ts
View File

@@ -55,27 +55,27 @@ const currentUser$ = new BehaviorSubject<HoppUser | null>(null);
export const probableUser$ = new BehaviorSubject<HoppUser | null>(null);
async function logout() {
await axios.get(`${import.meta.env.VITE_BACKEND_API_URL}/auth/logout`, {
await axios.get(`${import.meta.env.APP_BACKEND_API_URL}/auth/logout`, {
withCredentials: true,
});
}
async function signInUserWithGithubFB() {
window.location.href = `${
import.meta.env.VITE_BACKEND_API_URL
}/auth/github?redirect_uri=${import.meta.env.VITE_ADMIN_URL}`;
import.meta.env.APP_BACKEND_API_URL
}/auth/github?redirect_uri=${import.meta.env.APP_ADMIN_URL}`;
}
async function signInUserWithGoogleFB() {
window.location.href = `${
import.meta.env.VITE_BACKEND_API_URL
}/auth/google?redirect_uri=${import.meta.env.VITE_ADMIN_URL}`;
import.meta.env.APP_BACKEND_API_URL
}/auth/google?redirect_uri=${import.meta.env.APP_ADMIN_URL}`;
}
async function signInUserWithMicrosoftFB() {
window.location.href = `${
import.meta.env.VITE_BACKEND_API_URL
}/auth/microsoft?redirect_uri=${import.meta.env.VITE_ADMIN_URL}`;
import.meta.env.APP_BACKEND_API_URL
}/auth/microsoft?redirect_uri=${import.meta.env.APP_ADMIN_URL}`;
}
async function getInitialUserDetails() {
@@ -95,7 +95,7 @@ async function getInitialUserDetails() {
message: string;
}>;
}>(
`${import.meta.env.VITE_BACKEND_GQL_URL}`,
`${import.meta.env.APP_BACKEND_GQL_URL}`,
{
query: `query Me {
me {
@@ -189,7 +189,7 @@ async function setInitialUser() {
async function refreshToken() {
const res = await axios.get(
`${import.meta.env.VITE_BACKEND_API_URL}/auth/refresh`,
`${import.meta.env.APP_BACKEND_API_URL}/auth/refresh`,
{
withCredentials: true,
}
@@ -208,7 +208,7 @@ async function refreshToken() {
async function elevateUser() {
const res = await axios.get(
`${import.meta.env.VITE_BACKEND_API_URL}/auth/verify/admin`,
`${import.meta.env.APP_BACKEND_API_URL}/auth/verify/admin`,
{
withCredentials: true,
}
@@ -219,7 +219,7 @@ async function elevateUser() {
async function sendMagicLink(email: string) {
const res = await axios.post(
`${import.meta.env.VITE_BACKEND_API_URL}/auth/signin?origin=admin`,
`${import.meta.env.APP_BACKEND_API_URL}/auth/signin?origin=admin`,
{
email,
},
@@ -337,7 +337,7 @@ export const auth = {
const deviceIdentifier = getLocalConfig('deviceIdentifier');
await axios.post(
`${import.meta.env.VITE_BACKEND_API_URL}/auth/verify`,
`${import.meta.env.APP_BACKEND_API_URL}/auth/verify`,
{
token: token,
deviceIdentifier,
@@ -383,7 +383,7 @@ export const auth = {
await this.signInWithEmailLink(deviceIdentifier, window.location.href);
removeLocalConfig('deviceIdentifier');
window.location.href = import.meta.env.VITE_ADMIN_URL;
window.location.href = import.meta.env.APP_ADMIN_URL;
}
},
};

2
packages/hoppscotch-sh-admin/src/main.ts
View File

@@ -20,7 +20,7 @@ import { auth } from './helpers/auth';
const app = createApp(App).use(
urql,
createClient({
url: import.meta.env.VITE_BACKEND_GQL_URL,
url: import.meta.env.APP_BACKEND_GQL_URL,
requestPolicy: 'network-only',
fetchOptions: () => {
return {

8
packages/hoppscotch-sh-admin/vite.config.ts
View File

@@ -10,10 +10,10 @@ import Pages from 'vite-plugin-pages';
import Layouts from 'vite-plugin-vue-layouts';
import VueI18n from '@intlify/vite-plugin-vue-i18n';
import path from 'path';
import ImportMetaEnv from "@import-meta-env/unplugin"
// https://vitejs.dev/config/
export default defineConfig({
envDir: path.resolve(__dirname, '../../'),
server: {
port: 3100,
},
@@ -85,7 +85,11 @@ export default defineConfig({
variables: ["variable-full"],
},
],
},
}
}),
ImportMetaEnv.vite({
example: "../../.env.example",
env: "../../.env",
}),
],
});