microsoft / azure-mobile-apps-with-ionic Goto Github PK

Ionic template integrated with Azure mobile app services

JavaScript 85.41% CSS 8.90% HTML 0.09% SCSS 5.58% Dockerfile 0.01% Less 0.02%

azure-mobile-apps-with-ionic's Introduction

Azure Mobile App Services with Ionic Template

An application using Apache Cordova, Ionic Framework, and Azure mobile app services. Currently supporting iOS, Android and Windows 10.

Important!

To learn more about Tools for Apache Cordova, visit this link.

Requirements
Configuring Azure services
Getting Started
App Preview
File Structure of App

Requirements

node.js
Cordova and Ionic - npm install cordova ionic
Gulp - npm install gulp
Bower - npm install bower

Configuring Azure services

The app uses these 3 azure services, enable them by following these steps:

Getting Started

With VS Code:

Clone this repository.
Run npm install from the project root.
Run bower install from the project root.
Run ionic state reset to install plugins and platforms from package.json.
Build the project by running gulp tsc and then ionic build <platform name>
Deploy to device or emulator by running ionic run <platform name> or ionic emulate <platform name>
Success

** Note: To improve your Cordova development workflow, install VS Code Cordova extension.

Launch the VS Code Command Palette – (Ctrl+Shift+P on Windows, Cmd+Shift+P on Mac) – and type the following command and hit Enter:

ext install cordova-tools

With Visual Studio:

Clone this repository.
Open the azure-services-with-ionic.sln in Visual Studio.
Open Task Runner window by pressing Ctrl+Alt+Bkspce.
Install npm packages by going to your Solution Explorer -> Dependencies -> npm and clicking on 'Restore Packages'.
Once packages are restored, build the project and deploy it on Ripple or an android emulator.
Success

App Preview

iPhone 5

File Structure of App

azure-services-with-ionic/
│
├── node_modules/                      * Node dependencies
|
├── platforms/                         * Cordova generated native platform code
|
├── plugins/                           * Cordova native plugins go
|
├── resources/                         * Images for splash screens and icons
|
├── typings/                           * Contains all typings for this project
|
├── www/                               * Folder that is copied over to platforms www directory
│   │   
│   ├── js/                            * Contains transpiled JS files from TS files            
│   │
│   ├── css/                           * Compiled CSS
│   │
│   ├── img/                           * App images
│   │
│   ├── lib/                           * Dependencies from bower install 
│   │
│   └── index.html                     * Main entry point
|
├── .editorconfig                      * Defines coding styles between editors
├── .gitignore                         * Example git ignore file
├── config.xml                         * Cordova configuration file
├── gulpfile.js                        * Contains gulp tasks for compiling ts files, scss files and more..
├── ionic.project                      * Ionic configuration file
├── package.json                       * Our javascript dependencies
├── azure-services-with-ionic.sln         * VS solution
├── azure-services-with-ionic.jsproj        
├── azure-services-with-ionic.jsproj.user     
└── README.md                          * This file

azure-mobile-apps-with-ionic's People

Contributors

Stargazers

Watchers

azure-mobile-apps-with-ionic's Issues

Error: using ionic Command task for version 6.6.0 fails on Azure DevOps pipeline

I'm submitting a ... (check one with "x")
[ x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://ionicworldwide.herokuapp.com/

I am trying to build my ionic app using MS Azure DevOps pipelines. The task fails when using Ionic version 6.6.0 but works fine when version 5.4.14 is used.

Seems like the task fails when the installation command is issued in the host machine (Mac).

Current behavior:
Information:

Extract from build YAML:

#Ionic Commands

– task: IonicCommand@1

inputs:

ionicCommand: ‘build’

ionicVersion: ‘6.6.0’

cordovaVersion: ‘8.1.2’

Expected behavior:
Ionic installation should work and build should go ahead without an issue
Steps to reproduce:
Create an Azure DevOps pipeline build and use IonicCommand Task in the YAML.
Use the command Ionic Build with Ionic version 6.6.0 (Anything higher than 5.4.14)
Run the pipeline.
Notice the error.

/Users/runner/.taco_home/node_modules/cordova/8.1.2/node_modules/cordova Module cache at /Users/runner/.taco_home/node_modules Installing [email protected] to /Users/runner/.taco_home/node_modules/ionic/6.6.0. (This may take a few minutes.) Command failed: npm install --force [email protected] 2>&1

Other information:
I think the install command syntax is wrong. It should be :

npm install --force @ionic/[email protected]
and NOT

npm install --force [email protected]

From What I have seen, Ionic has changed package naming in the latest version:

Link:

https://ionicframework.com/docs/intro/cli.

Appreciate a fix.

However, there is a workaround for this, which is to use the plain old CmdLine task, combined with a custom NPM task. i.e: NPM task to install ionic cli with correct command syntax and CmdLine task to build using the ionic build.

Thanks

This repo is missing important files

There are important files that Microsoft projects should all have that are not present in this repository. A pull request has been opened to add the missing file(s). When the pr is merged this issue will be closed automatically.

Microsoft teams can learn more about this effort and share feedback within the open source guidance available internally.

Merge this pull request

This repo is missing a LICENSE file

This repository is currently missing a LICENSE file.

A license helps users understand how to use your project in a compliant manner. You can find the standard MIT license Microsoft uses at: https://github.com/microsoft/repo-templates/blob/main/shared/LICENSE.

If you would like to learn more about open source licenses, please visit the document at https://aka.ms/license (Microsoft-internal guidance).