How to deploy an Ionic 3 app to StackBlitz

Published in

Appseed IO

7 min readDec 3, 2018

In this post, you will learn how to deploy Ionic 3 apps to StackBlitz in order to create live demos with a fast and straightforward procedure. At the end of this tutorial, we will present a full working example which is based on our article about the implementation of Angular Dynamic Forms in Ionic 3 apps. For this, we will:

Use the codebase presented in our article.
Create a StackBlitz project for Ionic 3.

Note: The complete source code of this tutorial is available in the ionic-dynamic-forms Github repository.

Download code

StackBlitz demo

Prerequisites

To follow along with this tutorial, you will need:

Ionic Dynamic Forms: This is an implementation of Angular Dynamic Forms in an Ionic application. It is based on Supermodular2, a free starter app that allows you to start a new Ionic 3 project quickly offering some basic features commonly used in recent mobile applications. It provides an extremely modular architecture and applies best software development practices. In the next section, we will go through all the steps needed for downloading and running the app.

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

If you choose to download the code, make sure to extract all the contents of the compressed folder.

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

or for a web preview:

$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.

The following page should look like this:

This view consists of three panes:

File System: a file explorer with the default Source Code
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

while our project contains

We will substitute the former files with the latter ones with the exceptions of

assets/
service-worker.js
manifest.json

which we ignore.
First, we replace the contents of the app folder

with the corresponding local files. We should note that the
polyfills.ts file remains as it is.

StackBlitz supports drag and drop functionality and auto replace. Simply select the files and transfer them.

On the following screen, we notice the additional app.scss file that contains some CSS rules for the app. Moreover, there is an error on the live preview pane. From now on, errors will pop, as we add and remove files due to the hot reload mechanism. We should ignore them for the time being.

The following step is to clear the contents of the pages folder by clicking the trash bin icon next to each folder.

After that, we have to transfer our pages folder contents to StackBlitz.
Note that StackBlitz IDE used to support drag and drop also for folders but not any more. Hence, we should create the required folders manually as shown below.

This way we create our project pages

and end up with a set of folders as shown in the following image

For each page we drag and drop the corresponding local files or we create subfolders where necessary in order to produce the next file structure

At this point, the replacement of the initial folders is finished. It is time to add the rest code of our project. As previously described, the remaining folders are common, pipes, services, theme and their contents and we create them as presented below.

The next step is to transfer config.ts to StackBlitz as presented below

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.

The final stage of editing is to apply our styles. Pages and style files are linked automatically when using the Ionic CLI. In StackBlitz editor we should declare explicitly the CSS files inside the corresponding pages. Now, we should copy and paste the code for the following files:

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' ]

Now we should hit the “Save” button.
After that, we will replace the default index.html with the local one with a simple drag and drop and save it afterwards.

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.