thinktecture / boardz-cross-platform-sample

Sample application for demonstrating various aspects of modern cross-platform applications - using Angular 2, Cordova, Electron & gulp. With a .NET Web API & SignalR backend.
MIT License
78 stars 30 forks source link

Q: How does this work? #57

Closed KingKnecht closed 7 years ago

KingKnecht commented 7 years ago

Hi, I'm very new to this *.js stuff and I have some questions.

  1. If run "gulp watch-electron" or "gulp watch-web" is there a server in the background running? Or is all the data-storage done "locally"?
  2. Same question if I start the BoardZ.exe directly.
  3. I see that there is a C# solution included which looks like a server. Gets the C# code compiled when running the gulp command? If not, what is the usage of the C# server?

Thanks a lot, Sven

ManuelRauber commented 7 years ago

Hi @KingKnecht,

let me provide you some answers for your questions. :)

  1. gulp watch-web starts a little HTTP server which serves your requests when you take a look at the app. If you use gulp electron the app get's packaged with (electron)[http://electron.atom.io/]. Within electron Node.js and Chromium is packaged. A Node.js process is started which then creates a Chromium-based browser window, which serves the index.html directly from the file system. location.href = '"file:///Users/manuelrauber/Documents/Projects/thinktecture/boardz-cross-platform-sample/dist/desktop/build/osx/BoardZ2.app/Contents/Resources/app/index.html"'. If you use gulp watch-electron there is an additional server started to provide the live reload functionality. In both cases, the watch-* gulp tasks are for development only. :)
  2. See 1. about the gulp electron part.
  3. The C# code doesn't get compiled when using the gulp commands. This server is used to provide the backend for the app (and is not related to server you mentioned in 1. and 2.).
KingKnecht commented 7 years ago

Thanks for your quick response. I have some more questions ;-)

  1. What do I need to do if I want to use the C# server? I'm already able to compile and run the server ("Server up and running").
  2. If I understood correctly what you said, the C#-server and the C#-services code isn't used. Does that mean the functionality for the backend (storing data) has been implemented twice? One implementation in JavaScript/TypeScript and one in C#? Is the application able to switch in "C#-Server-Backend"-Mode if a server is found?
  3. What do you mean with "live reload"? I have started 2 clients, logged in with the same user and added a game. But there was no "push" from one client to the other. So, that isn't "live reload" ;-)

Hope my questions make any sense to you. It's really hard for a .Net-only guy to understand what's going on and to get a big picture.

Thanks.

gingters commented 7 years ago

With love-reload my colleague describes the feature that you can edit the client application code and the live reload feature will detect these changes to javascript / html / css files and will trigger the browser (or the chromium browser within the electron app) to live-reload the application, so that any changes are effective immidiately in your client app without the need to rebuild it.

KingKnecht commented 7 years ago

Ahhh, that's cool!

KingKnecht commented 7 years ago

Maybe I should begin the other way around. I already have a simple collaborative designer app: SimpleTool video

I have a server (C#), a client (C#), and a client-frontend in WPF. But WPF sucks. So much effort to get things to behave for your liking and at the end it runs only on Windows :(

What I'm really interested in is, is it possible to re-implement the GUI and Viewmodel stuff in HTML5, Nodes.js, Electron, etc, etc, to get an app running on multiple plattforms?

As sad, I already have a server which is dealing with the business logic, storage etc. That's why I ask about the C# server/backend.

Cheers.

gingters commented 7 years ago

We have the frontend / GUI application. This is what we refer to as 'Client' (BoardZ). This client application is written in Typescript, using Angular2 as a framework, and is capable of running as a normal web application in the browser, and can be packaged into an electron app for desktop usage (Linux, OSX, Windows), and it can be packaged into an cordova app for mobile usage (iOS, Android).

This client application simply uses HTTP to talk to its backend / server part (BoardZApi). This is the C# project and it is just a simple ASP.NET Web API project. This can be hosted in IIS (Webhost project) or self-hosted (SelfHost).

Usage is intended as: First you start the API project, which then starts the pure http API. Then you start the frontend app. In development mode, this will be hosted by the node webserver and uses live-reload for all changes at the client-code, so you can test in your browser. At build time, the web-app will be packaged in to electron/cordova and can be deployed to devices (make sure to edit the config so that it will find the server when running on devices other than your localhost).

KingKnecht commented 7 years ago

Well, I see... have to learn Angular2 first. I'll be back ;-)

KingKnecht commented 7 years ago

Lol, now I understood that you guys provided a demo server https://boardzapi.azurewebsites.net/ (appConfig.ts) and that's why Login etc is working... And now please forget about the question if you have implemented the services twice. Now it's clear why it's working without my server running....

ManuelRauber commented 7 years ago

@KingKnecht You are absolutely right. :) We provide it for an easy start without having to setup everything.

If you don't have further question, can you close that issue again (and feel free to open a new one, which makes it easier trackable)? Thanks! :)