How to deploy ionic-react as a webapp?

Ionic Framework Ionic React
1

Hi,

I developed an app using ionic-react and now I want to deploy it as a webapp. Specifically, I want to deploy my ionic-react app to Microsoft Azure.

The ionic frameowkr is great especially with the react snytax. However, there is not enough deployment examples in the docs. There is one example on how to deploy it with firebase but I want to use MS Azure instead. Is this possible?

Have you guys done this before?

2

Since itā€™s really just a react App with Ionic UI, it shouldnā€™t be any different than how you would deploy a react app to azure. If you want to host on azure, look at their static web apps hosting offer.

3

Thanks for the response, you said: ā€œit should be anyā€ different than how you would deploy a react app to azure. You mean ā€œit should not be anyā€ right?

4

Correct! Itā€™s early for my, still waking up it seems :smile:

5

Thanks. I already tried that but It didnā€™t work. I mean I deployed the files on azure but I see nothing when I access the website url. Is there some configuration or build process before deployment? Should I use this command that they used in the firebase example before deploying the files to azure? ionic build --prod

6

No, just run ionic build and deploy the dist folder to the service.

1 Like
7

@mhartington wow man thanks. That was pretty easy actually. It worked! I hope this question can help other people who are new to ionic. The framework is really solid and great.

However, I think the docs should be updated or at least the community should write docs for ionic-react and ionic-vue too because I noticed there are many example only with ionic-angular

1 Like
8

Docs are open source, so if youā€™re up to it, weā€™d gladly accept a pull request to improve them :smile:

2 Likes
10

I have the same issue and just for clarification:
ā€œionic buildā€ cmd create ā€œ./buildā€ directory (not dist).
so we must manually put all the content to the azure service folder ?
Actually, my static web service is linked to my github repo (ionic-react-app)

And i have a running (empty) static web app who shows:
" Your Azure Static Web App is live and waiting for your content"

Do you have the step by step actions ?

12

Cheers,
I am using ionic-angular. My goal is to deploy to an Azure Static Web App. Thatā€™s been accomplished. However, it doesnā€™t build using --prod settings. Iā€™ve also tried just to build using the Angular cli (ng build --prod). The web apps loads correctly, but always in development mode.

Itā€™s a very simple app. A prototype/test app really.

Here is my yaml and package.json. Please advise.

Node.js with Angular

Build a Node.js project that uses Angular.

Add steps that analyze code, save build artifacts, deploy, and more:

https://docs.microsoft.com/azure/devops/pipelines/languages/javascript

trigger:

  • main

pool:

vmImage: ubuntu-latest

steps:

  • task: NodeTool@0

    inputs:

    versionSpec: ā€˜14.xā€™

    displayName: ā€˜Install Node.jsā€™

  • task: Npm@1

    displayName: ā€˜npm install -g @angular/cliā€™

    inputs:

    command: custom

    verbose: true

    customCommand: install -g @angular/cli

  • task: Npm@1

    displayName: ā€˜npm install -g @ionic/cliā€™

    inputs:

    command: custom

    verbose: true

    customCommand: install -g @ionic/cli

  • task: Npm@1

    displayName: ā€˜npm installā€™

    inputs:

    command: custom

    verbose: true

    customCommand: install

  • task: Npm@1

    displayName: ā€˜npm run ionic-build-prodā€™

    inputs:

    command: custom

    verbose: true

    customCommand: run ionic-build-prod

  • task: AzureStaticWebApp@0

    inputs:

      app_location: "/"        

  output_location: "www"

    env:

    azure_static_web_apps_api_token: $(deployment_token)

{

ā€œnameā€: ā€œapp-devā€,

ā€œversionā€: ā€œ0.0.1ā€,

ā€œauthorā€: ā€œIonic Frameworkā€,

ā€œhomepageā€: ā€œhttps://ionicframework.com/ā€,

ā€œscriptsā€: {

"ng": "ng",

"start": "ng serve",

"build": "ng build",

"test": "ng test",

"lint": "ng lint",

"e2e": "ng e2e",

"ionic-build-prod": "ionic build -c=production",

"ng-build-prod": "ng build --configuration production"

},

ā€œprivateā€: true,

ā€œdependenciesā€: {

"@angular/common": "~13.0.0",

"@angular/core": "~13.0.0",

"@angular/forms": "~13.0.0",

"@angular/platform-browser": "~13.0.0",

"@angular/platform-browser-dynamic": "~13.0.0",

"@angular/router": "~13.0.0",

"@angular/service-worker": "~13.0.0",

"@capacitor/app": "1.1.0",

"@capacitor/core": "3.4.0",

"@capacitor/haptics": "1.1.4",

"@capacitor/keyboard": "1.2.1",

"@capacitor/status-bar": "1.0.7",

"@ionic/angular": "^6.0.0",

"rxjs": "~6.6.0",

"tslib": "^2.2.0",

"zone.js": "~0.11.4"

},

ā€œdevDependenciesā€: {

"@angular-devkit/build-angular": "^13.2.2",

"@angular-eslint/builder": "~13.0.1",

"@angular-eslint/eslint-plugin": "~13.0.1",

"@angular-eslint/eslint-plugin-template": "~13.0.1",

"@angular-eslint/template-parser": "~13.0.1",

"@angular/cli": "~13.0.1",

"@angular/compiler": "~13.0.0",

"@angular/compiler-cli": "~13.0.0",

"@angular/language-service": "~13.0.0",

"@capacitor/cli": "3.4.0",

"@ionic/angular-toolkit": "^5.0.0",

"@types/jasmine": "~3.6.0",

"@types/jasminewd2": "~2.0.3",

"@types/node": "^12.11.1",

"@typescript-eslint/eslint-plugin": "5.3.0",

"@typescript-eslint/parser": "5.3.0",

"eslint": "^7.6.0",

"eslint-plugin-import": "2.22.1",

"eslint-plugin-jsdoc": "30.7.6",

"eslint-plugin-prefer-arrow": "1.2.2",

"jasmine-core": "~3.8.0",

"jasmine-spec-reporter": "~5.0.0",

"karma": "~6.3.2",

"karma-chrome-launcher": "~3.1.0",

"karma-coverage": "~2.0.3",

"karma-coverage-istanbul-reporter": "~3.0.2",

"karma-jasmine": "~4.0.0",

"karma-jasmine-html-reporter": "^1.5.0",

"protractor": "~7.0.0",

"ts-node": "~8.3.0",

"typescript": "~4.4.4"

},

ā€œdescriptionā€: ā€œAn Ionic projectā€

}