We Keep Coding

How could I show current GIT branch in my Vue 3 Web application

I like to have a visual cue of the current GIT branch I am working on and have that set up in my IDE (I currently use VIM but I know VSCode also does this). I like/need it so much that I would really also like to see it in my development build when serving locally.
I currently do this manually with a label that I update by hand each time I create a new branch to work on. However, I often forget to do this and subsequently confuse myself.
I'm wondering whether it would be possible to pull this information from GIT and show it in my UI in the same way VSCode does?
Specifically I am using Vue 3 and Typescript but I guess that is not super relevant to the general problem.
Anyone have a feel of how you would do this?

If you are using Webpack as a bundler, there is a git-commit-info-webpack-plugin which can write some Git info (branch name, last commit date/hash/author) into a json file on each build.
Just import the json file into your app and use it....

Can't profile Babel-transpiled Node.js app with Spy-js in WebStorm

So me and my team are currently in the process of profiling our Node.js app to try and improve performance on it as much as we can. After doing it with Chrome's DevTools for Node.js which was not excruciatingly hard to achieve, I thought of giving Jetbrains' Spy-js a try and so far I've had no luck.
The app is run from inside a Docker container, and the code is transpiled with babel-cli on the fly so this surely complicates things a bit. Even though I could probably get it working outside Docker and somehow connect it to the other containers, I could not go as far as to try that since I haven't managed to run the app with Spy-js.
Spy-js differs from DevTools in that it doesn't just connect with the app through the native inspector's debugging port, but rather requires the app to be run from the tool so that it can also intercept and modify script execution on the fly (as per their docs).
Since I'm using babel-node to run the app, I've tried creating a new Run/Debug configuration in WebStorm pointing to it (from a fresh global install of babel-cli) as the "Node interpreter" value in the options window. I've also already added all of the app's required environment variables to the options.
With the above setup, attempting to run the new Spy-js configuration results in the following errors:
Undefined handler Super
session (ak133): Error while instrumenting '<app directory here>/node_modules/p-locate/index.js'
(g is not a function)
session (ak133): Unexpected identifier
<app directory here>/node_modules/boom/lib/index.js:249
constructor(message, options undefined {}) {
^^^^^^^^^
Which looks like it's having trouble transpiling dependencies (boom). The original source for this was options = {} so I'm not sure why it would be converted to that either.
As much as I know this is not officially supported yet, I'd really appreciate being able to get it running somehow as Spy-js seems to do its own thing and isn't just another wrapper for the native v8 profiler, so any help would be appreciated.

Try using -r babel-register instead of babel-node - does it make things any better?
Of course, you need adding .babelrc to your project, like
{
"presets": ["env"]
}

Why vue acts differently with Laravel than standalone vue app?

I don't know why Vue acts differently with Laravel than standalone Vue app. Maybe I can't understand the environment it needs to work correctly. Here is what's happening which made me post this question.
When I install standalone Vue app, Let's say, when I install it in a completely different directory using vue init webpack vueapp, It works as it should. When I update anything in .vue file, It gets updated in the browser too which is expected behaviour in my mind or maybe it's because I am executing it in a development environment using npm run dev.
But when I use vue with laravel, I can load the modules and I can see loaded modules in the browser, but when I update something a component, It won't update in the browser! It just does not. I have to reload a page every time I update markup in the component file.
Also, when I execute npm run dev in the vue app with Laravel, It does not take over the terminal as it does in the standalone vue app. It is obvious as we can't execute vue as well as laravel in the same development environment as vue uses nodejs which uses the port 8080 and apache uses the port 80.
I don't know what I am missing but it's eating my head since last few days. I surfed almost all the tutorials available on the internet and all the available StackOverflow questions but still, I can't get it! I think it's the normal behaviour but I have less experience with vue.js as I am a newbie in vue.js.
Any help would be appreciated!

What you are saying is true and it was meant to be that way.
But you can use a library that comes withlaravel to accomplish that. first.
add .browserSync(); to your webpack.mix.js
instead of npm run dev use npm run watch. This will help you not to refresh.
and that is how you have the same effect. Hope its not much.

How to pass Node environment variables to React Native JS code

I am trying to access node environment variable from JS code of React Native, but somehow whatever I pass it is not used.
If I try something like:
NODE_ENV=test react-native run-android
I expect process.env.NODE_ENV to be equal to test however it is overwritten to production or development according to the __DEV__ param of the bundle request.
What is the suggested way of passing environment variables to JS code in React Native?
Thanks

I'm sure you have probably have moved on from this (5 months later), but I'll answer it incase anyone else has found themself here.
At best you'll set an env var in that react-native process which won't even set it in the packager. However, that doesn't seem like what you want. You want, if I understand correctly, to have access to that variable in your app code. The reason you can't do that by setting a variable that way is that node isn't running your app, it's just packaging it and it's being run in a chrome webworker (in remote dev mode) or WebKit (in the case of on device).
To do what you want, see here
To read more about the JS environment, read here

Breaking a React-Native application into plugable modules

I am looking to write a React-Native application. I want to be able to download new modules at run-time on the device to extend functionality. There would be some core logic that knows how to request new modules based on some form input like a dbs. I do not want to bundle everything into a single monolithic bundle which is what I believe happens now with the built in packager.
This would something similar to how RequireJS works in browser. What I need to know is:
How do I build independent modules? react-native bundle doesn't seem to allow me to select which root modules to begin with and only works on root project
How can I at run-time request new functionality be injected into the current JavaScript environment?

React native starts by pointing at a JS bundle. This means that you would at least have to restart the app to reload the js bundle (assuming that you're reading it from a server and not from the ios device itself).
If you did have a way to update the js files on the server (through some sort of web service that updated based on things the user does) then restarting the app could theoretically reload the JS and provide new functionality to the app.

I was able to get something pretty close to this in JS only. First I had to expose a few more options in the current react-native bundler, mainly, the url (to change the "main" module) and blacklist (to keep from bundling react-native in second bundle) options to their packager (http://github.com/facebook/react-native/blob/master/packager/README.md).
I then had to write a custom fetcher that would download the second bundle and use eval() to evaluate it in the current environment.
The one rub is that I had to add __d('react-native',[],require('react-native')) in the first bundle which I think work like define() from require.js. This exports 'react-native' as an unmangled name that the modules which I plug in can access via normal require() statements. It's a bit confusing at first but from what I can tell they React-native packager works a little like r.js (see http://requirejs.org/docs/optimization.html).