xcode 4 + phonegap ... not update JS upon build? - javascript

I've run into a weird issue that has had me scratching my head for the past hour.
I'm working on an iPad app using Xcode 4 and PhoneGap. It's using jQuery. I've put all my JS into a scripts.js file.
Things are working well.
I spend about an hour doing a lot of CSS tweaking. I'd update the CSS file, stop the app, rebuild, and push to the iPad simulator or my iPad. That's been working fine. Every update to the CSS file is reflected on the new build.
I then needed to update the JS file. I couldn't get things to work and then I finally realized none of my JS changes were actually be put into the build. I finally blanked out my JS file completely, rebuilt, and it's still not updating.
The file I'm updated is being updated in the finder in the project folder (I can right-click 'view in finder' and that file is, indeed, updated).
So I'm stumped. Is the xcode compiler caching the JS file somehow instead of grabbing the updated file? Is there a way to force it to grab the updated JS?

I found it necessary to hold the Option button when clicking the menu command which turns the command from "Clean" to "Clean Build Folder..." and this caused my assets to be refreshed.

Well, after some more googling, this seems to be a common problem. Xcode seems to cache files even after you've edited them.
One option appears to be to run the 'clean' command before a new build. I tried that, no luck.
Other solutions appear to involve rebuilding the .plist file each time. I don't fully understand that (yet) in terms of how to do that automatically, but did find this workaround:
Open your .plist file
change something (in my case, I rename one of the app icon files each time)
save and build
Doing that magically forces xcode to FINALLY grab all the updated files and do a proper build.
I can't explain why Xcode seems perfectly happy grabbing my updated .css file each and every time but won't update the .html or or .js files without first doing this .plist file edit.
Seems as if Apple still has a few bugs to work out. I guess we'll have to wait patiently for the next 4gig .x relase of it. ;)

Just add a new "Run Script" build phase to your target in XCode and paste this :
touch -cm ${SRCROOT}/www

I do not have mac right now, but few things to try:
Try to look at Your project build (or prebuild or something) action where www folder is supposed to be copied.
Try to change index.html and see if it works.
Try to copy paste all Your javascript code to index.html script tag
Try to validate Your javascript (For example: Google Closure Compiler) and see if it has no problems

None of these worked for me :(
The only way I can get the thing to update its html and js is by running a "corodova run ios" at the command line.

Find the file called copy-www-build-step.sh.
Mine was in [project_folder]/platforms/ios/cordova/lib/copy-www-build-step.sh
In that file, find the lines beginning rsync -a "...
Add -c to the rsync lines, so they ready rsync -a -c "...
copy-www-build-step.sh is the script that copies the files over from www/ to where they go inside the app file. rsync is the unix file copying command they use. Without that -c, rsync just compares the file size on each file and folder and copies them over if the size has changed, and a couple of spaces or quotes don't count as enough of a change. With the -c, it checksums them and compares the checksums, which will catch even the smallest changes.
I think this will work best, because it's not a workaround, it actually fixes the cause of the problem.

I just had this issue, and the build phase command posted here (which is actually now used by the default Phonegap project) did not work for me, since I am editing my files on a Parallels Windows VM, in Visual Studio.
What I did, was use this instead, in the Build Phase of my project:
find "${PROJECT_DIR}/www/." -exec touch -cm {} \;
Thats basically a recursive touch. I then set up Visual Studio to always reload the file, if it has been saved. Hope this helps.

I'm not sure which did it, but I did the following:
Changed an icon value in my MyProject-Info.plist
Quit the simulator
Product -> (hold option) -> Clean Build Folder
Run

I had this same issue with the iOS Simulator, I tried most of the suggestions above with no success, it would not pick up my changes.
Later another possible solution occurred to me, which did work:
Delete the app from the simulator. (ie. Click and hold on the icon, then hit the X when it starts to shake, then Hardware Home)
Then re-run from xCode.
(NB: "cordova build ios" was also required)

Nothing solution of above work
finally i saw there are two index.html file and .js file in the project created using Command line tool of Cordova
So make changes as below shown under Staging folder

Related

How to run npm start without opening browser for react development on linux

I am learning react and find myself running npm start on the terminal a couple of times but its annoying how it opens a new browser window everytime. I'm trying to stop this from happening on linux.
I found a solution for how to do this on Windows, but how can I do it on Linux?
Adding BROWSER=none to the .env file should get it solved.
If the folder /etc/profile.d doesn't exist create it. Then run touch /etc/profile.d/[any descriptive name here].sh and open it in the text editor of your choice. Then add export BROWSER=none there.
Then logout and login again. If it didn't work then try putting export BROWSER="none" in the file.
This is setting an environment variable.
Hope this helps.
fixed
create a .env file next to your package.json and put BROWSER=none inside
I don't think you need to run npm start so often. I've created my project via create-react-app which comes with Hot Module Reloading or HMR(restarts the server on any saved edit) in-built.
Starting a new React server multiple times can also be problematic as every time it will run on a different port. If you're integrating an API that has CORS set up for a particular port, it won't work on other instances.
What to do?
Create your application using create-react-app(cra) or add HMR using some library if you don't want to use cra. Here is a tutorial for that (haven't tested it).
Always keep a single dev server running. It will automatically reload on code change.
Stop the server by Ctrl + C when you don't want to use it.

Using a node.js file watcher with JetBrains WebStorm

I've been using Prettier with my projects for a few weeks. I really like it!
I use the JetBrains WebStorm IDE, so I followed these instructions on the Prettier project site for how to set up a file watcher in WebStorm: https://prettier.io/docs/en/webstorm.html#using-file-watcher
Then, every time I save a JavaScript file, Prettier automatically runs on it and WebStorm shows me the changes as soon as the file is saved by Prettier.
I want everyone on my team to use Prettier, but not everyone uses WebStorm. Some people use editors that can't be easily configured with Prettier. So, I followed these instructions on the Prettier project site for how to set up a file watcher as an npm script in my package.json file: https://prettier.io/docs/en/watching-files.html
"scripts": {
"prettier-watch": "onchange '**/*.js' -- prettier --write {{changed}}"
}
I used the onchange package as my file watcher, as suggested in the docs, and I disabled the file watcher in WebStorm since I don't need Prettier to run twice in a row.
The problem is that, when I save a file in WebStorm, the onchange package runs Prettier correctly, but I don't see the changes in the editor, even when I switch out of and then back into the file window with my mouse cursor. When I try to make a new change, and save again, I get this "File Cache Conflict" warning message from WebStorm: "Changes have been made to in memory and on disk. Keep Memory Changes, Show difference, Load File System Changes"
If I choose "Load File System Changes", the version Prettier save successfully loads. But having to see this dialog box every time I save is quite annoying. I would prefer it if the changes were reflected in WebStorm automatically.
It seems like the only way is to use WebStorm's built-in file watcher instead, but then I don't have an easy way to set up Prettier for my coworkers without forcing them to manually install their own independent solutions.
So my question is this: How can I use a generic node.js file watcher as an npm script that makes changes to my files after saving, and have those changes automatically reloaded in WebStorm without this dialog box?
I was facing the same issue and no doubt that dialogue is really annoying and here're the steps that finally helped me resolving the issue.
Go to Webstorm/Phpstorm Settings/Preferences
Open up settings for File Watchers: /Tools/File Watchers/
Double click on your file watcher i.e. Prettier in this case
This will open a modal window for editing watcher. Uncheck Auto-save edited files to trigger the watcher
As per my understanding, unchecking this option will only run file watcher on manually saving the file and will help you getting rid of too much appearance of that modal on every single change. Please don't forget manually saving the file in that case to keep on enjoying Prettier.
Maybe you could try to fiddle with Use "safe write" setting on System settings pane in webstorm

Deploying changes to JavaScript files generated from Typescript in IntelliJ; js not updated

I am having a problem with IntelliJ and the automatic deployment of changes while the server is running (in this case Spring Boot).
I have enabled the "Build project automatically" in the IntelliJ options.
When I make a change to a .ts file, the .js and .js.map files in the code are correctly updated.
The .ts file, however, it not updated in the target directory. That is NO problem. I just press the "Compile" shortcut and the .ts file in the target output are updated. Great.
What is NOT updated though are the target .js and js.map files. No matter how many times I open these files and press "Compile" the files in the target are not updated. So the .ts and .js files are now out-of-sync, and I need to restart the server for the .js file change to be noticed.
The weirder part is that all this works just fine on my work computer, with what I can tell the exact same settings. But I cannot get it to work on my home computer.
Neither can a co-worker of mine get it to work on his work computer, and I've looked and looked for any differences in settings.
It is as if IntelliJ watches the files for changes on some setups, and on some setups, they are completely ignored because they were generated.
Can anyone help me with any pointers?
Okay, I figured out a solution to this.
By changing the tsconfig.json into stating compilerOptions/outDir so that it outputs straight into the target/classes/static directory, the changes are propagated correctly.
(for me the value became the beautiful ../../../../../target/classes/static/scripts)
A side effect though is that the source map paths become quite wonky and start showing up as a folder called something alike C:/.../src/main/resorces/static/... in the browser dev tools, inside to the JavaScript root directory, and the typescript files had difficulty showing up sometimes, just being blank.
A workaround that I found for this was to also set compilerOptions/inlineSources to true and to set compilerOptions/sourceRoot to something fictitious like http://TypeScriptFiles so it shows up in the browser dev tools as a new root node called TypeScriptFiles instead of the weird nested directory.

How to execute files directly from Notepad++

For the past few weeks, I have been working with Node JS a lot, and i have found it pretty annoying to have to execute the file through cmd every time i want to test.
To make my life easier, I have made a batch file that executes my file for me. My question is how do I execute files directly from notepad++?
Is there a menu for it? Currently on my left I have a menu that lets me navigate between my files easily. On my right, I have a NppFTP UI that lets me connect to the FTP server, if I need to work on files that are not on my system.
I highly suspect that there is a way to execute files directly from Notepad++.
Although my answer doesn't directly answer your question, it will resolve the problem you were facing in the first place.
There is something called nodemon which will restart your node process as soon as you save your changes. It's very simple to use:
To install :
npm install -g nodemon
To use:
nodemon app.js
or Just [it automatically grabs the default app.js file or other]
nodemon
You can learn more about this here:
http://nodemon.io/

Phantom.js doesn't run from the OSX console

I'm developing an ExtJS app and I'd like to render the view as pdf using Phantom.js. I've downloaded binary package for OSX, after unpacking added a symlink to it as well as added it to the PATH. After running 'phantomjs' in the console I get :
phantomjs script.js
And that's all. When I try running any of the example scripts it crashes saying that require is undefined, I can't check the version and basically it's unusable. I can run the bat file though, and it gives me phantomjs shell. After removing all I've downloaded previously I can still run 'phantomjs' command with the same outcome. Probably because Sencha's SDK have it but it's not visible in the PATH so I'm not sure. Any ideas ?
as always found the problem seconds after submitting question. Sencha's SDK had some custom or broken version of phantomjs.bat, and the whole folder was added to the PATH.

Categories