I'm trying to figure out what are the commands or ways to reload my browser platform on every change detected with ionic or cordova because for me this lineis not working:
ionic run browser --livereload
So I'm wondering if you know how to do that. I'm using cordova plugins by the way.
Kind regards!
You can start your app in your browser with
ionic serve
This will refresh the app after every save. There were some build changes after the ionic rc2 release, so be sure to update to the latest version. That way it will even show you a loading toast, as well as give you a nicely formatted js error whenever your app fails to launch.
To update your project to the latest build version, update your package.json
{
...
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
...
},
"devDependencies": {
"#ionic/app-scripts": "0.0.47",
"typescript": "2.0.9"
}
}
You can find an example of a full package.json here: https://github.com/driftyco/ionic2-app-base
ionic serve is working fine for me.
for browser, ionic serve detect every change in code and refresh the page.
You can find some commands here:
https://ionicframework.com/docs/cli/serve/
on Cli, you may try npm run dev too. --> Runs ionic serve ( development ). it's short, concise, gets the job done most times. give it a try
Related
I have an expo (v 46.0.0) project with EAS with the following build config (eas.json).
{
"cli": {
"version": ">= 1.1.0"
},
"build": {
"production": {
"channel": "production",
"env": {
"APP_ENV": "production"
},
"credentialsSource": "local"
},
"preview": {
"channel": "staging",
"env": {
"APP_ENV": "staging"
},
"credentialsSource": "local"
},
"development": {
"distribution": "internal",
"developmentClient": true,
"ios": {
"simulator": true
}
}
},
"submit": {
"production": {}
}
}
A preview build shows up in Expo as follows:
Now I used EAS Update to push some changes to the existing build with the following command: eas update --branch staging.
The update shows up in expo and it is also possible to use the Preview QR Code with Expo Go. However the changes do not populate to the preview version submitted to App Store and Play Store.
Do i need to do some additional steps to link the created update with the existing staging build?
After reading the docs, I think you have to have to think differently about branch and channel.
Channels are specified at build time and exist inside a build's native code.
and
Branches are an ordered list of updates, similar to a Git branch, which is an ordered list of commits.
With EAS Update, we can link any channel to any branch, allowing us to make different updates available to different builds.
So first you have to "publish" the update group to a branch and then you gotta link the channel to point to that branch.
I imagine it could look like
eas update --branch staging-1.0.1
eas channel:edit staging --branch staging-1.0.1
Please correct me if I'm wrong about anything here.
https://github.com/expo/eas-cli#eas-channeledit-name
This was also hard to understand for me but now I got it. Unfortunately the docs are so far not really clear.
EAS builds retrieve updates from the channel specified in eas.json. So normally for production builds you would have a channel named "production".
If you now want to run an EAS Update to distribute changes to clients you won't publish directly to a channel but instead you go a detour using branches. Because branches are linked to channels you can work with different branches (e.g. for different versions) and then you only need to change the branch-channel link to publish an update.
To change the linking between a branch and a channel you run:
eas channel:edit
In an simplified setup (like mine) you would have a git branch called production and also a channel with the same name. To publish an update you then just run:
eas update --branch production
or
eas update --auto
In the latter case EAS then sets your current git branch as the branch name, so you could check out the production branch and then run this command to publish the update.
This is not possible if you are updating from the old release channel that used classic updates to the new eas update. I asked the question on the expo discord and got an answer from the staff.
This information can be found in the docs.
I'm developing a PWA using Ionic 3.
Normally the JavaScript files generated by the build to browser process of Ionic 3 are in www/build folder.
I wish to change this folder to www/build/v1 and, of course, keep the application working.
How could I change the build process of Ionic 3 to achieve this result?
The simplest way is add "config" section to your package.json
{
"name": "projectname",
"version": "0.0.1",
"author": "Ionic Framework",
...,
"config": {
"ionic_www_dir": "www/v1",
"ionic_build_dir": "www/v1/build"
},
"dependencies": {
...
}
You can read "Custom Project Structure" here ionic docs.
You may want to try the config option in the package.json file to provide custom build configuration.
To get started, add a config entry to the package.json file. From there, you can provide your own configuration file.
Here's an example of specifying a custom configuration:
"config": {
...
"ionic_rollup": "./config/rollup.config.js",
"ionic_cleancss": "./config/cleancss.config.js",
...
},
You may want to see this Ionic documentation for more information.
From a continuous integration perspective, I would prefer to use a local install instead of a global one as the docs currently state. I've searched for a while and looked at the api from "ember test --help" and I don't see the ability to explicitly state the location of phantomjs - ember expects it to be available globally.
Is it possible to run something like "ember test --phantomjs node_modules\phantomjs\bin\phantomjs"? Or modify testem.js to state phantomjs location?
you can run tests with npm test in such case node_modules/.bin added into path for commands which are inside script section in package.json
So thus in package.json you have
"scripts": {
"start": "ember server",
"build": "ember build",
"test": "ember test",
npm test will run ember test but for that running it will add node_modules/.bin into PATH. So you can keep phantom in local dependencies
I'm using jest to write tests in my ReactJS application.
So far, to run my test suite, I need to type 'npm test'.
Here's the snippet from package.npm:
"scripts": {
"test": "./node_modules/.bin/jest",
(other stuff)
},
"jest": {
"unmockedModulePathPatterns": ["<rootDir>/node_modules/react"],
"scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
"testFileExtensions": [
"es6",
"js"
],
"moduleFileExtensions": [
"js",
"json",
"es6"
]
},
Is it possible to run those tests within my IDE (IDEA/WebStorm) directly, preserving the configuration? I'm not a js guy, but for example WebStrom works perfectly fine with Karma. Shouldn't this be possible with jest-cli either?
To make Jest test results shown in a tree view (like karma, etc.), a special integration is needed. WebStorm doesn't yet support Jest. Please vote for WEB-14979 to be notified on any progress.
EDIT: as of March 2017 the first version of Jest integration at WebStorm has been released.
In WebStorm 9+ You can set this up as follows:
Install Jest CLI: npm install --save-dev jest-cli
Create node run configuration with javascript file set to node_modules/.bin/jest, and application parameter to --runInBand. runInBand tells jest to run in single process, otherwise there's a port conflict when running multiple node processes in debug mode
Create some tests and run configuration in Debug mode (Ctrl-D/CMD-D). If you set breakpoints in your test or app code they should hit
It would be great though if you could click on file:line numbers in the output to go directly to the code.
app_sciences's answer is awesome, but does not work for Windows.
For windows, you can use next configuration:
Provided configuration is taken from here
For IDEA I'm using https://confluence.jetbrains.com/display/IDEADEV/Run+Configurations for that purposes. For WebStorm it seems you can add your config by yourself https://www.jetbrains.com/webstorm/help/creating-and-editing-run-debug-configurations.html . The configuration you are talking about is on the software level. If you will configure to run it via your IDE it will definitely will run within the ENV variables and paths given, you just need to add the needed global paths and the commands to run.
I try to learn composer, now I want to include (zurb) foundation, so I added
"require": {"zurb/foundation": "v5.2.2"} to the composer.json file.
After running composer.phar update, I can see that there are some files added to the folder /vendor/zurb/foundation.
But I have no clue how to continue, could anybody please advise how I can start building my web-app now? How do I get it to use the css and js files that are needed for foundation?
I already included the file vendor/autoload.php to my index.php, but that doesn't seem to be enough.
I already built multiple web-sites and apps using foundation, but always "manual", then I just include the right css and js files to the header and footer of the page. Now I just don't know where to start.
thanks for your help.
Check this question first to get the basics: NPM/Bower/Composer - differences?.
Then, if you decide to go with Composer for PHP and Bower for front-end libraries, follow this:
Install Bower using sh $ npm install -g bower (you'll need Node.js and npm first)
Configure Bower for you front-end packages (visit Bower docs for more information)
{
"name": "MyProject",
"dependencies": {
"foundation": "*"
}
}
Hook Bower to Composer adding this to your composer.json
"scripts": {
"post-install-cmd": [
"bower install"
],
"post-update-cmd": [
"bower install"
],
}
Now every time you hit composer update (or install), bower components get updated as well!