How to deploy an Ionic 3 app to StackBlitz

Stavros Kounis
Dec 3, 2018 · 7 min read

Prerequisites

To follow along with this tutorial, you will need:

Step 1: Clone GitHub Repo

Visit http://github.com/appseed-io/ionic-dynamic-forms and download or clone the Ionic Dynamic Forms app:

$git clone https://github.com/appseed-io/ionic-dynamic-forms.git

Step 2: Install Libraries

Open a terminal window and navigate to the ionic-dynamic-forms local folder. Install the NodeJS dependencies:

$npm install

Step 3: Run the Ionic App

In your terminal, make sure you are located in the
ionic-dynamic-forms folder and run the command:

$ionic serve --lab
$ionic serve

Step 4: Create StackBlitz project

CREATE IONIC 3 PROJECT

Visit https://stackblitz.com/ and select “Ionic 3/Typescript” project as shown in the next screen.

  • Editor: a Visual Studio based editor providing some key features like code completion
  • Live app preview: your demo with hot reload functionality

Step 5: Import code

CREATE FILE STRUCTURE

Now, we should replace the default filesystem with the codebase downloaded previously. Choose your favorite file explorer and navigate to
/your/path/ionic-dynamic-forms/src/ folder in your local system. As we can see the default file structure contains the following

  • service-worker.js
  • manifest.json

EDIT FILES

Furthermore, some changes should be done in the
/pages/components/cards/components.cards.html file. In our project, we use a few images from the /assets folder for card content but StackBlitz does not support image file hosting. As a result, we need an online static service to host these files and provide the required links.
Copy and paste the following links as below and save the changes.

App Component

  • path: /app/app.component.ts
  • code: styleUrls: [ './app.scss' ]

Form 1 Page

  • path: /pages/form1/form1.page.ts
  • code: styleUrls: [ './form1.scss' ]

Form 2 Page

  • path: /pages/form2/form2.page.ts
  • code: styleUrls: [ './form2.scss' ]

Home Page

  • path: /pages/home/home.page.ts
  • code: styleUrls: [ './home.scss' ]

Components Cards Page

  • path: /pages/components/cards/components.cards.page.ts
  • code: styleUrls: [ '../../../app/app.scss' ]

Components Grid Page

  • path: /pages/components/grid/components.grid.page.ts
  • code: styleUrls: [ '../../../app/app.scss' ]

Components Icons Page

  • path: /pages/components/icons/components.icons.page.ts
  • code: styleUrls: [ '../../../app/app.scss' ]

INSTALL PACKAGES

By this time, we have finalized our codebase and we should install any missing packages required by the app. The live preview pane should display a relevant message.

References

StackBlitz, Ionic, Source code, Cover photo


Appseed IO

Articles about Ionic, Phonegap, Mobile and MEAN stack technologies

Stavros Kounis

Written by

Software developer and Javascript enthusiast, passioned with web and mobile technologies, skounis.github.io

Appseed IO

Articles about Ionic, Phonegap, Mobile and MEAN stack technologies