Can't import Firebase Firestore into Vuejs webpack project - firebase

I'm trying to use the new Firestore DB into a brand new project with Vuejs, but I have errors with webpack.
I'm starting the project from scratch, with vue init webpack. However, although I can import and use the DB in a plain nodejs script (keyfile.json is not commited for security), I can't make it work in the Vuejs project.
Steps to reproduce (commited to Github for easy access)
Initialize a new project with vue init webpack
Copied the Firestore initializer
Imported it into main.js
Tried to reconfigure webpack, but errors appear (described in detail here)
Then I have errors in console, with the main page not rendering. I've tried to reconfigure webpack in two ways, but no success… :(
Can anyone help me in figuring out how to make Firestore work in a webpack Vuejs project?
Thanks a lot!

Related

NextJS to ElectronJS

I have a web app in NextJS and TypeScript working fine. Now, I want to move it to ElectonJS so I can move from the web and create desktop app versions. I have tried different approaches but nothing worked for me. I also failed to find a good documentation or article about migrating NextJS to ElectronJS.
I am using nextron but I can also use some other if recommended.
Approach 1: I created a new nextron app using "yarn create nextron-app my-app basic-typescript" command as mentioned on nextron guide. Then I moved the whole code inside the renderer directory but it is showing an error when I compile. Error in Approach 1
Approach 2: I created a dummy nextron app and install all necessary dependencies there, then I copied the files, dependencies etc to my NextJS app and moved the pages folder to renderer along with the necessary files but it is also showing error.Error in Approach 2
My NextJS App
Can anyone help please?

Adding template to existing React Application

I have a medium experience in developing applications with React, and up to study and experience I have always used very basic layouts, creating components and styling with a .css file
Currently I want to start using the various react templates that I find online, such as:
"Connect Plus React Free Admin Template" etc.
This is the first time I try to integrate a template into an existing application.
So I tried to copy from the template what I needed and then bring it back to my application.
Then update package.json and package-lock.json and run npm install.
Unfortunately, then starting the app with npm start it broke and did not start anymore.
Do you have any tips, advice or guides on how to do this?

How to integrate Vue in Symfony 5

Symfony 5, Vue 2.6, Webpack 4
I have seen many guides explaining how to create a SPA, but right now I want to integrate Vue in just one view, as the app has many views and data, it would take couple of months before we can implement whole new framework in our app. Currently we are using webpack and we are having some problems with integration.So,
Would you use webpack encore instead of webpack and if so, why?
Our main goal is to optimize everything - what does webpack encore loads additionally that webpack doesn't have and does it contain bunch of useless stuff?
Importing modules in js files - js has no way of knowing the hash that the webpack generated, so importing must be done inside twig in the script block. You can only import modules at the top level, so putting script type=module solves that issue, but then browser cannot guess the MIME type of the .vue files, even when X-Content-Type-Options=nosniff - any workaround that?
Are there any other options to import asset from the webpack build including chunkhash?

Creating reusable library for ionic projects

We have built an analytics package that uses angularfire2 as a way to interact with firebase db. rest of the code is just regular typescript files more like utility classes.
is there a way to make it reusable by simply somehow referring to an existing ionic project.
Even if it's possible my other concern is that the host ionic project may have its on angularfire config. So would the imported analytic project lib will be able to keep its on fire config and connection in isolation?
Please advise how to achieve this reusability?

can i modify underlaying webpack config in meteor angular2?

I'm building a meteor app with meteor-angular2 package. But with .css it's quite unfunny so far.. As soon is try to import a css file in a component, meteor is "modules-loader" is telling that this is not a module i'm trying to import (true basically :D)
Now i'm fiddling around with a basic webpack+ng2 setup and i can get it easily running with direct imports of .css files in typescript - just because i can configure the webpack loaders correctly (you can even get css-modules in this way with ng2!)
So, in the docs of the latest meteor angular2 package release it is somwhere written that it is basically packing all the stuff with webpack.
What's the right way to modify this underlaying webpack config? Is it even possible? Do i have to fork the package repo to change it? At a first shot i didn't find the webpack stuff in there..

Resources