vite.config.ts 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254
  1. import { defineConfig, loadEnv, normalizePath } from "vite"
  2. import { APP_INFO, META_TAGS } from "./meta"
  3. import { viteStaticCopy as StaticCopy } from "vite-plugin-static-copy"
  4. import generateSitemap from "vite-plugin-pages-sitemap"
  5. import HtmlConfig from "vite-plugin-html-config"
  6. import Vue from "@vitejs/plugin-vue"
  7. import VueI18n from "@intlify/vite-plugin-vue-i18n"
  8. import Components from "unplugin-vue-components/vite"
  9. import Icons from "unplugin-icons/vite"
  10. import Inspect from "vite-plugin-inspect"
  11. import WindiCSS from "vite-plugin-windicss"
  12. import { VitePWA } from "vite-plugin-pwa"
  13. import Pages from "vite-plugin-pages"
  14. import Layouts from "vite-plugin-vue-layouts"
  15. import IconResolver from "unplugin-icons/resolver"
  16. import { FileSystemIconLoader } from "unplugin-icons/loaders"
  17. import * as path from "path"
  18. import Unfonts from "unplugin-fonts/vite"
  19. import legacy from "@vitejs/plugin-legacy"
  20. import ImportMetaEnv from "@import-meta-env/unplugin"
  21. const ENV = loadEnv("development", path.resolve(__dirname, "../../"), ["VITE_"])
  22. export default defineConfig({
  23. envPrefix: process.env.HOPP_ALLOW_RUNTIME_ENV ? "VITE_BUILDTIME_" : "VITE_",
  24. envDir: path.resolve(__dirname, "../../"),
  25. // TODO: Migrate @hoppscotch/data to full ESM
  26. define: {
  27. // For 'util' polyfill required by dep of '@apidevtools/swagger-parser'
  28. "process.env": {},
  29. },
  30. server: {
  31. port: 3000,
  32. },
  33. preview: {
  34. port: 3000,
  35. },
  36. publicDir: path.resolve(__dirname, "../hoppscotch-common/public"),
  37. build: {
  38. sourcemap: true,
  39. emptyOutDir: true,
  40. rollupOptions: {
  41. maxParallelFileOps: 2,
  42. },
  43. },
  44. resolve: {
  45. alias: {
  46. // TODO: Maybe leave ~ only for individual apps and not use on common
  47. "~": path.resolve(__dirname, "../hoppscotch-common/src"),
  48. "@hoppscotch/common": "@hoppscotch/common/src",
  49. "@composables": path.resolve(
  50. __dirname,
  51. "../hoppscotch-common/src/composables"
  52. ),
  53. "@modules": path.resolve(__dirname, "../hoppscotch-common/src/modules"),
  54. "@components": path.resolve(
  55. __dirname,
  56. "../hoppscotch-common/src/components"
  57. ),
  58. "@helpers": path.resolve(__dirname, "../hoppscotch-common/src/helpers"),
  59. "@functional": path.resolve(
  60. __dirname,
  61. "../hoppscotch-common/src/helpers/functional"
  62. ),
  63. "@workers": path.resolve(__dirname, "../hoppscotch-common/src/workers"),
  64. "@platform": path.resolve(__dirname, "./src/platform"),
  65. "@lib": path.resolve(__dirname, "./src/lib"),
  66. stream: "stream-browserify",
  67. util: "util",
  68. querystring: "qs",
  69. },
  70. dedupe: ["vue"],
  71. },
  72. plugins: [
  73. Inspect(), // go to url -> /__inspect
  74. HtmlConfig({
  75. metas: META_TAGS(ENV),
  76. }),
  77. Vue(),
  78. Pages({
  79. routeStyle: "nuxt",
  80. dirs: "../hoppscotch-common/src/pages",
  81. importMode: "async",
  82. onRoutesGenerated(routes) {
  83. generateSitemap({
  84. routes,
  85. nuxtStyle: true,
  86. allowRobots: true,
  87. dest: ".sitemap-gen",
  88. hostname: ENV.VITE_BASE_URL,
  89. })
  90. },
  91. }),
  92. StaticCopy({
  93. targets: [
  94. {
  95. src: normalizePath(path.resolve(__dirname, "./.sitemap-gen/*")),
  96. dest: normalizePath(path.resolve(__dirname, "./dist")),
  97. },
  98. ],
  99. }),
  100. Layouts({
  101. layoutsDirs: "../hoppscotch-common/src/layouts",
  102. defaultLayout: "default",
  103. }),
  104. VueI18n({
  105. runtimeOnly: false,
  106. compositionOnly: true,
  107. include: [path.resolve(__dirname, "locales")],
  108. }),
  109. WindiCSS({
  110. root: path.resolve(__dirname, "../hoppscotch-common"),
  111. }),
  112. Components({
  113. dts: "../hoppscotch-common/src/components.d.ts",
  114. dirs: [
  115. "../hoppscotch-common/src/components",
  116. "../hoppscotch-ui/src/components",
  117. ],
  118. directoryAsNamespace: true,
  119. resolvers: [
  120. IconResolver({
  121. prefix: "icon",
  122. customCollections: ["hopp", "auth", "brands"],
  123. }),
  124. (compName: string) => {
  125. if (compName.startsWith("Hopp"))
  126. return { name: compName, from: "@hoppscotch/ui" }
  127. else return undefined
  128. },
  129. ],
  130. types: [
  131. {
  132. from: "vue-tippy",
  133. names: ["Tippy"],
  134. },
  135. ],
  136. }),
  137. Icons({
  138. compiler: "vue3",
  139. customCollections: {
  140. hopp: FileSystemIconLoader("../hoppscotch-common/assets/icons"),
  141. auth: FileSystemIconLoader("../hoppscotch-common/assets/icons/auth"),
  142. brands: FileSystemIconLoader(
  143. "../hoppscotch-common/assets/icons/brands"
  144. ),
  145. },
  146. }),
  147. VitePWA({
  148. useCredentials: true,
  149. manifest: {
  150. name: APP_INFO.name,
  151. short_name: APP_INFO.name,
  152. description: APP_INFO.shortDescription,
  153. start_url: "/?source=pwa",
  154. id: "/?source=pwa",
  155. protocol_handlers: [
  156. {
  157. protocol: "web+hoppscotch",
  158. url: "/%s",
  159. },
  160. {
  161. protocol: "web+hopp",
  162. url: "/%s",
  163. },
  164. ],
  165. background_color: APP_INFO.app.background,
  166. theme_color: APP_INFO.app.background,
  167. icons: [
  168. {
  169. src: "/icons/pwa-16x16.png",
  170. sizes: "16x16",
  171. type: "image/png",
  172. },
  173. {
  174. src: "/icons/pwa-32x32.png",
  175. sizes: "32x32",
  176. type: "image/png",
  177. },
  178. {
  179. src: "/icons/pwa-128x128.png",
  180. sizes: "128x128",
  181. type: "image/png",
  182. },
  183. {
  184. src: "/icons/pwa-192x192.png",
  185. sizes: "192x192",
  186. type: "image/png",
  187. },
  188. {
  189. src: "/icons/pwa-256x256.png",
  190. sizes: "256x256",
  191. type: "image/png",
  192. },
  193. {
  194. src: "/icons/pwa-512x512.png",
  195. sizes: "512x512",
  196. type: "image/png",
  197. },
  198. {
  199. src: "/icons/pwa-1024x1024.png",
  200. sizes: "1024x1024",
  201. type: "image/png",
  202. },
  203. ],
  204. },
  205. registerType: "prompt",
  206. workbox: {
  207. cleanupOutdatedCaches: true,
  208. maximumFileSizeToCacheInBytes: 4194304,
  209. navigateFallbackDenylist: [
  210. /robots.txt/,
  211. /sitemap.xml/,
  212. /discord/,
  213. /telegram/,
  214. /beta/,
  215. /careers/,
  216. /newsletter/,
  217. /twitter/,
  218. /github/,
  219. /announcements/,
  220. ],
  221. },
  222. }),
  223. Unfonts({
  224. fontsource: {
  225. families: [
  226. {
  227. name: "Inter Variable",
  228. variables: ["variable-full"],
  229. },
  230. {
  231. name: "Material Symbols Rounded Variable",
  232. variables: ["variable-full"],
  233. },
  234. {
  235. name: "Roboto Mono Variable",
  236. variables: ["variable-full"],
  237. },
  238. ],
  239. },
  240. }),
  241. legacy({
  242. modernPolyfills: ["es.string.replace-all"],
  243. renderLegacyChunks: false,
  244. }),
  245. process.env.HOPP_ALLOW_RUNTIME_ENV
  246. ? ImportMetaEnv.vite({
  247. example: "../../.env.example",
  248. env: "../../.env",
  249. })
  250. : [],
  251. ],
  252. })