chore: revert back environment variable prefixes to VITE_

This commit is contained in:
Andrew Bastin
2023-08-18 19:14:15 +05:30
parent 1c35ea6e65
commit e1cbe6e003
20 changed files with 87 additions and 78 deletions

View File

@@ -47,15 +47,15 @@ RATE_LIMIT_MAX=100 # Max requests per IP
# Base URLs # Base URLs
APP_BASE_URL=http://localhost:3000 VITE_BASE_URL=http://localhost:3000
APP_SHORTCODE_BASE_URL=http://localhost:3000 VITE_SHORTCODE_BASE_URL=http://localhost:3000
APP_ADMIN_URL=http://localhost:3100 VITE_ADMIN_URL=http://localhost:3100
# Backend URLs # Backend URLs
APP_BACKEND_GQL_URL=http://localhost:3170/graphql VITE_BACKEND_GQL_URL=http://localhost:3170/graphql
APP_BACKEND_WS_URL=ws://localhost:3170/graphql VITE_BACKEND_WS_URL=ws://localhost:3170/graphql
APP_BACKEND_API_URL=http://localhost:3170/v1 VITE_BACKEND_API_URL=http://localhost:3170/v1
# Terms Of Service And Privacy Policy Links (Optional) # Terms Of Service And Privacy Policy Links (Optional)
APP_APP_TOS_LINK=https://docs.hoppscotch.io/support/terms VITE_APP_TOS_LINK=https://docs.hoppscotch.io/support/terms
APP_APP_PRIVACY_POLICY_LINK=https://docs.hoppscotch.io/support/privacy VITE_APP_PRIVACY_POLICY_LINK=https://docs.hoppscotch.io/support/privacy

View File

@@ -35,7 +35,7 @@ function runChildProcessWithPrefix(command, args, prefix) {
} }
const envFileContent = Object.entries(process.env) const envFileContent = Object.entries(process.env)
.filter(([env]) => env.startsWith("APP_")) .filter(([env]) => env.startsWith("VITE_"))
.map(([env, val]) => `${env}=${ .map(([env, val]) => `${env}=${
(val.startsWith("\"") && val.endsWith("\"")) (val.startsWith("\"") && val.endsWith("\""))
? val ? val

View File

@@ -77,7 +77,7 @@ export class AdminService {
template: 'code-your-own', template: 'code-your-own',
variables: { variables: {
inviteeEmail: inviteeEmail, inviteeEmail: inviteeEmail,
magicLink: `${process.env.APP_BASE_URL}`, magicLink: `${process.env.VITE_BASE_URL}`,
}, },
}); });
} catch (e) { } catch (e) {

View File

@@ -95,9 +95,9 @@ export class AuthService {
*/ */
private async generateRefreshToken(userUid: string) { private async generateRefreshToken(userUid: string) {
const refreshTokenPayload: RefreshTokenPayload = { const refreshTokenPayload: RefreshTokenPayload = {
iss: process.env.APP_BASE_URL, iss: process.env.VITE_BASE_URL,
sub: userUid, sub: userUid,
aud: [process.env.APP_BASE_URL], aud: [process.env.VITE_BASE_URL],
}; };
const refreshToken = await this.jwtService.sign(refreshTokenPayload, { const refreshToken = await this.jwtService.sign(refreshTokenPayload, {
@@ -127,9 +127,9 @@ export class AuthService {
*/ */
async generateAuthTokens(userUid: string) { async generateAuthTokens(userUid: string) {
const accessTokenPayload: AccessTokenPayload = { const accessTokenPayload: AccessTokenPayload = {
iss: process.env.APP_BASE_URL, iss: process.env.VITE_BASE_URL,
sub: userUid, sub: userUid,
aud: [process.env.APP_BASE_URL], aud: [process.env.VITE_BASE_URL],
}; };
const refreshToken = await this.generateRefreshToken(userUid); const refreshToken = await this.generateRefreshToken(userUid);
@@ -218,14 +218,14 @@ export class AuthService {
let url: string; let url: string;
switch (origin) { switch (origin) {
case Origin.ADMIN: case Origin.ADMIN:
url = process.env.APP_ADMIN_URL; url = process.env.VITE_ADMIN_URL;
break; break;
case Origin.APP: case Origin.APP:
url = process.env.APP_BASE_URL; url = process.env.VITE_BASE_URL;
break; break;
default: default:
// if origin is invalid by default set URL to Hoppscotch-App // if origin is invalid by default set URL to Hoppscotch-App
url = process.env.APP_BASE_URL; url = process.env.VITE_BASE_URL;
} }
await this.mailerService.sendEmail(email, { await this.mailerService.sendEmail(email, {

View File

@@ -150,7 +150,7 @@ export class TeamInvitationService {
template: 'team-invitation', template: 'team-invitation',
variables: { variables: {
invitee: creator.displayName ?? 'A Hoppscotch User', invitee: creator.displayName ?? 'A Hoppscotch User',
action_url: `${process.env.APP_BASE_URL}/join-team?id=${dbInvitation.id}`, action_url: `${process.env.VITE_BASE_URL}/join-team?id=${dbInvitation.id}`,
invite_team_name: team.name, invite_team_name: team.name,
}, },
}); });

View File

@@ -36,7 +36,7 @@ export const META_TAGS = (env: Record<string, string>): IHTMLTag[] => [
}, },
{ {
name: "image", name: "image",
content: `${env.APP_BASE_URL}/banner.png`, content: `${env.VITE_BASE_URL}/banner.png`,
}, },
// Open Graph tags // Open Graph tags
{ {
@@ -49,7 +49,7 @@ export const META_TAGS = (env: Record<string, string>): IHTMLTag[] => [
}, },
{ {
name: "og:image", name: "og:image",
content: `${env.APP_BASE_URL}/banner.png`, content: `${env.VITE_BASE_URL}/banner.png`,
}, },
// Twitter tags // Twitter tags
{ {
@@ -74,7 +74,7 @@ export const META_TAGS = (env: Record<string, string>): IHTMLTag[] => [
}, },
{ {
name: "twitter:image", name: "twitter:image",
content: `${env.APP_BASE_URL}/banner.png`, content: `${env.VITE_BASE_URL}/banner.png`,
}, },
// Add to homescreen for Chrome on Android. Fallback for PWA (handled by nuxt) // Add to homescreen for Chrome on Android. Fallback for PWA (handled by nuxt)
{ {
@@ -84,7 +84,7 @@ export const META_TAGS = (env: Record<string, string>): IHTMLTag[] => [
// Windows phone tile icon // Windows phone tile icon
{ {
name: "msapplication-TileImage", name: "msapplication-TileImage",
content: `${env.APP_BASE_URL}/icon.png`, content: `${env.VITE_BASE_URL}/icon.png`,
}, },
{ {
name: "msapplication-TileColor", name: "msapplication-TileColor",

View File

@@ -485,7 +485,7 @@ const copyRequest = async () => {
const copyShareLink = (shareLink: string) => { const copyShareLink = (shareLink: string) => {
const link = `${ const link = `${
import.meta.env.APP_SHORTCODE_BASE_URL ?? "https://hopp.sh" import.meta.env.VITE_SHORTCODE_BASE_URL ?? "https://hopp.sh"
}/r${shareLink}` }/r${shareLink}`
if (navigator.share) { if (navigator.share) {
const time = new Date().toLocaleTimeString() const time = new Date().toLocaleTimeString()

View File

@@ -106,7 +106,7 @@ const requestLabelColor = computed(() =>
const dateStamp = computed(() => shortDateTime(props.shortcode.createdOn)) const dateStamp = computed(() => shortDateTime(props.shortcode.createdOn))
const shortcodeBaseURL = const shortcodeBaseURL =
import.meta.env.APP_SHORTCODE_BASE_URL ?? "https://hopp.sh" import.meta.env.VITE_SHORTCODE_BASE_URL ?? "https://hopp.sh"
const copyShortcode = (codeID: string) => { const copyShortcode = (codeID: string) => {
copyToClipboard(`${shortcodeBaseURL}/r/${codeID}`) copyToClipboard(`${shortcodeBaseURL}/r/${codeID}`)

View File

@@ -28,9 +28,9 @@ import { platform } from "~/platform"
// TODO: Implement caching // TODO: Implement caching
const BACKEND_GQL_URL = const BACKEND_GQL_URL =
import.meta.env.APP_BACKEND_GQL_URL ?? "https://api.hoppscotch.io/graphql" import.meta.env.VITE_BACKEND_GQL_URL ?? "https://api.hoppscotch.io/graphql"
const BACKEND_WS_URL = const BACKEND_WS_URL =
import.meta.env.APP_BACKEND_WS_URL ?? "wss://api.hoppscotch.io/graphql" import.meta.env.VITE_BACKEND_WS_URL ?? "wss://api.hoppscotch.io/graphql"
type GQLOpType = "query" | "mutation" | "subscription" type GQLOpType = "query" | "mutation" | "subscription"
/** /**

View File

@@ -29,7 +29,7 @@ const getProxyPayload = (
let payload: ProxyPayloadType = { let payload: ProxyPayloadType = {
...req, ...req,
wantsBinary: true, wantsBinary: true,
accessToken: import.meta.env.APP_PROXYSCOTCH_ACCESS_TOKEN ?? "", accessToken: import.meta.env.VITE_PROXYSCOTCH_ACCESS_TOKEN ?? "",
} }
if (payload.data instanceof FormData) { if (payload.data instanceof FormData) {

View File

@@ -52,17 +52,17 @@ function initSentry(dsn: string, router: Router, app: App) {
Sentry.init({ Sentry.init({
app, app,
dsn, dsn,
release: import.meta.env.APP_SENTRY_RELEASE_TAG ?? undefined, release: import.meta.env.VITE_SENTRY_RELEASE_TAG ?? undefined,
environment: APP_IS_IN_DEV_MODE environment: APP_IS_IN_DEV_MODE
? "dev" ? "dev"
: import.meta.env.APP_SENTRY_ENVIRONMENT, : import.meta.env.VITE_SENTRY_ENVIRONMENT,
integrations: [ integrations: [
new BrowserTracing({ new BrowserTracing({
routingInstrumentation: Sentry.vueRouterInstrumentation( routingInstrumentation: Sentry.vueRouterInstrumentation(
getInstrumentationVueRouter(router) getInstrumentationVueRouter(router)
), ),
// TODO: We may want to limit this later on // TODO: We may want to limit this later on
tracingOrigins: [new URL(import.meta.env.APP_BACKEND_GQL_URL).origin], tracingOrigins: [new URL(import.meta.env.VITE_BACKEND_GQL_URL).origin],
}), }),
], ],
tracesSampleRate: 0.8, tracesSampleRate: 0.8,
@@ -175,22 +175,22 @@ function subscribeForAppDataTags() {
export default <HoppModule>{ export default <HoppModule>{
onRouterInit(app, router) { onRouterInit(app, router) {
if (!import.meta.env.APP_SENTRY_DSN) { if (!import.meta.env.VITE_SENTRY_DSN) {
console.log( console.log(
"Sentry tracing is not enabled because 'APP_SENTRY_DSN' env is not defined" "Sentry tracing is not enabled because 'VITE_SENTRY_DSN' env is not defined"
) )
return return
} }
if (settingsStore.value.TELEMETRY_ENABLED) { if (settingsStore.value.TELEMETRY_ENABLED) {
initSentry(import.meta.env.APP_SENTRY_DSN, router, app) initSentry(import.meta.env.VITE_SENTRY_DSN, router, app)
} }
settingsStore.subject$.subscribe(({ TELEMETRY_ENABLED }) => { settingsStore.subject$.subscribe(({ TELEMETRY_ENABLED }) => {
if (!TELEMETRY_ENABLED && sentryActive) { if (!TELEMETRY_ENABLED && sentryActive) {
deinitSentry() deinitSentry()
} else if (TELEMETRY_ENABLED && !sentryActive) { } else if (TELEMETRY_ENABLED && !sentryActive) {
initSentry(import.meta.env.APP_SENTRY_DSN!, router, app) initSentry(import.meta.env.VITE_SENTRY_DSN!, router, app)
} }
}) })

View File

@@ -2,30 +2,30 @@
// Environment Variables Intellisense // Environment Variables Intellisense
interface ImportMetaEnv { interface ImportMetaEnv {
readonly APP_GA_ID: string readonly VITE_GA_ID: string
readonly APP_GTM_ID: string readonly VITE_GTM_ID: string
readonly APP_API_KEY: string readonly VITE_API_KEY: string
readonly APP_AUTH_DOMAIN: string readonly VITE_AUTH_DOMAIN: string
readonly APP_DATABASE_URL: string readonly VITE_DATABASE_URL: string
readonly APP_PROJECT_ID: string readonly VITE_PROJECT_ID: string
readonly APP_STORAGE_BUCKET: string readonly VITE_STORAGE_BUCKET: string
readonly APP_MESSAGING_SENDER_ID: string readonly VITE_MESSAGING_SENDER_ID: string
readonly APP_APP_ID: string readonly VITE_APP_ID: string
readonly APP_MEASUREMENT_ID: string readonly VITE_MEASUREMENT_ID: string
readonly APP_BASE_URL: string readonly VITE_BASE_URL: string
readonly APP_SHORTCODE_BASE_URL: string readonly VITE_SHORTCODE_BASE_URL: string
readonly APP_BACKEND_GQL_URL: string readonly VITE_BACKEND_GQL_URL: string
readonly APP_BACKEND_WS_URL: string readonly VITE_BACKEND_WS_URL: string
readonly APP_SENTRY_DSN?: string readonly VITE_SENTRY_DSN?: string
readonly APP_SENTRY_ENVIRONMENT?: string readonly VITE_SENTRY_ENVIRONMENT?: string
readonly APP_SENTRY_RELEASE_TAG?: string readonly VITE_SENTRY_RELEASE_TAG?: string
readonly APP_PROXYSCOTCH_ACCESS_TOKEN?: string readonly VITE_PROXYSCOTCH_ACCESS_TOKEN?: string
} }
interface ImportMeta { interface ImportMeta {

View File

@@ -3,7 +3,7 @@ import { execSync } from "child_process"
import fs from "fs" import fs from "fs"
const envFileContent = Object.entries(process.env) const envFileContent = Object.entries(process.env)
.filter(([env]) => env.startsWith("APP_")) .filter(([env]) => env.startsWith("VITE_"))
.map( .map(
([env, val]) => ([env, val]) =>
`${env}=${val.startsWith('"') && val.endsWith('"') ? val : `"${val}"`}` `${env}=${val.startsWith('"') && val.endsWith('"') ? val : `"${val}"`}`

View File

@@ -17,21 +17,23 @@ const currentUser$ = new BehaviorSubject<HoppUser | null>(null)
export const probableUser$ = new BehaviorSubject<HoppUser | null>(null) export const probableUser$ = new BehaviorSubject<HoppUser | null>(null)
async function logout() { async function logout() {
await axios.get(`${import.meta.env.APP_BACKEND_API_URL}/auth/logout`, { await axios.get(`${import.meta.env.VITE_BACKEND_API_URL}/auth/logout`, {
withCredentials: true, withCredentials: true,
}) })
} }
async function signInUserWithGithubFB() { async function signInUserWithGithubFB() {
window.location.href = `${import.meta.env.APP_BACKEND_API_URL}/auth/github` window.location.href = `${import.meta.env.VITE_BACKEND_API_URL}/auth/github`
} }
async function signInUserWithGoogleFB() { async function signInUserWithGoogleFB() {
window.location.href = `${import.meta.env.APP_BACKEND_API_URL}/auth/google` window.location.href = `${import.meta.env.VITE_BACKEND_API_URL}/auth/google`
} }
async function signInUserWithMicrosoftFB() { async function signInUserWithMicrosoftFB() {
window.location.href = `${import.meta.env.APP_BACKEND_API_URL}/auth/microsoft` window.location.href = `${
import.meta.env.VITE_BACKEND_API_URL
}/auth/microsoft`
} }
async function getInitialUserDetails() { async function getInitialUserDetails() {
@@ -51,7 +53,7 @@ async function getInitialUserDetails() {
message: string message: string
}> }>
}>( }>(
`${import.meta.env.APP_BACKEND_GQL_URL}`, `${import.meta.env.VITE_BACKEND_GQL_URL}`,
{ {
query: `query Me { query: `query Me {
me { me {
@@ -145,7 +147,7 @@ async function setInitialUser() {
async function refreshToken() { async function refreshToken() {
const res = await axios.get( const res = await axios.get(
`${import.meta.env.APP_BACKEND_API_URL}/auth/refresh`, `${import.meta.env.VITE_BACKEND_API_URL}/auth/refresh`,
{ {
withCredentials: true, withCredentials: true,
} }
@@ -164,7 +166,7 @@ async function refreshToken() {
async function sendMagicLink(email: string) { async function sendMagicLink(email: string) {
const res = await axios.post( const res = await axios.post(
`${import.meta.env.APP_BACKEND_API_URL}/auth/signin`, `${import.meta.env.VITE_BACKEND_API_URL}/auth/signin`,
{ {
email, email,
}, },
@@ -282,7 +284,7 @@ export const def: AuthPlatformDef = {
const deviceIdentifier = getLocalConfig("deviceIdentifier") const deviceIdentifier = getLocalConfig("deviceIdentifier")
await axios.post( await axios.post(
`${import.meta.env.APP_BACKEND_API_URL}/auth/verify`, `${import.meta.env.VITE_BACKEND_API_URL}/auth/verify`,
{ {
token: token, token: token,
deviceIdentifier, deviceIdentifier,

View File

@@ -19,9 +19,10 @@ import Unfonts from "unplugin-fonts/vite"
import legacy from "@vitejs/plugin-legacy" import legacy from "@vitejs/plugin-legacy"
import ImportMetaEnv from "@import-meta-env/unplugin" import ImportMetaEnv from "@import-meta-env/unplugin"
const ENV = loadEnv("development", path.resolve(__dirname, "../../"), ["APP_"]) const ENV = loadEnv("development", path.resolve(__dirname, "../../"), ["VITE_"])
export default defineConfig({ export default defineConfig({
envPrefix: process.env.HOPP_ALLOW_RUNTIME_ENV ? "VITE_BUILDTIME_" : "VITE_",
envDir: path.resolve(__dirname, "../../"), envDir: path.resolve(__dirname, "../../"),
// TODO: Migrate @hoppscotch/data to full ESM // TODO: Migrate @hoppscotch/data to full ESM
define: { define: {
@@ -85,7 +86,7 @@ export default defineConfig({
nuxtStyle: true, nuxtStyle: true,
allowRobots: true, allowRobots: true,
dest: ".sitemap-gen", dest: ".sitemap-gen",
hostname: ENV.APP_BASE_URL, hostname: ENV.VITE_BASE_URL,
}) })
}, },
}), }),

View File

@@ -3,7 +3,7 @@ import { execSync } from "child_process"
import fs from "fs" import fs from "fs"
const envFileContent = Object.entries(process.env) const envFileContent = Object.entries(process.env)
.filter(([env]) => env.startsWith("APP_")) .filter(([env]) => env.startsWith("VITE_"))
.map(([env, val]) => `${env}=${ .map(([env, val]) => `${env}=${
(val.startsWith("\"") && val.endsWith("\"")) (val.startsWith("\"") && val.endsWith("\""))
? val ? val

View File

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

View File

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

View File

@@ -14,6 +14,10 @@ import ImportMetaEnv from "@import-meta-env/unplugin"
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
envPrefix:
process.env.HOPP_ALLOW_RUNTIME_ENV
? "VITE_BUILDTIME_"
: "VITE_",
server: { server: {
port: 3100, port: 3100,
}, },

View File

@@ -2,6 +2,8 @@ FROM node:18-bookworm as base_builder
WORKDIR /usr/src/app WORKDIR /usr/src/app
ENV HOPP_ALLOW_RUNTIME_ENV=true
RUN npm install -g pnpm RUN npm install -g pnpm
COPY pnpm-lock.yaml . COPY pnpm-lock.yaml .
RUN pnpm fetch RUN pnpm fetch