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.
Related
I'm new to swift development, so excuse the basic question, but when I import a package called SwiftHttp in a local package, I get this error:
Compiling for macOS 10.13, but module 'SwiftHttp' has a minimum deployment target of macOS 10.15:
So I've gone in to my project's setting, and changed the minimum deployments to macOS 11.0, both in the "project" section, and for all targets, but that error remains in the file. Is there anywhere else I need to update that setting? Or is there something I need to do to "propagate" that setting to the local package?
Images of what I have...
Project settings:
Target settings
Error:
I managed to fix it by explicitly setting a supported platform version in package.swift in my own package, which I use" in this project. The relevant part now looks like this:
let package = Package(
name: "Swiftodon",
platforms: [
.macOS(.v10_15),
.iOS(.v13),
.tvOS(.v13),
.watchOS(.v6)
],
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:`
],
},
});
});
}
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
}
}
I created an own cordova plugin for use in an Ionic 3 project.
The js-module requires other npm/node packages (in my case for XML processing).
e.g.
var builder = require('xmlbuilder');
I read X articles about hooks and other crazy stuff, but nothing really helpful.
Is there no easy way to add such a trivial thing to the build-chain just by some simple configuration of the dependencies?
Edit:
Let´s take that simple plugin as example: https://github.com/don/cordova-plugin-hello
The great function in https://github.com/don/cordova-plugin-hello/blob/master/www/hello.js should be able to use the xmlbuilder.
So I changed the file to:
/*global cordova, module*/
var builder = require('xmlbuilder');
module.exports = {
greet: function (name, successCallback, errorCallback) {
cordova.exec(successCallback, errorCallback, "Hello", "greet", [name]);
}
};
I added the module via npm install to the ionic project, but that doesn´t help. How can I make the modules somehow available for the plugins?
I am learning Ionic 2; writing code in Visual Studio code. I created project using following command:
> ionic start --v2 MyFirstIonic blank
And then
> cd MyFirstIonic
> ionic platform add android
When I build and run, > ionic run android, ionic creates assets folder in www directory and copies font files for Ionicons, Roboto, and Noto-sans, which are added in apk during build process. I'd like to exclude Ionicons, Roboto, and Noto-Sans from final build, and use FontAwesome files instead. How will I be able to achieve this?
You need to edit your node_modules/#ionic/app-scripts/copy.config.js.
Sample file here.
Remove copyFonts entry :
copyFonts: {
src: ['{{ROOT}}/node_modules/ionicons/dist/fonts/**/*', '{{ROOT}}/node_modules/ionic-angular/fonts/**/*'],
dest: '{{WWW}}/assets/fonts'
},
from the file. This copies the ionicon fonts to your www folder.
Also remove the assets you do not need from src/assets folder.
You can edit copy.config.js file to add any other assets into the build process.
Refer answers here.
I would suggest you delete the unnecessary files from:
[project]/node_modules/ionic-angular/fonts/
(Keep the ionicons.* files.)
You'll still have to do that every time you update ionic-angular but it's easier and less error prone than keeping track of changes to the app-scripts bundle.
Additionally, comment out the roboto and noto-sans imports in:
[project]/src/theme/variables.scss
--
If you still want to update the script then the right way to do that is to copy the file locally as [project]/src/webpack.config.js and add the following entry to your package.json:
"config": {
"ionic_webpack": "./webpack.config.js"
}
--
Hope that helps!