DEV Community: Fima Taf

NolybabJS - i18n-to-csv and csv-to-i18n converter

Fima Taf — Sun, 19 Jun 2022 15:39:56 +0000

After many frontend projects that I've worked with and tackled with the same problem - manually convert i18n json files into csv or manually creating keys for each language with the given translation, I've finally decided to create an open source library that will do it for me and save me (and maybe you) some time.

NolybabJS

Nolybab is a CLI based i18n-to-csv and csv-to-i18n converter, you can easily convert your i18n json files into csv, and send it to your translators and when they finish to translate and send you the csv back - just convert it back to i18n files.

More info and examples can be found in the README file in the Github repository - nolybab-js

I would very much appreciate any kind of feedbacks or ideas that can improve this library.
And of-course contribution is always welcome :)

PNN Mirroring - determine yours workplace status

Fima Taf — Fri, 29 Oct 2021 15:04:09 +0000

PNN mirroring is about translating your thoughts and feelings into statuses and colors. PNN is an abbreviation of Positive, Neutral and Negative which mirrors the statuses and colors back to you. Continue reading and you'll figure it out

Intro

For many years there were studies and researches that tried to discover what is motivating employees to stay or to leave their work. Some of them were done by academic institutes, private companies, HR companies and others. Here are some of the common reasons that you can find in most of them:

Relationship with management
Organizational culture
Compensation / Salary
Commute time or distance
Work-life balance
Financial benefits
Office benefits
Co-workers
Career growth
Working remotely
Professional and personal challenges
Skill development
Field related reason

And there are many other reasons with which we can expand this list.

There also might be field related reasons depending on the person's profession or the industry he is working in.
Some people may see some of the above reasons as less important and some may see some of them as more important. It depends on the person's needs, character, culture, age and other factors.
But if we will try to group those reasons we will get 4 main groups:

Compensation and benefits
People and community
Self fulfillment
Career

Where it all started

From the very beginning of your working career you are probably being asked a lot by your friends and family the question - "How's work?" - pretty annoying question and in most of the cases you will probably answer - "OK...". In some of the cases you'll detail the answer (maybe tell a little bit about the job itself or some other benefits you have there) but you might also lie (maybe because of ego or to avoid unwanted conversation or any other reason) - and that is fine as long as you don't believe those lies.

Once I talked to my friend and I heard in his voice that something was wrong. I asked him - "Is everything ok? Something related to your work?" and he replied - "I am not sure. The compensation is good, the people are friendly and nice, I am working with the tech stack I wanted but something feels wrong".
I told him a bit about the tool I was thinking of and asked him if he wanted to be the 'pilot' user of it, and he agreed.
Few days later he called me and said - "I've decided to quit the current job, and I understood that thanks to your tool".
About a month later I was in the same situation but this time it was the other way around - my friend offered me to be the user of that tool. I agreed and this is the point where I actually realized the power of the tool that I came up with.
After that I told to my wife - "I think I will start looking for a new job...", she was amazed. She asked me - "But just a few days ago everything was ok, what happened??", and I answered - "Nothing special happened, I just realized that I was lying to myself. But on the other hand the tool proved itself again". You can imagine my wife's facial expression...

The Problem

The problem starts when you are lying to yourself. Lying to yourself not necessarily has to be a 'pure lie', it can be an ignorance from a part of the situation like - "The arguments with my team leader are temporary, it's probably because he has a lot of pressure right now" while most of the team members doesn't get along with him as well, or "I will probably get a raise soon, I am doing a really good job" while no one got a raise or a bonus in the previous 3 years and the management doesn't care about their employees, or "I am working with a really good tech stack" while so little of the overall companies are looking for this tech stack and its popularity is going down every day. There are more examples, but I think you've got the point.
Those thoughts and feelings cause you to ignore mostly the bad parts, maybe because you are a crazy level optimist (which is fine) or because you want to avoid facing the truth - Why? Because when you'll see the bigger picture you'll start considering making a change at your current workplace or even leaving your workplace and this is something that you maybe want to avoid at this point.
Each and everyone has their own reasons for avoiding the bigger picture (relocation for this position, the efforts you've made to get there, personal financial issues, tired of all the interview processes and many other reasons).
Some people may say - "Ye, that is fine, I can live with that.", but the question is - "What will be the consequences of this kind of living?". Those situations will lead mostly to anger and frustration. It can be a slow process (which you can use to make some smart moves) but eventually it'll start getting out onto your relationship, family, kids, parents, friends, pets and of course - yourself. At some point you'll become desperate and probably will start looking for a new workplace, but at this point you'll try to find a workplace just to escape from your current one and not because that's a place that you were aiming for.
The sooner you'll fix it the better. Trust me - I've been there...

If after reading the first part you think that you are ready to try it - then go for it and continue reading, otherwise come back when you'll feel that this is the right time.

PNN Mirroring

PNN mirroring is about translating your thoughts and feelings into statuses and colors. The whole idea is to keep it simple. Remember the 4 groups we've aggregated at the intro? Now let's use them:

Step 1 (PNN)

PNN - Positive, Neutral, Negative.
Your task is to choose one of the following statuses for each group:
Positive 🟢
Neutral ⚪️
Negative 🔴

Compensation and benefits [ ]

This group includes: Salary, any kind of insurance, bonuses, office benefits, work-life balance, sick days, etc...

People and community [ ]

This group includes: relationships with co-workers, relationships with management, interaction with other workers, social events, atmosphere at the workplace etc...

Self fulfillment [ ]

This group is about your own goals. For example - Do you work at the position that you desire? Or at a position that will help you to get to the desired one? Are the missions/tasks you are dealing with are something that you wanted to do? Do you learn from the place you work in something that you wanted? Like - Leadership / mentoring / professional skills. Maybe you have a goal to change the world in some way (Save the environment / fight crime / help people / help animals / etc..) - Does this workplace help you to achieve this goal?

Career [ ]

This group is a little bit different from the other three because it splits into two parts: common and field related.
Common: Are you satisfied with the career path you chose? Does the current work push your career forward?
Field related: This part may vary depending on your profession or field. As a fullstack developer I can say that the question that I've chosen is - Does the tech stack I am working with keeps me aligned to the market's demands?
Let's say I am working mainly with technology A (I don't want to take a real one because some people may feel offended so I prefer to keep it generic and anonymous) and slowly this technology is dying - In 2/3/5 years I might find myself in a pretty bad position if I'll start looking for a new job.

If you are not a programmer you'll have to think of a question that is related to your specific field.

Step 2 (Mirroring)

How to understand the results?

Now write down / paint / imagine or any other way your result. (For example - 🟢🔴⚪️🟢)
Look at the result and imagine that someone gave you this result and asks for an advice - What would you suggest he do?
Why? Because as humans it's much easier for us to tell someone else what to do than doing it ourselves.
That is why it's called 'mirroring' it just reflects the image back to you. It might take you some time to process it and that is ok.

Step 3 (Extra step)

In case Step 2 is still confusing or you are having a hard time deciding what is the right status you're in, this extra step might be helpful.
Order the groups by their importance to you when 1 is the most important and 4 is less important. (but keep in mind that even though you ordering the groups, they still have an equal amount - 25%)
For example let's say that currently your friend's main focus is on his career path, the salary is much higher than his previous job but the co-workers he is working with are not the kind of people he would want to work with but his interaction with them is really low. Also this is not the 'dream job' he wants but he has to get experienced there to get to his dream job.
If I'll use step 2 for the above situation I'll get this result - 🟢🔴⚪️🟢
But if I'll order the result according to your friend's case (Career -> Compensation and benefits -> People and community -> Self fulfillment) I will get the following result:
🟢
🟢
🔴
⚪️

Q&A

Why are there only 4 groups?
As I mentioned before - The whole idea is to keep it simple.
Let's say my result was - 🟢⚪️🔴⚪️
If I'll start breaking down the groups I might get the following result - 🟢⚪️🔴🟢🟢⚪️🔴🔴🟢⚪️
Which one is clearer and simpler?
For me personally the first one is much clearer, but if the second one is more clearer for you - then go for it.

Is there an app that I can use instead of writing/imagining?
While writing this post the idea of an app came to my mind, and I've already started working on it. I'll update this post whenever it'll be ready - so stay tuned :)

Can I move some of the amount of a group into another group?
"Let's say that currently my main goal is to earn a fortune and I don't really care about the people that I am working with - Can I take half of the amount from the 'People and community' group and move it to the 'Compensation and benefits' group?".
The 4 groups that we've created at the intro have an equal effect on you (25%), even if you think that some of the groups are less important for you right now sooner or later it'll come out, that is why I wouldn't recommend doing it.

Conclusion

Like everything else in the world PNN mirroring is not perfect and there might be scenarios in which it won't be able to help, but in the overall it might be very helpful (some of my friends that used it already were really happy that PNN mirroring helped them. Some of them said few bad words - but in the good way :D ).
You are welcome to ask questions in case you have any, share (only if you want) any thoughts that came up and of-course if PNN mirroring helped you in any case I'll be very glad to hear (or read) about it. (You can write a PM if you want).
Good luck and remember - 'Experience' is mostly the mistakes you've made and learnt from and only a bit of the successful things you did.

Vite - A Short Overview

Fima Taf — Wed, 07 Jul 2021 11:13:06 +0000

There is a plan to run a hackathon at my company, and as the tech lead of the team I've been asked to choose the tech stack that we'll be using for our application.
My immediate response was that I want us to try out using Vite for the frontend part after I was following it for a while and did some research about it.
In this post I would like to share with you some of the features that Vite offers and to show a bit of how it works.

Vite

Vite (French word for "fast", pronounced /vit/) is a build tool that aims to provide a faster and leaner development experience for modern web projects.

Vite was created by Evan You (the same guy who created VueJS) and it seems that he used the same pattern with Vite as he used with VueJS - Simple, innovative, learning from others mistakes and taking care of many configurations by default BUT in case you need to go deeper and modify any of them - you can do it pretty easy.
Some of those configurations that Vite is providing out-of-the-box are - JSX, TypeScript, Web Workers, CSS and more.

Unlike other bundling tools Vite is using only ES Modules both at development and production - Lets see how:

Development

Vite is running Koa - a light weight dev server which is serving native ES modules and using esbuild for dependency pre-bundling.

What is dependency pre-bundling?

According to Vite's docs dependency pre-bundling has 2 reasons:
1) CommonJS and UMD compatibility - While Vite is using only native ES modules some of the libraries you are using or might use won't be using ES modules, instead it'll use CommonJS or UMD. To solve this issue Vite is converting all the dependencies from CommonJS and UMD into ES modules using esbuild.
Vite is performing this action when you run the dev server for the first time (That is why the first run might be longer then the other runs).
What if I add a new dependency or upgrade a version of an exiting one? Not a problem - Vite will watch the changes in package.json / package-lock.json / yarn.lock / pnpm-lock.yaml and will rebuild the dependency. In case there are some issues you can delete the cache folder node_modules/.vite or rerun the server with the --force flag and Vite will rebuild all the dependencies.
2) Performance - Each dependency can have a large number of it's own modules which will cause the browser to fire a crazy amount of requests to the backend so Vite is converting those dependencies into a single ES module to reduce the amount of the requests being fired.

Running the dev server

Lets run the server:

Now Lets compare it to vue-cli (webpack):

As you can see Vite is faster on both runs. But the question is - How? (We'll get an answer for this question later)

Native ES Modules

As I've mentioned earlier Vite is using only ES modules. If we take a look at index.html file, we'll see this line:

<script type="module" src="/src/main.js"></script>

The type="module" attribute is an ES6 feature that is using native ES modules. All the modern browsers are already supporting this feature.

The image above is showing the 'Waterfall' effect that ES modules create - starting from main.js and importing all the modules down the modules tree. And as you can see each vue component and dependency is being split in a separate module.

Unlike vue-cli (webpack) that by default has only 2 scripts:
app.js containing all the components of the application.
chunk-vendors.js is basically all the node_modules dependencies.
webpack does has a way to split the components and dependencies into chunks, but it requires you to configure this option OR manually selecting files/modules you want to chunk.

Another interesting thing here is that each vue component file has also a css file that is being loaded - Why? HMR.

HMR

Vite's Hot Module Replacement is one of the main reasons that Vite is so fast. It using web-socket just like webpack and other bundling tools, but the difference is that with the combination of ESM it works very fast even if your application will grow by replacing only 1 module and not re-bundling a big file.
Lets take vue-cli (webpack) for an example:
By default it has only 2 files (as mentioned above), on each HMR call the whole app.js will be re-bundled and sent to the browser.
Where is the problem?
When the amount of the components will start growing so do app.js's size and the time it takes.
With Vite on the other hand it'll be much faster because there is no need to re-bundle such a big file - it will only replace the actual component / file that was changed without 'touching' the other components / files. That is why there is also a css file that we've mentioned earlier - If you going to make a change only to the <style> of a component - then only the <style> of that component will be replaced by HMR and not the whole component.
So it means that if your app will have 1 or 1000 or 10000 components the time that the HMR process will take will remain almost the same (of-course it also depending on the size of the file, just avoid creating monster size components...).

Production

For production Vite is still bundling the code according to the official docs:

Even though native ESM is now widely supported, shipping unbundled ESM in production is still inefficient (even with HTTP/2) due to the additional network round trips caused by nested imports.

The cool 'waterfall' effect you saw above is really fast and useful when you're working with a dev server on your localhost, but this advantage can become a disadvantage when it comes to loading performance.
For production bundling Vite is using rollup.js which is also using ESM when building the app for production and it does that faster and with a smaller file size then webpack for example.

Downsides

Vite is not perfect and it also has its downsides:

1. Old browsers support - Old browsers (IE) doesn't support ESM, therefor applications created by Vite is not gonna work there.
2. Different dev and production builds - As you saw Vite is using different tools for development and production which has the possibility to cause problems and bugs that will appear only in one of the environments but not at the other.
3. Ecosystem - Vite is still new in the neighborhood and the ecosystem is still small. There are issues/bugs/problems that will probably appear in the near and far future that'll have to be handled, while webpack for example has a pretty big ecosystem that solves a wide variety of edge cases.

So should I stop using vue-cli or webpack and switch to Vite?

Well, it's up to you. My advice - First try it out, test it, build a small demo app -> then if you want to start working on a real project consider the advantages and disadvantages that I've listed above - and then make your decision.

Libraries and frameworks support

In this post I've showed all the examples with VueJS, but Vite supports also other libraries and frameworks:

VueJs, React, Preact, Svelte, LitElement. (And probably more will join)

Summary

Vite seems to be a really good and promising build tool with nice features, newer tech usage and an alternative to other build tools.

Its not perfect (like every thing in our world...) so I think you should give it a try, and even if it won't fit your needs I suggest you to follow it and watch how it gonna evolve and maybe then consider trying it again.

Hope this post made the understanding of Vite a bit easier.
Thank you for reading :)

How to add FCM (Firebase Cloud Messaging) to VueJS

Fima Taf — Mon, 08 Mar 2021 17:09:15 +0000

Lately I had a task to implement FCM (Firebase Cloud Messaging) to a vue application I am working on, and I've found out that there are few guides but they didn't helped me too much because FCM's API, vue cli and vue it self were updated since then, so I've decided to write down a small and updated guide for it.

Step 1 - Add the service worker file

The first thing that we need to do is to add the service worker file firebase-messaging-sw.js to the public folder (It's important to use this file name because firebase will look for this file with that specific name, it can be changed tough but not in this guide - sorry).
(If you are not familiar with the words 'service worker' you can learn more about it Here or Here)

//firebase-messaging-sw.js

importScripts('https://www.gstatic.com/firebasejs/8.2.7/firebase-app.js')
importScripts('https://www.gstatic.com/firebasejs/8.2.7/firebase-messaging.js')

var firebaseConfig = {
  apiKey: <API-KEY>,
  authDomain: <AUTH-DOMAIN>,
  projectId: <PROJECT-ID>,
  storageBucket: <STORAGE-BUCKET>,
  messagingSenderId: <MESSAGING-SENDER-ID>,
  appId: <APP-ID>,
  measurementId: <MEASUREMENT-ID>
}

const app = firebase.initializeApp(firebaseConfig)

Replace the config json above with the one you got from firebase
Go to your project home page at firebase -> Press on the Settings icon -> click 'Project Settings' -> Scroll down -> firebaseConfig object

Step 2 - Register the service worker

The next step is to register the service worker.
We have few ways of doing that:

* If you prefer using firebase package jump to Step 3.

* Using vue cli's PWA plugin

If you've created your application through vue cli (v3+) and you've added the PWA support option (or added this plugin manually after the installation) you can register the service worker with registerServiceWorker.js file as follows:

//registerServiceWorker.js

import { register } from 'register-service-worker'

register('firebase-messaging-sw.js')

You can learn more about the above plugin and its events Here

* Using vanilla JS

If you prefer to register the service worker using only JS, you can add the following code (anywhere in your application):

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('firebase-messaging-sw.js')
    .then(reg => {
      console.log(`Service Worker Registration (Scope: ${reg.scope})`);
    })
    .catch(error => {
      const msg = `Service Worker Error (${error})`;
      console.error(msg);
    });
} else {
  // happens when the app isn't served over HTTPS or if the browser doesn't support service workers
  console.warn('Service Worker not available');
}

Step 3 - Using firebase module

Another way to register the service worker and subscribe to FCM is by installing the firebase package.
npm install firebase
After you've installed the package, create a file called firebase.js (or any other name you want) and add the following:

//firebase.js

import firebase from 'firebase/app'
import 'firebase/firebase-messaging'

var firebaseConfig = {
  apiKey: <API-KEY>,
  authDomain: <AUTH-DOMAIN>,
  projectId: <PROJECT-ID>,
  storageBucket: <STORAGE-BUCKET>,
  messagingSenderId: <MESSAGING-SENDER-ID>,
  appId: <APP-ID>,
  measurementId: <MEASUREMENT-ID>
}

firebase.initializeApp(firebaseConfig)

export default firebase.messaging()

Why do I need to instanciate firebase again? I already did it on step 1...

Because the service worker is running on another thread and not on the main one, therefor we cannot pass the instance to our main application.

Add FCM in vue 2

To add FCM as a global in your vue 2 application go to your main.js file and add the following:

//main.js

...
import firebaseMessaging from './firebase'

Vue.prototype.$messaging = firebaseMessaging

new Vue({
...

Now you can access FCM instance everywhere in your application by calling this.$messaging.

Add FCM in vue 3

Add as a global

You can add FCM as a global in vue 3 but then it won't be accessible in composition's API setup() method.

//main.js

...
import firebaseMessaging from './firebase'

const app = createApp(App)

app.config.globalProperties.$messaging = firebaseMessaging

app.mount('#app')

Now you can call it in every component:

//RandomComponent.vue

...
  mounted () {
    console.log('Firebase cloud messaging object', this.$messaging)
  }
...

Use Provide/Inject

Another way that vue 3 is providing to pass data is the Provide/Inject feature. (You can learn more about it Here)
In your App.vue (or any other component you want the 'Super Parent' to be) add the following:

//App.vue

...
<script>
import { provide } from 'vue'
import firebaseMessaging from './firebase'

export default {
  //options api
  provide: {
    messaging: firebaseMessaging
  }
  //composition api
  setup() {
    provide('messaging', firebaseMessaging)
  }
}
</script>
...

And Now you can call it by injecting it into any child component you want, for example:

//RandomChildComponent.vue

...
<script>
import { inject } from 'vue'

export default {
  //options api
  inject: ['messaging'],
  mounted () {
    console.log('Firebase cloud messaging object', this.$messaging)
  }
  //composition api
  setup() {
    const messaging = inject('messaging')

    console.log('Firebase cloud messaging object', messaging)
  }
}
</script>
...

Step 4 - Subscribe

After the service worker has been registered we can subscribe our client to FCM by calling the getToken() function.
Go back to firebase-messaging-sw.js (if you used step 2) or call firebase's messaging object (if you used step 3) and add the following code:

...
//firebase-messaging-sw.js (step 2)
app.messaging().getToken({ vapidKey: <KEY> })

//RandomChildComponent.vue (step 3)
messaging.getToken({ vapidKey: <KEY> })
...

To get the vapidKey go to firebase console:

Go to your project home page at firebase -> Press on the Settings icon -> click 'Project Settings' -> 'Cloud Messaging' tab -> 'Web configuration' > 'Web Push certificates'

In case you want to get the specific token of each client you can add the following to your getToken() function:

app.messaging().getToken({ vapidKey: <KEY> })
.then((currentToken) => {
  if (currentToken) {
    console.log('client token', currentToken)
  } else {
    console.log('No registration token available. Request permission to generate one.');
  }
}).catch((err) => {
  console.log('An error occurred while retrieving token. ', err);
})

In case you used step 3 (firebase package) `getToken()` method will also register the service worker for you.

The `getToken()` function will subscribe to FCM and since this moment your client will get push notification from FCM. yey :)

Hope it helped you somehow, enjoy :)

Including Vuejs application in another web application (with vue-cli >3 and Vite)

Fima Taf — Fri, 05 Feb 2021 17:15:29 +0000

Update:

Scroll to the bottom of the page if you want to achieve the same with Vite.

Recently I've got a task at my current company to write a small vue application (1 page only) and inject it into an existing legacy project (JSP in that case - I know it's old and ugly, but sometimes it's part of the job...).
I've been told that there is already a vue application that is being injected into the legacy application and it is working pretty nice, so I thought to my self 'Lets see how they configured it there, and use the same way to implement the new app'.
And then I realized that's not gonna work because the existing vue application was created 2 years ago and it was probably created with vue-cli 1 or 2 with all the 'pure' webpack configurations, while I am using vue-cli 3 in the new application (which has the vue.config.js file instead all the previous webpack config, and the other app has too much custom webpack configuration that it became too messy).

After I've searched the web for a solution for this problem, I didn't found something that solved my problem. Finally I've managed to solve it and I wanted to share it so maybe it'll help to someone else.

Overview

Vue is by default using the SPA (What is SPA?) approach which in this case is an advantage.
This example is probably not gonna work with SSR approach (What is SSR?).

After running npm run build command, you'll have all the generated files inside the dist folder.
In our case the generated index.html won't be used because we are going to include our vue application in another html file.
The files that we will use are app.[hash].js and chunk-vendors.[hash].js.
These 2 files are enough for vue to work, the app file is gonna import all the others files (js/css/etc..) that the application needs in order to work properly.

Including vue inside another app

1) Move the generated files:

As I mentioned before vue is by default using the SPA approach, so basically what we need to do is to take the content of the generated dist folder and put it somewhere in the existing app. (Don't forget to remove the index.html)
It is important to keep the content order as it (don't move the js files from the js folder or the css files because the app file will import the other files relative to his location).

2) Let the existing app to import vue app files:

Choose the html file in which you want the vue app to be included, and add the following:

<div id="app"></div>
<script src="js/app.[hash].js"></script>
<script src="js/chunk-vendors.[hash].js"></script>

Make sure that the scripts will be loaded after vue's root div (<div id="app"></div>) - If the scripts will be loaded before the root div, the vue application won't work.

Basically this is it, if you run your existing application, your vue app will work inside the html page that you've chosen to include it in.

Extras

Running on local environment

Of course before building the vue app you'll want to develop and test your vue app on your local environment.
In order to do that, you just need to replace the path of the js files at the html file to:

<script src="http://localhost:8080/js/app.js"></script>
<script src="http://localhost:8080/js/chunk-vendors.js"></script>

Notice that when running the vue app at dev mode it doesn't use the hash at the file name, the hash is being used only when building the app for production.

Import the files from external source

In some cases you'll want to keep the build files of the vue app in a different location and configure your existing app to loaded it from an external source (your-domain.com, AWS S3, Azure Blob, etc...).
There is a great webpack plugin that will help you with that -
webpack-require-from

Example:

If you have some server that is running on the domain your-cool-domain.com and this server will hold the vue app files, you can add a global variable at your existing app:

<script> window.vueAppSrc = "https://your-cool-domain.com/files/" </script>

Now in your vue app install the plugin npm install webpack-require-from -D.
Then in the vue.config.js file add the following:

const WebpackRequireFrom = require('webpack-require-from')
module.exports = {
  chainWebpack: config => {
    config.plugin('require-from').use(WebpackRequireFrom, [{ variableName: 'vueAppSrc' }])
  }
}

Now all the files of your vue app will be loaded from the url you've set in the global variable. (https://your-cool-domain.com/files/app.[hash].js)

Why there are 2 'base' files and not only 1?

Until webpack v4 we didn't had the chunk-vendors.[hash].js file, and all the third party modules were inside the app file, but since webpack v4 (vue-cli 3 is using webpack v4) webpack is splitting the app and the third party modules into different files by default for a better performance.

Can I reduce it to 1 file only?

Yes, it is possible by adding the following option into your vue.config.js file:

module.exports = {
  configureWebpack: config => {
    config.optimization.splitChunks = false
  }
}

This configuration will move the whole content of chunk-vendors file inside the app file (just like before webpack v4).
This option will have effect on the performance, so take it in count.

Vite

I've wanted to achieve the same thing with Vite, but because Vite's production build is based on rollup (which works different from webpack - you can learn more about it Here) I've created a plugin for the same issue:

vite-plugin-loading-script is a vite plugin for wrapping and loading the generated files/assets with a single script into the DOM instead of index.html.

You can learn about the plugin in the Docs Here.

The generated file will appear in the app's dist folder - app.[hash].js.

Conclution

It is pretty easy to include (or inject) a vue application into another web application.
But keep in mind that there might be some other problems that I didn't tackled in my case so it's not perfect, but still might be useful to someone else.

Hope it'll help you (at least partially) :)

DEV Community: Fima Taf

NolybabJS - i18n-to-csv and csv-to-i18n converter

NolybabJS

More info and examples can be found in the README file in the Github repository - nolybab-js

PNN Mirroring - determine yours workplace status

Intro

Where it all started

The Problem

PNN Mirroring

Step 1 (PNN)

Compensation and benefits [ ]

People and community [ ]

Self fulfillment [ ]

Career [ ]

Step 2 (Mirroring)

How to understand the results?

Step 3 (Extra step)

Q&A

Conclusion

Vite - A Short Overview

Vite

Development

What is dependency pre-bundling?

Running the dev server

Native ES Modules

HMR

Production

Downsides

So should I stop using vue-cli or webpack and switch to Vite?

Libraries and frameworks support

Summary

How to add FCM (Firebase Cloud Messaging) to VueJS

Step 1 - Add the service worker file

Step 2 - Register the service worker

* If you prefer using firebase package jump to Step 3.

* Using vue cli's PWA plugin

* Using vanilla JS

Step 3 - Using firebase module

Why do I need to instanciate firebase again? I already did it on step 1...

Add FCM in vue 2

Add FCM in vue 3

Add as a global

Use Provide/Inject

Step 4 - Subscribe

In case you used step 3 (firebase package) getToken() method will also register the service worker for you.

The getToken() function will subscribe to FCM and since this moment your client will get push notification from FCM. yey :)

Including Vuejs application in another web application (with vue-cli >3 and Vite)

Update:

Overview

Including vue inside another app

1) Move the generated files:

2) Let the existing app to import vue app files:

Extras

Running on local environment

Import the files from external source

Example:

Why there are 2 'base' files and not only 1?

Can I reduce it to 1 file only?

Vite

Conclution

In case you used step 3 (firebase package) `getToken()` method will also register the service worker for you.

The `getToken()` function will subscribe to FCM and since this moment your client will get push notification from FCM. yey :)