Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use inherited vite config from dev/config package #1376

Merged
merged 4 commits into from
Sep 19, 2024
Merged

Use inherited vite config from dev/config package #1376

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fcb1d8e
Use inherited vite config from dev/config package
forgetso Sep 19, 2024
f5b5b5a
Merge branch 'staging' into fix-client-example-serving
forgetso Sep 19, 2024
f8d1a25
lint-fix
forgetso Sep 19, 2024
9d7bc37
Add watch workspace plugin back in
forgetso Sep 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion demos/client-example/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="module" src="/src/index.tsx"></script>
<script type="module" src="src/index.tsx"></script>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
Expand Down
103 changes: 46 additions & 57 deletions demos/client-example/vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,81 +11,70 @@
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import * as path from "node:path";
import { getLogger } from "@prosopo/common";
import { VitePluginCloseAndCopy } from "@prosopo/config";
import { ViteFrontendConfig } from "@prosopo/config";
import { loadEnv } from "@prosopo/dotenv";
import { VitePluginWatchWorkspace } from "@prosopo/vite-plugin-watch-workspace";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
const logger = getLogger("Info", "vite.config.js");
const dir = path.resolve(".");
loadEnv(dir);

// load env using our util because vite loadEnv is not working for .env.development
loadEnv();

// Vite doesn't find the tsconfig for some reason
process.env.TS_NODE_PROJECT = path.resolve("./tsconfig.json");

// Package specific config
const bundleName = "prosopo-client-example";
const packageName = "@prosopo/client-example";
const entry = path.resolve("./index.html");
const workspaceRoot = path.resolve("../../..");

// https://vitejs.dev/config/
export default defineConfig(async ({ command, mode }) => {
logger.info(`Running at ${dir} in ${mode} mode`);
// NODE_ENV must be wrapped in quotes. We just set it to the mode and ignore what's in the env file, otherwise the
// mode and NODE_ENV can end up out of sync (one set to development and the other set to production, which causes
// issues like this: https://github.com/hashicorp/next-mdx-remote/pull/323
logger.info(`NODE_ENV: ${process.env.NODE_ENV}`);
const frontendConfig = await ViteFrontendConfig(
packageName,
bundleName,
path.resolve(),
entry,
command,
mode,
undefined,
undefined,
workspaceRoot,
);

// Set the env vars that we want to be available in the browser
const define = {
// used to stop websockets package from breaking
"process.env.WS_NO_BUFFER_UTIL": JSON.stringify("true"),
"process.env.WS_NO_UTF_8_VALIDATE": JSON.stringify("true"),
"process.env.NODE_ENV": JSON.stringify(mode),
"process.env.PROSOPO_DEFAULT_ENVIRONMENT": JSON.stringify(
process.env.PROSOPO_DEFAULT_ENVIRONMENT,
),
// only needed if bundling with a site key
"process.env.PROSOPO_SITE_KEY": JSON.stringify(
process.env.PROSOPO_SITE_KEY,
),
"process.env.PROSOPO_WEB2": JSON.stringify(process.env.PROSOPO_WEB2),
"process.env.PROSOPO_SERVER_URL": JSON.stringify(
process.env.PROSOPO_SERVER_URL,
),
"process.env.PROSOPO_SERVER_PORT": JSON.stringify(
process.env.PROSOPO_SERVER_PORT,
),
"process.env.PROSOPO_PORT": JSON.stringify(process.env.PROSOPO_PORT),
"process.env._DEV_ONLY_WATCH_EVENTS": JSON.stringify(
process.env._DEV_ONLY_WATCH_EVENTS,
),
};
logger.debug("define", JSON.stringify(define));
return {
...frontendConfig,
watch: false,
mode: "development",
bundle: true,
define,
optimizeDeps: {
include: ["prop-types"],
},
esbuild: {
target: [
"es2020",
"chrome60",
"edge18",
"firefox60",
"node12",
"safari11",
],
define: {
...frontendConfig.define,
"process.env.PROSOPO_WEB2": JSON.stringify(
process.env.PROSOPO_WEB2 || "true",
),
"process.env.PROSOPO_LOG_LEVEL": JSON.stringify(
process.env.PROSOPO_LOG_LEVEL || "Info",
),
},
build: {
outDir: path.resolve("./dist"),
modulePreload: { polyfill: true },
lib: {
entry: path.resolve(__dirname, "./index.html"),
name: "client_example",
entry,
name: bundleName,
formats: ["es"],
},
rollupOptions: {
...frontendConfig.build?.rollupOptions,
output: {
dir: path.resolve("./dist"),
},
},
},
plugins: [
// @ts-ignore
react(),
// Closes the bundler and copies the bundle to the client-bundle-example project unless we're in serve
// mode, in which case we don't want to close the bundler because it will close the server
command !== "serve" ? VitePluginCloseAndCopy() : undefined,
...(frontendConfig.plugins || []),
// Watches external files (workspace packages) and rebuilds them when they change
await VitePluginWatchWorkspace({
workspaceRoot: path.resolve("../.."),
Expand Down
Loading