We have written an angularjs web site/app - optimised for mobile
and are using cordova to make an html5 based mobile app.
The code (html, css, js) will be the same for both the web app and cordova app
but there will be some files that will be different.
How do we set up our git repo to share (only) common files between the web-app repos and the cordova-app repos ?
Obviously any .gitignore files are tracked and are common to all repos. We could add all files we don't want in the cordova repo to .gitignore but that will reduce the usability of 3+ web app repos for the one cordova repo.
We've tried:
Having a local repo of the project for the cordova app with .git/info/excludes on that repo instead of .gitignore files - but this only solves the problem for pushes from that repo, not pulls from the origin (which will cause errors with untracked files)
Setting up a different branch - and use a git flow style approach for intermediate branch for merges - but it's (apparently) not possible to have an .git/info/excludes specific to a branch - so everything will get overwritten on each merge
I would need more informations about the project because it could depend of a variety of factors: goals, time, budget, etc... But in my opinion there are much more differences than only "some files" between a web and mobile projects.
For example:
a mobile hybrid app need some plugins to do some specific mobile tasks and behave as a mobile app
a well optimized web app could be too heavy for a mobile app
web app need support also IE but a mobile app not
a good responsive web app interface is not a mobile interface and vice versa
For this I would create three separate repositories: an AngularJS Web project and an Ionic Mobile project. And the third repo with an AngularJS module that will be imported as a git submodule. This third module could be as a Core module with all functionalities (services, directives, filters and so on) that will be shared between the two applications.
Related
I have a personal website/portfolio built with ReactJS and React-Router. I want to be able to serve separately developed and built ReactJS apps as my coding demos from within my personal website (rather than provide an external link). I have used Create-React-App to bootstrap the original website app.
I have tried placing the built files (index.html and *.js files) in the public folder, which is copied to the /build folder when the app is built. However, these files are not being served.
Interestingly it was working with the React development server, but stopped working after building and serving with the npm 'serve' module.
eg. I have copied the built demo app to
/public/demo-builds/[app-name]/
and this gets copied when building the main website app as
/build/demo-builds/[app-name]/
Accessing my-domain-name.com/demo-builds/[app-name] or my-domain-name.com/demo-builds/[app-name]/index.html results in error.
Is this an issue with my overall methodology of trying to serve separate built apps within a react-router app?
Is there an accepted way to serve built React apps within a React app?
I have a gulp angular project with the following structure. To serve it as a web app, I use the command gulp serve. Gulp then does some magic that rearranges all the files in the .tmp directory. I would like to take the web app and convert it to an ionic app. I attempted to follow the steps here (How to convert an existing Angular1 web app to a Cordova app?), but it seems that due to gulp I have a few additional steps.
To attempt this on my own, I:
Setup an empty ionic project,
Copied the contents of my src folder to the ionic apps www folder, and
Ran ionic serve.
The gulp setup was done by a coworker, so the inner workings of it are something of an enigma.
You cannot do it that easily. Ionic works with it's specific angular directives, like ion-nav-views, ion-views, ion-content, etc. you need to wrap all your states/views inside this directives and transform your navigation system into tabs or side menu (mobile app navigation systems) to make it work. There's a lot of workaround to do!
I'm working collaboratively on Google App Engine project. Other contributors have committed a basic App Engine project structure:
└───src
├───main
├───java
│ └───com
│ └───[...]
└───webapp
├───css
├───fonts
├───img
├───js
├───partials
└───WEB-INF`
The java directory contains the server-side app written in Java.
The webapp directory contains predominantly client-side code including a basic AngularJS app. However it's also home to WEB-INF which configures the webapp and is not client-side app code.
If I wanted to start using Yeoman to manage the client-side app and get all the benefits that Grunt and Bower bring, how would I do this? I've only ever scaffolded out Yeoman apps from the beginning and never from a predefined Google App Engine project.
I can think of two options:
Remove everything under webapp (excluding WEB-INF) and run
Yeoman from within the webapp folder. This feels a little
ungraceful.
Separate out the App Engine project from the client-side
Angular app and scaffold out an Angular app using Yeoman.
To be clear, I'm looking for information on the means of introducing Angular using Yeoman, rather than just end product of Angular existing in an App Engine app.
I found this specific example of an App Engine and AngularJS example.
Perhaps this might be a decent starting point for you to work with.
I am building a hybrid mobile app using the Ionic Framework library (including Angular JS) and have found that they've made a wrapper for a number of the cordova plugins so that they work with Angular.
I have downloaded the ng-cordova.js file and referenced it in my index.html
As as test I have used the cordova device plugin just to display the device name in a popup. It works fine in the ripple emulator just running the html in my browser, however when I build the app using Phonegap Build it no longer works.
Is it not possible to use the ng-cordova.js file to access native device features when using Phonegap Build? (i.e. Can you literally only use the plugins from the list on the build website?)
As another user of PhoneGap Build, you are limited to whatever plugins can be found here:
https://build.phonegap.com/plugins
That being said, if the plugin is not in their repository already (most of the popular ones are), you can always submit it yourself or try to get the author to submit it.
Other than that, it should work fine.
This is ngCordova contributor.
It should be possible to use ngCordova with PhoneGap, but are you using the same plugins repos as they are mentioned in ngCordova documentation?
I can imagine that PhoneGap plugins my have different API than Cordova plugins.
And what is here the reason to use PhoneGap Build, if I may ask?
Can you specify which plugins are not working and how could I simply replicate your errors?
We will develop application in Angular (separated from server), and most likely we will need to use PhoneGap to create same application for mobile devices.
PhoneGap requires that the application has index.html file as entry file in order to be compiled. I made minor project in Angular that has index file, and it did compile ok in PhoneGap.
There is something that I cant get my mind on. Server side will be in C#/MVC, and as I said already Client will be in Angular. Question is how to keep the project in Angular in "index.html" format ready for PhoneGap and at the same time have it available for normal web application.
We do plan to use AMD (require.js) for Angular application, but if we do that then we cant have Index.html file which is required for Phonegap.
What would be best approach. Goal is to if possible have one code base.
Well you don't have to specifically have an index.html page, you can use any HTML page as the landing page (See the content tag in the Config.xml page.) You should be able to just build your Angular app like you normally would - you can even test on the browser. When you go to actually create the Cordova/Phonegap apps, you'll just have to add the cordova.js to the file and then run the commands to build and package the app binaries.
I'm also building a PhoneGap 3 app using AngularJS connected to back-end APIs.
The PhoneGap / Cordova part is only added later in the /platforms folder, so in the root /www folder you should build just a regular mobile web app.
This app I'm working on uses a hash for the AngularJS routing. In iOS / Android runs from index.html (eg: ./index.html#/start) while on desktop browsers runs from the root folder (eg: /#/start).