Get appId form Capacitor config file - vue.js

Is there a way to retrieve appId globally from capacitor.config.json file? In my Quasar app I use this for linking back to the app. So when I change it from 'dev' to 'prod' version of the app I need to change it in my Vue component file, info.plist for ios and strings.xml for android.
UPD:
From this thread I've known that it's not possible to handle just via capacitor.config.json. But what could be a workaround?

You can use Device plugin, the getInfo function contains the appId
import { Plugins } from '#capacitor/core';
const { Device } = Plugins;
const info = await Device.getInfo();
console.log(info);
// Example output:
{
"diskFree": 12228108288,
"appVersion": "1.0.2",
"appBuild": "123",
"appId": "com.capacitorjs.myapp",
"appName": "MyApp",
"operatingSystem": "ios",
"osVersion": "11.2",
"platform": "ios",
"memUsed": 93851648,
"diskTotal": 499054952448,
"model": "iPhone",
"manufacturer": "Apple",
"uuid": "84AE7AA1-7000-4696-8A74-4FD588A4A5C7",
"isVirtual":true
}
https://capacitorjs.com/docs/apis/device#getinfo

Related

How to setup plain text env vars in Expo build?

I'm working on an expo project and trying to link environment variables for build profiles. I was trying to achieve that using eas.json but I cannot get it to work.
I have two build profiles - development and production:
{
"cli": {
"version": ">= 3.3.1"
},
"build": {
"development": {
"distribution": "internal",
"env": {
"API_URL": "https://staging-api.example.com",
"STRIPE_ENV": "test"
},
"ios": {
"resourceClass": "m1-medium"
}
},
"production": {
"env": {
"API_URL": "https://api.example.com",
"STRIPE_ENV": "production"
},
"ios": {
"resourceClass": "m1-medium"
},
"autoIncrement": true
}
},
"submit": {
"production": {
...
}
}
}
Build command:
eas build --profile development --platform ios
Based on their documentation, I sohuld be able to use process.env.API_URL but it's undefined.
Am I missing something?
Putting those values in eas.json is only ensuring that those envs will be set during the build process on EAS. To pass them to the application code you need to pass those values to the extra field in app.config.js.
process.env.API_URL will be defined when evaluating app.config.js, but in your application code, you need to access those values via expo-constants package.

How to deploy Nuxt.js(SSR with Express.js) to Vercel via Gitlab?

I have successfully built my app and only remain step is deploy to the host Vercel via my repo on Gitlab
I use Nuxt.js(SSR type) with server Express.js and Nuxt.js Now Builder to deploy host Vercel via repo Gitlab
This is structure
api/
--| index.js
now.json
nuxt.config.js
In index.js
const express = require("express");
const app = express();
const bodyParser = require("body-parser");
const products = require("./routes/product/products");
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
// Import API Routes
app.use(products);
// Export the server middleware
module.exports = {
path: "/api",
handler: app
};
In now.json
{
"version": 2,
"builds": [
{
"src": "nuxt.config.js",
"use": "#nuxtjs/now-builder",
"config": {
"serverFiles": [
"package.json"
]
}
}
]
}
And in nuxt.config.js
...
serverMiddleware: [
// API middleware
"~/api/index.js"
]
...
According to Vercel documentation, deploying is very easy, just commit and push code to Gitlab to complete
However, i always get error as below
I don't understand why? I don't know what i missed. Please help me and i'm very grateful for the help
narze, thank you for your solution, unfortunately it didn't work for me but pointed me in the right direction.
Here is my working now.json:
{
"version": 2,
"env": {
"ON_VERCEL": "true"
},
"builds": [
{
"src": "api/**/*.js",
"use": "#now/node"
},
{
"src": "nuxt.config.js",
"use": "#nuxtjs/now-builder"
}
],
"routes": [
{ "src": "/api/(.*)", "dest": "api/index.js" },
{ "src": "/api", "dest": "api/index.js" },
{ "src": "/(.*)", "dest": "$1" }
]
}
serverMiddleware in nuxt.config.js
serverMiddleware: isServerlessEnvironment ? [] : [
'~/api/index.js'
],
where isServerlessEnvironment defined on the very top of nuxt.config.js as
const isServerlessEnvironment = process.env.ON_VERCEL=="true"
API files need to be compiled with #now/node.
Routes need to be set up to separate nuxt routes from api routes.
With conditional isServerlessEnvironment in nuxt.config.js it works on local server with yarn dev and vercel server.
Credits to this article: Nuxt.js with an Express.js API server running on Now.sh
Thank you all for being helpful :)
I have similar problem with deploying Nuxt on Vercel with serverMiddleware's which returned 405 (Not Allowed). I solved it using this doc Nuxt Vercel Builder by specifying property serverFiles in vercel.json:
{
"builds": [
{
"src": "nuxt.config.js",
"use": "#nuxtjs/vercel-builder",
"config": {
"serverFiles": ["server-middleware/**"]
}
}
]
}
If you need to include files in the server lambda that are not built
by webpack or within static/, such as a local module or
serverMiddleware, you may specify them with this option. Each item can
be a glob pattern.
I know it's a bit late now lol. But I wrote an article to demonstrate the whole process to get your app up and running on Vercel. You can find it here.

React Native Maps in Expo

I know we need to add an API key to view a Google map
Then, if react-native-maps is integrated with Expo and we use MapView just by importing from React-native.
So where to add the API key in native Map Expo ?
You need to add keys to in your app.json, here's the expo guide you look at expo guide
In app.json, copy the API key from android.config.googleSignIn to android.config.googleMaps.apiKey
It should look like this:
{
"expo": {
"ios": {
"config": {
"googleMapsApiKey": "YOUR_GOOGLE_MAP_API_KEY_HERE"
}
},
"android": {
"config": {
"googleMaps": {
"apiKey": "YOUR_GOOGLE_MAP_API_KEY_HERE"
}
}
},
}
}

How to do module name alias for third party package

I have a app that created by react-native init command.
My app import websocket package which in turn require http package and cause error said "Unable to resolve module http".
i.e: myApp -> 3rd-module -> ws -> http
I try to work-around by install "#tradle/react-native-http", and added follow lines to my app's package json file:
"browser": { "http": "#tradle/react-native-http" },
"react-native": { "http": "#tradle/react-native-http" },
but it doesn't work.
I also try using babel-plugin-module-resolver but unluck either. Here is my .babelrc :
{
"presets": ["module:metro-react-native-babel-preset"],
"plugins": [
[
"#babel/plugin-proposal-decorators",
{
"legacy": true
}
],
["module-resolver", {
"alias": {
"#tradle/react-native-http": "http"
}
}]
]
}
How to do alias for my case? I research to fixing this problem by using webpack configuration, but don't know where is the configure file. After google, i think project created by react-native init use metro config instead of webpack.
try
["module-resolver", {
"alias": {
"http":"#tradle/react-native-http"
}
}]

How to add custom build options to app.json

I have 2 index pages: the usual one index.html and indexChrome.html. I would like to add custom build options to app.json to make Sencha Touch to use the second file for my custom build. I tried:
"builds": {
"web": {
"default": true
},
"native": {
"packager": "phonegap",
"phonegap" : {
"config": {
"platform": "android",
"remote":true,
"id": "com.company.myapp",
"name" : "MyApp"
}
}
},
"chrome": { // <-- here I would like my custom options if possible
"indexHtmlPath": "indexChrome.html"
"buildPath": "googlechromeapp" // <-- I know it's not valid, but is there a way to change the build path here somehow too?
}
}
And then use "sencha app build chrome" command, but it's not working. How to accomplish this?