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!
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'm working on an ionic v1 (and angular 1) project which is completed using basic ionic UI. I came across various themes on ionic marketplace. How do i integrate a new ionic theme to my existing app.
I'm assuming you have Ionic setup in your local machine.
Once you've purchased and downloaded the files of the theme you want to use, create an ionic1 project. Note this will work only with Ionic1, and not Ionic2. Use the following command to create an ionic1 project:
ionic start myApp blank --type ionic1
When your project has been created, go to the /www folder in your project directory, delete all files in here, and copy the theme's files you've downloaded here.
Run ionic serve and your project should have integrated with the theme.
PS. you might have to replace the project scss folder with that of the theme's if available.
I am currently getting my head around how to serve an angular 1.4 app without all the concatenation/minification etc . In my current project we use grunt and the grunt serve option is bundling all the js/css together and I would like to see the 'as is' js files in the devtools. I tried to reconfigure the grunt serve but it looks too complicated. For example looks like the index.html file needs to be in the app folder for it too work but this is different in my project. How can I get it working or what other options( webpack ?) do I have?
How about looking at generating source maps for your .js files - this will allow you to serve minified (as you would in production) and map to your source files, allowing you to debug through the unminifed code.
Take a look at the grunt-contrib-concat plugin - https://github.com/gruntjs/grunt-contrib-concat
I am studying angular js and in our project they are using Grunt to setup the angular js application, as i can directly include angular.js in my html file and run it in a browser so where Grunt is coming into picture?
Grunt is a task runner. It is used to run tasks to prepare your application for the wide world.
For example you might use Grunt to minify your javascript files or concatenate them.
So Grunt prepares your application, but once it's prepared - it is out of the picture when you deploy your application.
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).