Quantcast
Channel: Ionic Framework - Ionic Forum
Viewing all articles
Browse latest Browse all 48983

Ionic WebServer Example? using Capacitor

$
0
0

I am trying to make a WebServer for iOS and Android.
I need to deliver html/css/js file from my app directory
Also need to show ipaddress and port number to user.
when they hit that ipaddress from other local machine we need to show the HTML file from our app dir.

I try

$ npm install cordova-plugin-webserver2
$ npm install @awesome-cordova-plugins/web-server
$ ionic cap sync

But shows error.
how can i do this?

Any Example app i can learn this kind of functionality?

import { Component } from '@angular/core';
import { WebServer } from '@awesome-cordova-plugins/web-server/ngx';
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(private webServer: WebServer) { 

    
    
  var port = 80;

  this.webServer.onRequest().subscribe(data => {
    console.log(data);
    const res: any = {
      status: 200,
      body: '<html>Hello World</html>',
      headers: {
        'Content-Type': 'text/html'
      }
    };

    this.webServer.sendResponse(data.requestId, res)
      .catch((error: any) => console.error(error));
  });

  this.webServer.start(port)
    .catch((error: any) => console.error(error));

  console.log('server started at port : ', port);
  //alert(port)
  

}



}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { WebServer } from '@awesome-cordova-plugins/web-server/ngx';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [WebServer,{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

1 post - 1 participant

Read full topic


Viewing all articles
Browse latest Browse all 48983

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>