How to create Ionic2 custom build process? - javascript

As a school project I am making a multi-platform app. I decided to use JavaScript. I thought it would be great to have something like an MVVM pattern with Ionic2 where VM is the Angular2 part of Ionic and I would have two Views. One for mobile(the html/css parts of Ionic), and Electron for desktop. I have a problem though. In a basic Ionic project the View and the Angular part is tightly coupled, I mean they are in the same directory, cannot change the HTMLs easily.
What I thought would be great (although other solutions are welcome) is to have an "ionic" folder and a "desktop" folder, both the same structure same file names.
When building the app for mobile with Ionic I want all the files in the src folder to be copied to a dist/ folder and html,css files from src/ionic copied to their place like in a normal ionic project(the only difference, that it would be under a dist/ folder not src/, so I have to make the www/index.html to include these too instead of src/ which it does normally in ).
And when building for Desktop I just copy all the things the same way but from src/desktop instead of src/ionic.
That way I could have my business logic in "plain" Angular2 and could be reused creating the app both for desktop and mobile.
So my question is can I modify the Ionic build process somehow, to allow me to do this? Can I create my own gulp or grunt file? Or webpack? How to do that?

Finally I wrote my own gulp file, to copy the files to src/.tmp/ and after the copy task is ready I call the original scripts which are used by ionic to serve, build the projects. I could solve everything with this method.
On serve task gulp watches for changes in src/ files excluding src/.tmp and copies the changed files to the src/.tmp folder. Which is watched by ionic and rebuilt everytime something changes.
I was lucky because ionic is built on top of angular, so the builder toolset used by ionic is 100% compatible with plain angular projects.

Related

How to integrate Ionic 4 + AngularJS (1.7.2) + Webpack + Cordova?

Ionic 4 CLI is seems to be friendly only with Angular7. And Angular7 is slow like.. send for compile and go take a shower and back and maybe the bundle will be ready. Actually the worst framework the front end ever met.
AngularJS is probably the best happened to front end world. Everything is fast, reliable, straight forward. When you combine this with Webpack you can enjoy an high level of programming language including exports and imports and classes and and components just everything else you need.
However, the Ionic CLI doesn't integrated with something else than the Angular7.
So I have tried to create a cordova based project using:
cordova create test
And then tried to "manually" setting things up.
I have installed Webpack in the cordova based project so now it's accessiable through the node_modules folder. Then I have created the webpack.config.js file in the same directory.
Then I have created src directory which stores the webpack.entry.js file. The webpack.config file reads what the entry file created and creates a new folder called www and there it places index.html file and bundle.js.
Then I am trying to run cordova run --device with Android device connected and the app is getting actioned in the actual device.
Very nice.
However, I have some issues: it seems that the files that are in the bundle doesn't going to be work since angularjs is not completely served.
I mean, in order to serve an angularjs app you probably need a static server or serve it via node. In this case this doesn't happening so it just like drag the index.html file to the Chrome browser and have it not working at all.
I have searched tons at Google but found just nothing.
Is there any boilerplate working with Cordova + Webpack + AngularJs + Ionic framework's components, working fast with livereload?

Transform angular2 app from local NodeJS one to a website

I'm learning Angular 2 - I just finished the official Tour Of Heroes tutorial (https://angular.io/docs/ts/latest/tutorial/) and built my own website with weather just for training.
The whole application from the tutorial was built using NodeJS, which, as I understand it, is used to run javascript files.
But, what if I want to upload my website to a server (one of the free hostings) to see how it looks like on my other devices (mobile, tablet, etc.)?
Without angular, I wouldn't have problems with that - I'd just use FTP client to upload my .html, .css and .js files to the hosting.
But how should I do it with angular2 application? In my project's directory there are folders like: node_modules, typings - they contain a lot of files, and I'm not sure if they are needed. I know that browsers do not support TypeScript (which I'm using), so I should only upload .js files, but how exactly should it be? Which files should I upload?
I tried uploading everything but node_modules and typings folders, but I just got "Loading..." when I tried accessing the website.
I saw this: Hosting Angular 2 app
and there people just said to upload every js file, which I did.
Here's the link to my website: http://myweatherapp.comxa.com
//EDIT
All the above can be represented by this one question: What are the steps to transform local angular2-quick-start-app into a website, which can be uploaded to any web-hosting?
Take a look at Angular-Cli.
They make it so easy to build/bundle Angular 2 apps. They include a ng build and ng build:prod commands to build the angular 2 project into a distribution folder, standalone web app, so you can put it in a tomcat instance or anywhere and not just in a NodeJS environment.
Angular-Cli provides everything one could want when building an Angular 2 app.
Take a look at their Table of Contents. The Build section is probably what you are more interested in
I use Angular-Cli and I absolutely love it.

Bundling Angular 2.0 source files into one vendor file for deployment

I'm starting new project which will be based on some legacy code which was written using https://github.com/linemanjs/lineman-angular-template lineman-angular-template and Angular 1.5 components
But all new stuff i want to write as Angular 2 components. And i'm looking how to
concat all source code from angular# folder into one file let's say vendor.js
Previously i saw such variant How to compile an Angular2 TypeScript application to a single file?
src="/node_modules/angular2/bundles/angular2.dev.js"
but now in node_modules/#angular there is no more bundles/angular2.dev.js
I can't use cdn for it. I need to store everything on my server.
Can you suggest me some tool or smth like that?
Angular-cli also won't work for this case.

AngularJS share app core with multiple projects with Gulp

I'm currently developing an app with angularjs and cordova. I use Gulp to compile all the js, less, etc and merge it into a www folder. It's a big project and many apps will be created based on the same base core. I don't want to "clone" the entire project each time a have a new client because if a bug is found or a feature has to change I will have to redo everything in every single project.
I want to know if there's a way to create a build system with Gulp, where I could have a base core js/less, and that base js/less core could be replaced if the same js (or angular module name for instance) is found on another folder.
Example image:
folder structure
In the above example, I will need a specific task to build "ProjectA".
I was thinking in something like "gulp build ProjectA" and then all files in "AppCore" folder would be compile only if there wasn't the same js, less or angular module inside "ProjectA" folder.
Or I don't know if is possible also to compile everything in "AppCore" and then override that result with the content found in "ProjectA" if equal. If something new in "ProjectA" that would be added.
Is there any gulp plugin to achieve this? Or does this have to be done in a different way?
What is the best way to create a flexible project like this with a shared based code core?
Thank you

How to set up a ASP.NET API / AngularJS project

I am starting my own Angular web application. I have experience coding in c# and angular but I have never had to set up my own project/solution. In this case, I would like to set up an ASP.NET Web API that will communicate to an Angular SPA front end in JSON (although it should be agnostic to the front end, any application that speaks JSON should be able to communicate with it).
Additionally, I have heard good things about grunt and so I would like to incorporate it into the project (at the very least to compile LESS and minify and combine my angular files).
I am working with visual studio professional 2013. I began by creating a Web API project and downloading the WebEssentials plugin.
I am just a little confused on how to continue here. Should I split out my angular into a separate project in the same solution? How do I include grunt?
How do I use grunt in the context of visual studio to include my angular files in my index.html file?
The project comes with a Scripts folder and a Views folder. I know that it is preferable to structure the angular files by function so that the controllers and views are housed together. Should I be including my views in the scripts folder? How does that affect my build procedure?
I realize these may be very naive questions. Please bear with me, I am a complete beginner when it comes to these kinds of tasks. All I have done in the past is basically code.
Let's go step by step:
Visual Studio Solution with Web Api and Angular JS
You can store both Web Api and Angular code in same solution and project.
In this case you can arrange structure like this:
Content
Controllers
Models
Scripts (with app/ folder and vendor scripts like angular, jquery, etc.)
Views
index.html for angular application you can put into Scripts/app folder.
And all views for Angular you can put into Scripts/app/views folder.
Using Grunt/Gulp
Grunt/Gulp/Cake/Broccoli - those tools are simply an a javascript task runners, which allows you to to various things like combine your vendor scripts into one file, minify and combine your scripts into one file, transform your LESS to CSS, etc.
To use those task runners you can use Project Build Events. In project build events you can run Grant/Gulp tasks, which will do all the magic for you.
Also there is an extension for Visual Studio called Task Runner. This extension lets you execute any Grunt/Gulp task or target inside Visual Studio by adding a Task Runner Explorer window.
Example of using Gulp in Visual Studio Project by using Task Runner
To run your Gulp tasks by Task Runner automatically you need to add a line into start of your gulpfile.js
/// <vs AfterBuild='<here is a name of your Gulp task>' />
This line will force your task to run after each rebuild of your project.
Useful Info
To get additional info about Apps with AngularJS on ASP.NET you can check video by John Papa: "Building Rich Apps with AngularJS on ASP.NET"
Usefull Gulp modules:
gulp-useref - Parse build blocks in HTML files to replace references to non-optimized scripts or stylesheets.
gulp-less - Less for Gulp.
gulp-uglify - Minify files with UglifyJS.

Categories