mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-04-14 16:40:58 -04:00
fix: load env vars correctly and set debug and linter flags to false explicitly in prod mode (#8770)
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
This commit is contained in:
Aakansha Doshi
GitHub
parent
798f5f4dfb
commit
df168a6883
2 changed files with 229 additions and 220 deletions
|
|
@ -23,3 +23,10 @@ gq6+4Ic/kJX+AD2MM7Yre2+FsOdysrmuW2Fu3ahuC1uQE7pOe1j0k7auNP0y1q53
|
||||||
PrB8Ts2LUpepWC1l7zIXFm4ViDULuyWXTEpUcHSsEH8vpd1tckjypxCwkipfZsXx
|
PrB8Ts2LUpepWC1l7zIXFm4ViDULuyWXTEpUcHSsEH8vpd1tckjypxCwkipfZsXx
|
||||||
iPszy0o0Dx2iArPfWMXlFAI9mvyFCyFC3+nSvfyAUb2C4uZgCwAuyFh/ydPF4DEE
|
iPszy0o0Dx2iArPfWMXlFAI9mvyFCyFC3+nSvfyAUb2C4uZgCwAuyFh/ydPF4DEE
|
||||||
PQIDAQAB'
|
PQIDAQAB'
|
||||||
|
|
||||||
|
# Set the below flags explicitly to false in production mode since vite loads and merges .env.local vars when running the build command
|
||||||
|
VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX=false
|
||||||
|
VITE_APP_COLLAPSE_OVERLAY=false
|
||||||
|
# Enable eslint in dev server
|
||||||
|
VITE_APP_ENABLE_ESLINT=false
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,231 +8,233 @@ import { createHtmlPlugin } from "vite-plugin-html";
|
||||||
import Sitemap from "vite-plugin-sitemap";
|
import Sitemap from "vite-plugin-sitemap";
|
||||||
import { woff2BrowserPlugin } from "../scripts/woff2/woff2-vite-plugins";
|
import { woff2BrowserPlugin } from "../scripts/woff2/woff2-vite-plugins";
|
||||||
|
|
||||||
// To load .env.local variables
|
export default defineConfig(({ mode }) => {
|
||||||
const envVars = loadEnv("", `../`);
|
// To load .env variables
|
||||||
// https://vitejs.dev/config/
|
const envVars = loadEnv(mode, `../`);
|
||||||
export default defineConfig({
|
// https://vitejs.dev/config/
|
||||||
server: {
|
return {
|
||||||
port: Number(envVars.VITE_APP_PORT || 3000),
|
server: {
|
||||||
// open the browser
|
port: Number(envVars.VITE_APP_PORT || 3000),
|
||||||
open: true,
|
// open the browser
|
||||||
},
|
open: true,
|
||||||
// We need to specify the envDir since now there are no
|
|
||||||
//more located in parallel with the vite.config.ts file but in parent dir
|
|
||||||
envDir: "../",
|
|
||||||
build: {
|
|
||||||
outDir: "build",
|
|
||||||
rollupOptions: {
|
|
||||||
output: {
|
|
||||||
assetFileNames(chunkInfo) {
|
|
||||||
if (chunkInfo?.name?.endsWith(".woff2")) {
|
|
||||||
const family = chunkInfo.name.split("-")[0];
|
|
||||||
return `fonts/${family}/[name][extname]`;
|
|
||||||
}
|
|
||||||
|
|
||||||
return "assets/[name]-[hash][extname]";
|
|
||||||
},
|
|
||||||
// Creating separate chunk for locales except for en and percentages.json so they
|
|
||||||
// can be cached at runtime and not merged with
|
|
||||||
// app precache. en.json and percentages.json are needed for first load
|
|
||||||
// or fallback hence not clubbing with locales so first load followed by offline mode works fine. This is how CRA used to work too.
|
|
||||||
manualChunks(id) {
|
|
||||||
if (
|
|
||||||
id.includes("packages/excalidraw/locales") &&
|
|
||||||
id.match(/en.json|percentages.json/) === null
|
|
||||||
) {
|
|
||||||
const index = id.indexOf("locales/");
|
|
||||||
// Taking the substring after "locales/"
|
|
||||||
return `locales/${id.substring(index + 8)}`;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
sourcemap: true,
|
// We need to specify the envDir since now there are no
|
||||||
// don't auto-inline small assets (i.e. fonts hosted on CDN)
|
//more located in parallel with the vite.config.ts file but in parent dir
|
||||||
assetsInlineLimit: 0,
|
envDir: "../",
|
||||||
},
|
build: {
|
||||||
plugins: [
|
|
||||||
Sitemap({
|
|
||||||
hostname: "https://excalidraw.com",
|
|
||||||
outDir: "build",
|
outDir: "build",
|
||||||
changefreq: "monthly",
|
rollupOptions: {
|
||||||
// its static in public folder
|
output: {
|
||||||
generateRobotsTxt: false,
|
assetFileNames(chunkInfo) {
|
||||||
}),
|
if (chunkInfo?.name?.endsWith(".woff2")) {
|
||||||
woff2BrowserPlugin(),
|
const family = chunkInfo.name.split("-")[0];
|
||||||
react(),
|
return `fonts/${family}/[name][extname]`;
|
||||||
checker({
|
}
|
||||||
typescript: true,
|
|
||||||
eslint:
|
|
||||||
envVars.VITE_APP_ENABLE_ESLINT === "false"
|
|
||||||
? undefined
|
|
||||||
: { lintCommand: 'eslint "./**/*.{js,ts,tsx}"' },
|
|
||||||
overlay: {
|
|
||||||
initialIsOpen: envVars.VITE_APP_COLLAPSE_OVERLAY === "false",
|
|
||||||
badgeStyle: "margin-bottom: 4rem; margin-left: 1rem",
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
svgrPlugin(),
|
|
||||||
ViteEjsPlugin(),
|
|
||||||
VitePWA({
|
|
||||||
registerType: "autoUpdate",
|
|
||||||
devOptions: {
|
|
||||||
/* set this flag to true to enable in Development mode */
|
|
||||||
enabled: false,
|
|
||||||
},
|
|
||||||
|
|
||||||
workbox: {
|
return "assets/[name]-[hash][extname]";
|
||||||
// don't precache fonts, locales and separate chunks
|
|
||||||
globIgnores: [
|
|
||||||
"fonts.css",
|
|
||||||
"**/locales/**",
|
|
||||||
"service-worker.js",
|
|
||||||
"**/*.chunk-*.js",
|
|
||||||
],
|
|
||||||
runtimeCaching: [
|
|
||||||
{
|
|
||||||
urlPattern: new RegExp(".+.woff2"),
|
|
||||||
handler: "CacheFirst",
|
|
||||||
options: {
|
|
||||||
cacheName: "fonts",
|
|
||||||
expiration: {
|
|
||||||
maxEntries: 1000,
|
|
||||||
maxAgeSeconds: 60 * 60 * 24 * 90, // 90 days
|
|
||||||
},
|
|
||||||
cacheableResponse: {
|
|
||||||
// 0 to cache "opaque" responses from cross-origin requests (i.e. CDN)
|
|
||||||
statuses: [0, 200],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
{
|
// Creating separate chunk for locales except for en and percentages.json so they
|
||||||
urlPattern: new RegExp("fonts.css"),
|
// can be cached at runtime and not merged with
|
||||||
handler: "StaleWhileRevalidate",
|
// app precache. en.json and percentages.json are needed for first load
|
||||||
options: {
|
// or fallback hence not clubbing with locales so first load followed by offline mode works fine. This is how CRA used to work too.
|
||||||
cacheName: "fonts",
|
manualChunks(id) {
|
||||||
expiration: {
|
if (
|
||||||
maxEntries: 50,
|
id.includes("packages/excalidraw/locales") &&
|
||||||
},
|
id.match(/en.json|percentages.json/) === null
|
||||||
},
|
) {
|
||||||
},
|
const index = id.indexOf("locales/");
|
||||||
{
|
// Taking the substring after "locales/"
|
||||||
urlPattern: new RegExp("locales/[^/]+.js"),
|
return `locales/${id.substring(index + 8)}`;
|
||||||
handler: "CacheFirst",
|
}
|
||||||
options: {
|
|
||||||
cacheName: "locales",
|
|
||||||
expiration: {
|
|
||||||
maxEntries: 50,
|
|
||||||
maxAgeSeconds: 60 * 60 * 24 * 30, // <== 30 days
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
urlPattern: new RegExp(".chunk-.+.js"),
|
|
||||||
handler: "CacheFirst",
|
|
||||||
options: {
|
|
||||||
cacheName: "chunk",
|
|
||||||
expiration: {
|
|
||||||
maxEntries: 50,
|
|
||||||
maxAgeSeconds: 60 * 60 * 24 * 90, // <== 90 days
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
manifest: {
|
|
||||||
short_name: "Excalidraw",
|
|
||||||
name: "Excalidraw",
|
|
||||||
description:
|
|
||||||
"Excalidraw is a whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.",
|
|
||||||
icons: [
|
|
||||||
{
|
|
||||||
src: "android-chrome-192x192.png",
|
|
||||||
sizes: "192x192",
|
|
||||||
type: "image/png",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
src: "apple-touch-icon.png",
|
|
||||||
type: "image/png",
|
|
||||||
sizes: "180x180",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
src: "favicon-32x32.png",
|
|
||||||
sizes: "32x32",
|
|
||||||
type: "image/png",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
src: "favicon-16x16.png",
|
|
||||||
sizes: "16x16",
|
|
||||||
type: "image/png",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
start_url: "/",
|
|
||||||
display: "standalone",
|
|
||||||
theme_color: "#121212",
|
|
||||||
background_color: "#ffffff",
|
|
||||||
file_handlers: [
|
|
||||||
{
|
|
||||||
action: "/",
|
|
||||||
accept: {
|
|
||||||
"application/vnd.excalidraw+json": [".excalidraw"],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
share_target: {
|
|
||||||
action: "/web-share-target",
|
|
||||||
method: "POST",
|
|
||||||
enctype: "multipart/form-data",
|
|
||||||
params: {
|
|
||||||
files: [
|
|
||||||
{
|
|
||||||
name: "file",
|
|
||||||
accept: [
|
|
||||||
"application/vnd.excalidraw+json",
|
|
||||||
"application/json",
|
|
||||||
".excalidraw",
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
screenshots: [
|
|
||||||
{
|
|
||||||
src: "/screenshots/virtual-whiteboard.png",
|
|
||||||
type: "image/png",
|
|
||||||
sizes: "462x945",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
src: "/screenshots/wireframe.png",
|
|
||||||
type: "image/png",
|
|
||||||
sizes: "462x945",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
src: "/screenshots/illustration.png",
|
|
||||||
type: "image/png",
|
|
||||||
sizes: "462x945",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
src: "/screenshots/shapes.png",
|
|
||||||
type: "image/png",
|
|
||||||
sizes: "462x945",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
src: "/screenshots/collaboration.png",
|
|
||||||
type: "image/png",
|
|
||||||
sizes: "462x945",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
src: "/screenshots/export.png",
|
|
||||||
type: "image/png",
|
|
||||||
sizes: "462x945",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
}),
|
sourcemap: true,
|
||||||
createHtmlPlugin({
|
// don't auto-inline small assets (i.e. fonts hosted on CDN)
|
||||||
minify: true,
|
assetsInlineLimit: 0,
|
||||||
}),
|
},
|
||||||
],
|
plugins: [
|
||||||
publicDir: "../public",
|
Sitemap({
|
||||||
|
hostname: "https://excalidraw.com",
|
||||||
|
outDir: "build",
|
||||||
|
changefreq: "monthly",
|
||||||
|
// its static in public folder
|
||||||
|
generateRobotsTxt: false,
|
||||||
|
}),
|
||||||
|
woff2BrowserPlugin(),
|
||||||
|
react(),
|
||||||
|
checker({
|
||||||
|
typescript: true,
|
||||||
|
eslint:
|
||||||
|
envVars.VITE_APP_ENABLE_ESLINT === "false"
|
||||||
|
? undefined
|
||||||
|
: { lintCommand: 'eslint "./**/*.{js,ts,tsx}"' },
|
||||||
|
overlay: {
|
||||||
|
initialIsOpen: envVars.VITE_APP_COLLAPSE_OVERLAY === "false",
|
||||||
|
badgeStyle: "margin-bottom: 4rem; margin-left: 1rem",
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
svgrPlugin(),
|
||||||
|
ViteEjsPlugin(),
|
||||||
|
VitePWA({
|
||||||
|
registerType: "autoUpdate",
|
||||||
|
devOptions: {
|
||||||
|
/* set this flag to true to enable in Development mode */
|
||||||
|
enabled: false,
|
||||||
|
},
|
||||||
|
|
||||||
|
workbox: {
|
||||||
|
// don't precache fonts, locales and separate chunks
|
||||||
|
globIgnores: [
|
||||||
|
"fonts.css",
|
||||||
|
"**/locales/**",
|
||||||
|
"service-worker.js",
|
||||||
|
"**/*.chunk-*.js",
|
||||||
|
],
|
||||||
|
runtimeCaching: [
|
||||||
|
{
|
||||||
|
urlPattern: new RegExp(".+.woff2"),
|
||||||
|
handler: "CacheFirst",
|
||||||
|
options: {
|
||||||
|
cacheName: "fonts",
|
||||||
|
expiration: {
|
||||||
|
maxEntries: 1000,
|
||||||
|
maxAgeSeconds: 60 * 60 * 24 * 90, // 90 days
|
||||||
|
},
|
||||||
|
cacheableResponse: {
|
||||||
|
// 0 to cache "opaque" responses from cross-origin requests (i.e. CDN)
|
||||||
|
statuses: [0, 200],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
urlPattern: new RegExp("fonts.css"),
|
||||||
|
handler: "StaleWhileRevalidate",
|
||||||
|
options: {
|
||||||
|
cacheName: "fonts",
|
||||||
|
expiration: {
|
||||||
|
maxEntries: 50,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
urlPattern: new RegExp("locales/[^/]+.js"),
|
||||||
|
handler: "CacheFirst",
|
||||||
|
options: {
|
||||||
|
cacheName: "locales",
|
||||||
|
expiration: {
|
||||||
|
maxEntries: 50,
|
||||||
|
maxAgeSeconds: 60 * 60 * 24 * 30, // <== 30 days
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
urlPattern: new RegExp(".chunk-.+.js"),
|
||||||
|
handler: "CacheFirst",
|
||||||
|
options: {
|
||||||
|
cacheName: "chunk",
|
||||||
|
expiration: {
|
||||||
|
maxEntries: 50,
|
||||||
|
maxAgeSeconds: 60 * 60 * 24 * 90, // <== 90 days
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
manifest: {
|
||||||
|
short_name: "Excalidraw",
|
||||||
|
name: "Excalidraw",
|
||||||
|
description:
|
||||||
|
"Excalidraw is a whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.",
|
||||||
|
icons: [
|
||||||
|
{
|
||||||
|
src: "android-chrome-192x192.png",
|
||||||
|
sizes: "192x192",
|
||||||
|
type: "image/png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: "apple-touch-icon.png",
|
||||||
|
type: "image/png",
|
||||||
|
sizes: "180x180",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: "favicon-32x32.png",
|
||||||
|
sizes: "32x32",
|
||||||
|
type: "image/png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: "favicon-16x16.png",
|
||||||
|
sizes: "16x16",
|
||||||
|
type: "image/png",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
start_url: "/",
|
||||||
|
display: "standalone",
|
||||||
|
theme_color: "#121212",
|
||||||
|
background_color: "#ffffff",
|
||||||
|
file_handlers: [
|
||||||
|
{
|
||||||
|
action: "/",
|
||||||
|
accept: {
|
||||||
|
"application/vnd.excalidraw+json": [".excalidraw"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
share_target: {
|
||||||
|
action: "/web-share-target",
|
||||||
|
method: "POST",
|
||||||
|
enctype: "multipart/form-data",
|
||||||
|
params: {
|
||||||
|
files: [
|
||||||
|
{
|
||||||
|
name: "file",
|
||||||
|
accept: [
|
||||||
|
"application/vnd.excalidraw+json",
|
||||||
|
"application/json",
|
||||||
|
".excalidraw",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
screenshots: [
|
||||||
|
{
|
||||||
|
src: "/screenshots/virtual-whiteboard.png",
|
||||||
|
type: "image/png",
|
||||||
|
sizes: "462x945",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: "/screenshots/wireframe.png",
|
||||||
|
type: "image/png",
|
||||||
|
sizes: "462x945",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: "/screenshots/illustration.png",
|
||||||
|
type: "image/png",
|
||||||
|
sizes: "462x945",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: "/screenshots/shapes.png",
|
||||||
|
type: "image/png",
|
||||||
|
sizes: "462x945",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: "/screenshots/collaboration.png",
|
||||||
|
type: "image/png",
|
||||||
|
sizes: "462x945",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: "/screenshots/export.png",
|
||||||
|
type: "image/png",
|
||||||
|
sizes: "462x945",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
createHtmlPlugin({
|
||||||
|
minify: true,
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
publicDir: "../public",
|
||||||
|
};
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue