We Keep Coding

React Native: How to play local .midi files?

I have a React Native application in which I am trying to play different sounds with different extesions like .mp3, .wav, .midi. My issue is that I can't access the midi file that is stored locally in assets folder.
I tried by importing directly like
import midiFile from './assets/1.midi';
or through a index.js file in assets folder:
import midiFile from './1.mid';
const Assets = {
midiFile,
};
export default Assets;
And also tried to open with react-native-fs like const midiFile = await RNFS.readFile('../assets/1.midi'); but with every method I will get that the 1.midi file does not exist and I double, triple check everytime that the path is correct (created a totally new project with just App.tsx and assets folder)
How can I use my local .midi file? Is there any change needed in metro.config.js or other file?
My scope is to play the sound through the react-native-sound which works with .mp3 files but I also need to make it work with .midi files.
Thank you

Vue - Remove specific JavaScript files for production mode

I have lots of .js files to import in Vue components in my project. Some of these JavaScript files are meant to be used in development mode and they won't be included in production but I am not allowed to delete these files in project. For example;
There are two JavaScript files called authDev.js and authProd.js. Their usage is basically the same but their content are different from each other. Inside of these JavaScript files there are functions and I export them to be able to import in several Vue components.
The first question, If I dynamically export or import them, will webpack include these files when I run npm run build? In other words, let's say I created a JavaScript file but I didn't export it, so I didn't import it to anywhere either. Does webpack understand that this JavaScript file is not used in anywhere of these Vue project and discard it when it builds my project to production? Or does it include every single file that existed in the project?
The second question, is there a way to tell the webpack that those JavaScript files will not be included in dist folder these will... I mean, can I specify files for development and production?
First I thought I could import or export them based on a condition but when I try to put my imports in if statements, it gives me an error and says "imports must be at the top level". So I tried to export them dynamically but couldn't do it either.
Then I try to remove specific blocks of codes in files. There are packages and plugins to remove every console outputs from Vue projects but I couldn't find anything to remove or discard specific lines of codes.
At last, I decided to took a way to include and exclude specific files. Is there a way to do it? If it is, how do I do that? Thanks in advance.
THE SOLUTION (EDITED)
For a quick test, I created two .js files called auth-development.js and auth-production.js in src/assets/js/filename.js location. Here are the contents of them;
auth-production.js
export const auth = {
authLink: "http://production.authlink/something/v1/",
authText: "Production Mode"
}
auth-development.js
export const auth = {
authLink: "http://localhost:8080/something/v1/",
authText: "Development Mode"
}
Then I modified my webpack config which is in the vue.config.js file;
const path = require('path');
module.exports = {
configureWebpack: {
resolve: {
alias: {
'conditionalAuth': path.resolve(__dirname, `src/assets/js/auth-${process.env.NODE_ENV}.js`)
}
}
}
}
Vue was giving "path is undefined" error, I added the top part of the code to handle that error. I used process.env.NODE_ENV to get the words development and production to add the end of my javascript files so that I can define their path.
Then I dynamically imported this conditionalAuth to a test component called "HelloWorld" as follows;
<script>
import * as auth from 'conditionalAuth';
export default {
name: 'HelloWorld',
data(){
return {
auth: auth
}
}
}
</script>
And I used them like this;
<template>
<div>
<p>You are in the {{ auth.auth.authText}}</p>
<p>{{ auth.auth.authLink }}</p>
</div>
</template>
In this way when I npm run serve it imports auth-development.js but if I npm run build and try the index.html in the dist folder on a live server, it only imports the auth-production.js.
At last, when I check the final build, auth-development.js is not built for my dist version of the project. It only imports the production javascript file in the chunk.

Assuming the file names are: auth-development.js and auth-production.js, you can use webpack alias to import file according to environment.
resolve: {
alias: {
'conditionalAuth': path.resolve(__dirname, `path/to/js/auth-${process.env.NODE_ENV}.js`)
},
extensions: ['.js', '.vue', '.json']
}
then you should be able to import the desired file like:
import * as auth from 'conditionalAuth';

Angular how to share the same setting of json configuration file for different environment

I have an Angular 9+ application that uses APP_INITILIZER to load the external json configuration file so that we can modify the file without rebuilding the app.
We have a few such configuration files for different environments like dev, qa, staging, etc. And in angular.json file, we specify which file to use in assets section.
We have some settings that are not related to environment. For example, the settings for colour
...
,
{
"title":"red",
"header":"blue"
},
...
The issue is each time we add new settings like above, we need to duplicate it in every config file. I wonder if there's a way to only add the common settings once, and reuse them in all other config files?

The approach I usually take is to have a common environment file like environment.common.ts but the file looks slightly different
export const commonEnv = {
title: 'red',
header: 'blue'
};
I then just merge the settings with the normal environment file using Object.assign.
import { commonEnv } from "./../environment.common";
import { environment } from './../environments/environment';
const mergedSettings = Object.assign(commonEnv, environment);
You can now use mergedSettings to get to all the settings.

VueJS reference a local JSON file outside of build

I have some JSON data that I'm working with in a Vue project. In development I'm referencing and using the JSON data as shown below
<script>
import Versions from './../JSONVersionData/versions.json'
export default {
data: function () {
return {
Versions
}
},
}
</script>
My webpack configuration compiles all my Javascript to an app.js file in dist. This means that the JSON files are compiles into this app.js file.
My aim is to allow the versions.json file to manually edited in the dist file so it can be maintained without needing the end user to recompile the JS assets.
Is this possible? Can I make my Javascript look for a local copy of the JSON data file rather than a bundled version of the file?

Angular 2 - TypeScript File not resolving to .js extension .NET MVC Application

Background
I am migrating one of the apps from Angularjs 1.x to Angular 2. Being new to the Angular 2 , I am first trying to get grasp of different files used for configuration
Before jumping to my app, I created a small dummy app with the help of quickstart files from Angular Quickstart on gitub
https://guthub.com/angular/quickstart
I move those files into a .NET MVc 5.0 web app. When I build the app using the npm CLI
npm start
It creates an index.htm, and that successfully ran. My next step was to use a MVC View instead of this index.htm, This time, I created a default route for localhost/ pointing to PublicController with a view Index.cshtml.
Problem Statement
While using MVC views, routed through Controllers, what I see is that main.ts file when compiled omits the file extension - *.js For e.g.
import { AppComponent } from './app.component';
in my Main.ts, when compiled translates to (in main.ts)
var app_component_1 = require("./app.component");
My page ran with a console error, and I saw 404 error for not been able to resolve app.component.
All works out fine, If I manually type in .js in my main.js file. But that's not the solution.
var app_component_1 = require("./app.component.js");
Question
Which setting should I change and which file that should resolve filename in the main.ts to filename.js

Finally, found the solution.. problem is with the dot in the file name , Issue is reported here too https://github.com/systemjs/systemjs/issues/756
I added the following setting in the systemjs.config file
packages: {
'.': {
defaultExtension: 'js'
},