I'm using vue-cli version 3.11.0 to build my web app along with the pwa plugin. I'd like to change the appname (the one that shows up when adding to homescreen). How do I do so? I don't see any manifest.json file anywhere in the project.
If you using #vue/cli-plugin-pwa, check this.
// vue.config.js in your project (IF NOT EXIST, create new one)
module.exports = {
// ...other vue-cli plugin options...
pwa: {
name: 'My App', // <---- this is PWA name
}
}
Related
I've been sitting last week with the following problem - I wanted to compile my Ionic project not only to android version, but also to electron desktop app. But, every time when I deployed packed electron version, I've got a white screen.
How to reproduce problem:
# i create simple angular app
ionic start example-app tabs --type angular
cd example-app
# i add #capacitor-community version of electron, since the original electron is deprecated
npm i #capacitor-community/electron
# required to get a www folder
ionic build
# add electron folder to project
npx cap add #capacitor-community/electron
# now we work inside electron project...
cd electron
# we can build project
npm run build
# we can start live project
npm run electron:start-live
# and now we have crash - just a blank white window
npm run electron:pack
I've been able to get visible window in deployed version, making the following change inside ./electron/src/setup.ts file. You need to find the following fragment:
// Set a CSP up for our application based on the custom scheme
export function setupContentSecurityPolicy(customScheme: string): void {
session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
callback({
responseHeaders: {
...details.responseHeaders,
'Content-Security-Policy': [
electronIsDev
? `default-src ${customScheme}://* 'unsafe-inline' devtools://* 'unsafe-eval' data:`
: `default-src ${customScheme}://* 'unsafe-inline' data:`,
],
},
});
});
}
and change it to:
// Set a CSP up for our application based on the custom scheme
export function setupContentSecurityPolicy(customScheme: string): void {
session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
callback({
responseHeaders: {
...details.responseHeaders,
'Content-Security-Policy': [
`default-src ${customScheme}://* 'unsafe-inline' devtools://* 'unsafe-eval' data:`
],
},
});
});
}
My project it's a Stencil+Ionic PWA starter and I'm using file .env to use my enviroment variables.
On browser it's okay, but If I use Appflow and I create an APK, I have the error "process is note defined"
How can I use the enviroment variabiles to work properly on native builds?
I'm not using Angular and I've found only Angular solutions.
I don't have Growth plan so I can't use enviroment in Appflow.
Since version 2.3.0, Stencil has an env option in stencil.config.ts. It was added in this commit, which is the only documentation that's currently available for it.
Basically you do something like
// stencil.config.ts
export const config: Config = {
// ...
env: {
FOO: 'bar'
}
}
and then in your modules you can import Env from Stencil:
import { Component, Env } from '#stencil/core';
#Component({ tag: 'my-component' })
export class MyComponent {
render() {
return <p>{Env.foo}</p>
}
}
Each Ionic project has a project configuration file ionic.config.json where you can configure the human-readable name of the app:
{
// The human-readable name of the app.
"name": "My App",
// The project type of the app. The CLI uses this value to determine which
// commands and command options are available, what to output for help
// documentation, and what to use for web asset builds and the dev server.
"type": "angular",
// The App ID for Ionic Appflow.
"id": "abc123",
// Configuration object for integrations such as Cordova and Capacitor.
"integrations": {
"cordova": {
...
}
},
// Hook configuration--see the Hooks section below for details.
"hooks": {
...
}
}
Using capacitor gives us another opportunity to place an app name:
{
// The package name for Android and the bundle identifier for iOS.
"appId": "com.company.appname",
// Your app's name.
"appName": "Capacitor Kitchen Sink",
// Sets the directory of your built web assets. This is the directory that will be
// used to run your app in a native environment.
"webDir": "www",
// The JavaScript package manager to use, either npm or yarn.
"npmClient": "npm",
...
}
Where is the right place for the app name?
Thanks in advance
Capacitor works with any framework, not just with Ionic, so the app name should be in the capacitor.config.json.
But as you said, Capacitor embraces the idea of "Code once, configure everywhere", so that appName is used only when you add the ios or android platforms, once you have added them you have to change the name from Xcode for iOS apps or from Android Studio for Android apps.
Use Cordova's config.xml. There you have the tag <name>MyAppName</name> for this purpose. This is the name that will finally appear under the icon.
<widget id="com.mycompany.myapppackage" version="0.0.1" versionCode="1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>My App's name</name>
<description>A nice description of my app.</description>
<author email="mymail#myserver.com" href="https://www.myserver.com">Author's name</author>
...
</widget>
More info: https://cordova.apache.org/docs/en/latest/config_ref/
I'm in the process of migrating my App built on Android using Java to using Flutter + Dart.
Like my current app, I am adding 2 build types - release and debug in the build.gradle file. I am specifying different Server API URLs to be used in these build Types.
Sample buildType information -
buildTypes {
release {
manifestPlaceholders = [hostName: "PROD SERVER", "version": "v1"]
}
debug {
manifestPlaceholders = [hostName: "STAGE SERVER", "version": "v1"]
}
}
In native android, I was able to use android.content.pm.ApplicationInfo and android.os.Bundle to get the information in the code to dynamically use the base URLs.
Sample code from my native app is as follows :
ApplicationInfo app = this.getPackageManager()
.getApplicationInfo(this.getPackageName(), PackageManager.GET_META_DATA);
Bundle bundle = app.metaData;
API_HOST = bundle.getString("api.host");
API_VERSION = bundle.getString("api.version");
Is there a flutter + dart alternative to this?
I have been reading up and the way out seems to be by creating multiple Main files and then building the production/dev app by using the appropriate file.
I have an Ionic project and I use external tool for processing Coffee and SCSS. By default livereload in Ionic project watches everything. Where I can change this?
This setting is named watchPatterns (source) and can be changed in ionic.project file:
{
...
"watchPatterns": ["www/**/*", "!www/lib/**/*", "!www/config.codekit", "!www/**/*.scss", "!www/**/*.coffee"]
}
Default value: ["www/**/*", "!www/lib/**/*"]
I just wanted to give an update as the accepted answer does not work for the newer version of Ionic CLI.
For Ionic CLI v3.1.2 & Ionic Framework v1.3.3:
Versions:
Ionic CLI : 3.1.2
Ionic Framework : ionic1 1.3.3
#ionic/cli-utils : 1.1.2
#ionic/cli-plugin-ionic1 : 1.1.2
The "watch pattern" for livereload is not configurable from your project files. You have to change WATCH_PATTERNS in the source code itself.
If you've built your Ionic v1 app using the tabs starter app (doc):
Example:ionic start myApp tabs --type ionic1
The file you will need to change is in the directory ./myApp/node_modules/#ionic/cli-plugin-ionic1/dist/serve/config.js
Below is what the file will look like:
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const path = require("path");
exports.WATCH_PATTERNS = [
'scss/**/*',
'www/**/*',
'!www/lib/**/*',
'!www/**/*.map'
];
exports.LOGGER_DIR = '__ion-dev-server';
exports.IONIC_LAB_URL = '/ionic-lab';
exports.DEFAULT_ADDRESS = '0.0.0.0';
exports.DEFAULT_LIVERELOAD_PORT = 35729;
exports.DEFAULT_SERVER_PORT = 8100;
exports.IOS_PLATFORM_PATH = path.join('platforms', 'ios', 'www');
exports.ANDROID_PLATFORM_PATH = path.join('platforms', 'android', 'assets', 'www');
From there you can modify the WATCH_PATTERNS array to watch or '!' not watch a particular directory or file.
This isn't an ideal solution since the starter app uses the Node Package Manager (NPM) to manage the #ionic/cli-plugin-ionic1 dependency. If you decide to run this project on another computer or update your node modules, then you would have to re-do the steps above to customize the watch patterns. However, you can fork the source code and tell NPM to use your version instead.