How to deploy an Ionic 3 app to StackBlitz

Stavros Kounis
Dec 3, 2018 · 7 min read


To follow along with this tutorial, you will need:

Step 1: Clone GitHub Repo

Visit and download or clone the Ionic Dynamic Forms app:

$git clone

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


Visit 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


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


Furthermore, some changes should be done in the
/pages/components/cards/ 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/
  • code: styleUrls: [ './form1.scss' ]

Form 2 Page

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

Home Page

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

Components Cards Page

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

Components Grid Page

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

Components Icons Page

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


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.


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,

Appseed IO

Articles about Ionic, Phonegap, Mobile and MEAN stack technologies