Gathering detailed insights and metrics for @mongez/vite
Gathering detailed insights and metrics for @mongez/vite
Installations
npm install @mongez/viteDeveloper Guide
BETA
Typescript
No
Module System
ESM
Releases
Unable to fetch releases
Languages
1
TypeScript
TypeScript (100%)
Developer
hassanzohdy
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
4 Stars
32 Commits
1 Watchers
1 Branches
1 Contributors
Updated on Mar 11, 2024
Maintainers
1
Package Meta Information
Latest Version
2.0.4
Package Id
@mongez/vite@2.0.4
Unpacked Size
68.35 kB
Size
19.53 kB
File Count
98
Published on
Apr 11, 2024
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
1
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.
1import react from "@vitejs/plugin-react"; 2import { defineConfig, UserConfigExport } from "vite"; 3import mongezVite from "@mongez/vite"; 4 5// https://vitejs.dev/config/ 6export default defineConfig((): UserConfigExport => { 7 return { 8 plugins: [mongezVite(), react()], 9 } as UserConfigExport; 10});
Production Base Url
You can set the production base url by adding the PUBLIC_URL environment variable in your .env.production file.
1#.env.production 2PUBLIC_URL=https://example.com
You can also set the production base url by adding the baseUrl option in the mongezVite plugin.
1import react from "@vitejs/plugin-react"; 2import { defineConfig, UserConfigExport } from "vite"; 3import mongezVite from "@mongez/vite"; 4 5// https://vitejs.dev/config/ 6export default defineConfig((): UserConfigExport => { 7 return { 8 plugins: [ 9 mongezVite({ 10 baseUrl: "https://example.com", 11 }), 12 react(), 13 ], 14 } as UserConfigExport; 15});
Also you can assign the env variable to the production url by adding the envBaseUrlKey option in the mongezVite plugin.
1import react from "@vitejs/plugin-react"; 2import { defineConfig, UserConfigExport } from "vite"; 3import mongezVite from "@mongez/vite"; 4 5// https://vitejs.dev/config/ 6export default defineConfig((): UserConfigExport => { 7 return { 8 plugins: [ 9 mongezVite({ 10 envBaseUrlKey: "PUBLIC_URL", 11 }), 12 react(), 13 ], 14 } as UserConfigExport; 15});
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.
1import react from "@vitejs/plugin-react"; 2import { defineConfig, UserConfigExport } from "vite"; 3import mongezVite from "@mongez/vite"; 4 5// https://vitejs.dev/config/ 6export default defineConfig((): UserConfigExport => { 7 return { 8 plugins: [ 9 mongezVite({ 10 autoOpenBrowser: true, 11 }), 12 react(), 13 ], 14 } as UserConfigExport; 15});
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.
1import react from "@vitejs/plugin-react"; 2import { defineConfig, UserConfigExport } from "vite"; 3import mongezVite from "@mongez/vite"; 4 5// https://vitejs.dev/config/ 6export default defineConfig((): UserConfigExport => { 7 return { 8 plugins: [ 9 mongezVite({ 10 productionEnvName: "production", 11 }), 12 react(), 13 ], 14 } as UserConfigExport; 15});
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.
1<!DOCTYPE html> 2<html lang="__APP_DEFAULT_LOCALE_CODE__" dir="__APP_DEFAULT_DIRECTION__"> 3 <head> 4 <meta charset="UTF-8" /> 5 <link rel="icon" type="image/svg+xml" href="__APP_FAV_ICON__" /> 6 <link rel="apple-touch-icon" href="__APP_FAV_ICON__" /> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 8 <meta name="theme-color" content="__APP_PRIMARY_COLOR__" /> 9 <meta name="description" content="__APP_DESCRIPTION__" /> 10 <title>__APP_NAME__</title> 11 </head> 12 <body> 13 <div id="root"></div> 14 <script type="module" src="/src/main.tsx"></script> 15 </body> 16</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.
1import react from "@vitejs/plugin-react"; 2import { defineConfig, UserConfigExport } from "vite"; 3import mongezVite from "@mongez/vite"; 4 5// https://vitejs.dev/config/ 6export default defineConfig((): UserConfigExport => { 7 return { 8 plugins: [ 9 mongezVite({ 10 envPrefix: "__", 11 envSuffix: "__", 12 }), 13 react(), 14 ], 15 } as UserConfigExport; 16});
Be aware of tags that have a url such as
linkandscripttags, 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.
1import react from "@vitejs/plugin-react"; 2import { defineConfig, UserConfigExport } from "vite"; 3import mongezVite from "@mongez/vite"; 4 5// https://vitejs.dev/config/ 6export default defineConfig((): UserConfigExport => { 7 return { 8 plugins: [ 9 mongezVite({ 10 linkTsconfigPaths: false, 11 }), 12 react(), 13 ], 14 } as UserConfigExport; 15});
Please note this feature sets the
resolve.aliasoption 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.
1import react from "@vitejs/plugin-react"; 2import { defineConfig, UserConfigExport } from "vite"; 3import mongezVite from "@mongez/vite"; 4 5// https://vitejs.dev/config/ 6 7export default defineConfig((): UserConfigExport => { 8 return { 9 plugins: [ 10 mongezVite({ 11 compressBuild: false, 12 }), 13 react(), 14 ], 15 } as UserConfigExport; 16});
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.
1import react from "@vitejs/plugin-react"; 2import { defineConfig, UserConfigExport } from "vite"; 3import mongezVite from "@mongez/vite"; 4 5// https://vitejs.dev/config/ 6 7import react from "@vitejs/plugin-react"; 8import { defineConfig, UserConfigExport } from "vite"; 9import mongezVite from "@mongez/vite"; 10 11// https://vitejs.dev/config/ 12 13export default defineConfig((): UserConfigExport => { 14 return { 15 plugins: [ 16 mongezVite({ 17 compressBuild: true, 18 compressedFileName: "my-app.zip", 19 }), 20 react(), 21 ], 22 } as UserConfigExport; 23});
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.
1import react from "@vitejs/plugin-react"; 2import { defineConfig, UserConfigExport } from "vite"; 3import mongezVite from "@mongez/vite"; 4 5// https://vitejs.dev/config/ 6 7export default defineConfig((): UserConfigExport => { 8 return { 9 plugins: [ 10 mongezVite({ 11 htaccess: true, 12 }), 13 react(), 14 ], 15 } as UserConfigExport; 16});
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.
1import react from "@vitejs/plugin-react"; 2import { defineConfig, UserConfigExport } from "vite"; 3import mongezVite from "@mongez/vite"; 4 5// https://vitejs.dev/config/ 6 7export default defineConfig((): UserConfigExport => { 8 return { 9 plugins: [ 10 mongezVite({ 11 preRender: { 12 url: "https://my-pre-render-server.com", 13 crawlers: 14 "Google-Site-Verification|Googlebot|facebook|crawl|WhatsApp|bot|Slack|Twitter|bot", 15 }, 16 }), 17 react(), 18 ], 19 } as UserConfigExport; 20});
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.iothat receives the url that should be rendered and returns the html, however, you can use your own pre-render service by setting theurloption.
To disable pre render service, just set preRender option to false.
No vulnerabilities found.
No security vulnerabilities found.