CODEWITHSUNDEEP
nativescript
jhonatanoliveira
jhonatanoliveira

Reputation: 141

How to convert a mobile app project to a web app (code-sharing) structure in NativeScript?

The official documentation explains how to migrate an existing Angular Web project to a code-sharing structure.

But I could not find documentation on how to do the other way around. That is, how to migrate an existing NativeScript Mobile project to a code-sharing structure.

Any thoughts on how to convert an existing mobile app project to a web app project?

Upvotes: 1

Views: 124

Answers (1)

Narendra
Narendra

Reputation: 4574

I have answered this before as well, here are the steps that I followed to do the same. It is actually very time-saving to use same code base for both Web and mobile. Here are the steps I would suggest based on my experience.

  1. You should be using @angular/[email protected] or newer. npm i -g @angular/cli
  2. Installl nativescript-schematics. npm i -g @nativescript/schematics
  3. Create a new Project. ng new --collection=@nativescript/schematics my-mobile-app (I did it in this way and then copied over src/app folder here from Mobile app).
  4. Copy the app/src folder from existing project. (You may want to look for source folder in nsconfig.json "appPath": "app")
  5. Find the .ts file where you are using mobile specific components and create a wrapper class for the same. E.g. I was using Fancy Alerts for mobile apps, so I created a wrapper helper class like helper.tns.ts and helper.ts

in helper.ts

public show() {
    alert('Javascript+HTML alert')  .
  }

in helper.tns.ts

public show() {
    TNSFancyAlert.showWarning('Warning!', 'Message', `Ok`, 0, 300).then(() => {
         resolve('Success');
    });  
  }
  1. Rename all .html to .tns.html and create web specific html files.

Build a web app

ng serve

Build a Mobile app

tns run android --bundle
tns run ios --bundle

P.S. --bundle is the key here to compile mobile specific files only. The HTML code that defines the View of the component should be different between a web and a mobile app.

Upvotes: 2

Related Questions