@mongez/vite
v2.0.4
Published
A Vite plugin to manage development and build process
Downloads
72
Maintainers
Readme
Mongez Vite
Mongez Vite is a vite plugin that helps you to create a vite project with a lot of features with one plugin.
Features
- ✅ Autoload Environment Variables
- ✅ Production Base Url
- ✅ Auto Open Browser
- ✅ Use Env Variables In index.html file
- ✅ Link tsconfig paths to vite aliases
- ✅ Auto compress build directory
- ✅ Auto Generate Htaccess File
- ✅ Auto Inject Pre Render Service
Installation
yarn add @mongez/vite
Or
npm i @mongez/vite
Usage
Just import the plugin and put it in the plugins list.
import react from "@vitejs/plugin-react";
import { defineConfig, UserConfigExport } from "vite";
import mongezVite from "@mongez/vite";
// https://vitejs.dev/config/
export default defineConfig((): UserConfigExport => {
return {
plugins: [mongezVite(), react()],
} as UserConfigExport;
});
Production Base Url
You can set the production base url by adding the PUBLIC_URL
environment variable in your .env.production
file.
#.env.production
PUBLIC_URL=https://example.com
You can also set the production base url by adding the baseUrl
option in the mongezVite
plugin.
import react from "@vitejs/plugin-react";
import { defineConfig, UserConfigExport } from "vite";
import mongezVite from "@mongez/vite";
// https://vitejs.dev/config/
export default defineConfig((): UserConfigExport => {
return {
plugins: [
mongezVite({
baseUrl: "https://example.com",
}),
react(),
],
} as UserConfigExport;
});
Also you can assign the env variable to the production url by adding the envBaseUrlKey
option in the mongezVite
plugin.
import react from "@vitejs/plugin-react";
import { defineConfig, UserConfigExport } from "vite";
import mongezVite from "@mongez/vite";
// https://vitejs.dev/config/
export default defineConfig((): UserConfigExport => {
return {
plugins: [
mongezVite({
envBaseUrlKey: "PUBLIC_URL",
}),
react(),
],
} as UserConfigExport;
});
Auto Open Browser
I know this is already a feature in vite, but I wanted to make it automated xD, you can enable or disable it by setting the autoOpenBrowser
option to true
or false
in the plugin options.
import react from "@vitejs/plugin-react";
import { defineConfig, UserConfigExport } from "vite";
import mongezVite from "@mongez/vite";
// https://vitejs.dev/config/
export default defineConfig((): UserConfigExport => {
return {
plugins: [
mongezVite({
autoOpenBrowser: true,
}),
react(),
],
} as UserConfigExport;
});
Auto Lad Env Variables
By default Mongez Vite will try to load the proper env file based on the available .env file, it will try to find the following:
In Build mode: it will try to find .env.production
file, if not found it will try to find .env.build
file, if not found it will try to find .env
file.
In Development mode: it will try to find .env.development
file, if not found it will try to find .env
file.
However, you can specify the production env name, (just the name of the file without the extension) by adding productionEnvName
property to the plugin options.
import react from "@vitejs/plugin-react";
import { defineConfig, UserConfigExport } from "vite";
import mongezVite from "@mongez/vite";
// https://vitejs.dev/config/
export default defineConfig((): UserConfigExport => {
return {
plugins: [
mongezVite({
productionEnvName: "production",
}),
react(),
],
} as UserConfigExport;
});
This will make the plugin to load .env.production
file in build mode.
Use Env Variables In index.html
You can use env variables in your index.html file, just add the env variables in your .env file and use them in your index.html file.
<!DOCTYPE html>
<html lang="__APP_DEFAULT_LOCALE_CODE__" dir="__APP_DEFAULT_DIRECTION__">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="__APP_FAV_ICON__" />
<link rel="apple-touch-icon" href="__APP_FAV_ICON__" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="__APP_PRIMARY_COLOR__" />
<meta name="description" content="__APP_DESCRIPTION__" />
<title>__APP_NAME__</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
Here we can use any .env variable in our index.html file, just prefix the variable with __
and suffix it with __
and you're done!
You can define env prefix and suffix in the plugin options.
import react from "@vitejs/plugin-react";
import { defineConfig, UserConfigExport } from "vite";
import mongezVite from "@mongez/vite";
// https://vitejs.dev/config/
export default defineConfig((): UserConfigExport => {
return {
plugins: [
mongezVite({
envPrefix: "__",
envSuffix: "__",
}),
react(),
],
} as UserConfigExport;
});
Be aware of tags that have a url such as
link
andscript
tags, do not use prefix like % or $, this will result an error from vite as it can not parse it as valid url characters.
Link Tsconfig paths to vite
By default Mongez Vite will try to load all paths
in tsconfig.json
file automatically, however, you can disable this feature by setting linkTsconfigPaths
option to false
.
import react from "@vitejs/plugin-react";
import { defineConfig, UserConfigExport } from "vite";
import mongezVite from "@mongez/vite";
// https://vitejs.dev/config/
export default defineConfig((): UserConfigExport => {
return {
plugins: [
mongezVite({
linkTsconfigPaths: false,
}),
react(),
],
} as UserConfigExport;
});
Please note this feature sets the
resolve.alias
option in vite, so if you set this option in your vite config, it will be disabled by default, it's recommended to use only tsconfig paths.
Auto Compress Build Directory Contents
By default Mongez Vite will compress the build directory contents, however, you can disable this feature by setting compressBuild
option to false
.
import react from "@vitejs/plugin-react";
import { defineConfig, UserConfigExport } from "vite";
import mongezVite from "@mongez/vite";
// https://vitejs.dev/config/
export default defineConfig((): UserConfigExport => {
return {
plugins: [
mongezVite({
compressBuild: false,
}),
react(),
],
} as UserConfigExport;
});
The generated zip file will be named as build.zip
and will be located in the dist
directory of your project or in the buildDir
directory if you set it in the config options.
However, you can change the compressed file name by setting compressedFileName
option to the desired name.
import react from "@vitejs/plugin-react";
import { defineConfig, UserConfigExport } from "vite";
import mongezVite from "@mongez/vite";
// https://vitejs.dev/config/
import react from "@vitejs/plugin-react";
import { defineConfig, UserConfigExport } from "vite";
import mongezVite from "@mongez/vite";
// https://vitejs.dev/config/
export default defineConfig((): UserConfigExport => {
return {
plugins: [
mongezVite({
compressBuild: true,
compressedFileName: "my-app.zip",
}),
react(),
],
} as UserConfigExport;
});
Only the directory contents will be in the zip file not the directory itself.
Generate .htaccess
If you're using Apache server, you can generate .htaccess file by setting htaccess
option to true
, which is true
by default.
import react from "@vitejs/plugin-react";
import { defineConfig, UserConfigExport } from "vite";
import mongezVite from "@mongez/vite";
// https://vitejs.dev/config/
export default defineConfig((): UserConfigExport => {
return {
plugins: [
mongezVite({
htaccess: true,
}),
react(),
],
} as UserConfigExport;
});
Pre Render Service
SEO is very important to any website, and if you're application is SPA and using client side rendering, you can use the pre-render service to generate static html files for each route in your application when a crawler visits your website.
If your project has a pre render server that renders the pages and returns the html, you can set the pre-render service url that will be called when a crawler visits your website.
import react from "@vitejs/plugin-react";
import { defineConfig, UserConfigExport } from "vite";
import mongezVite from "@mongez/vite";
// https://vitejs.dev/config/
export default defineConfig((): UserConfigExport => {
return {
plugins: [
mongezVite({
preRender: {
url: "https://my-pre-render-server.com",
crawlers:
"Google-Site-Verification|Googlebot|facebook|crawl|WhatsApp|bot|Slack|Twitter|bot",
},
}),
react(),
],
} as UserConfigExport;
});
Here we set the pre render service url and crawlers that will be used to detect if the request is from a crawler or not.
This feature requires .htaccess to be enabled, also it will generate a prerender.php
file in the dist
directory of your project, which will be call the pre-render service url and return the html to the crawler.
For the time being, there is already an injected pre render service in the package which is
https://render.mentoor.io
that receives the url that should be rendered and returns the html, however, you can use your own pre-render service by setting theurl
option.
To disable pre render service, just set preRender
option to false
.