2

I'm starting out on my Node.JS journey and I discovered a fantastic boilerplate over at https://github.com/azouaoui-med/pro-sidebar-template. I'm unsure though how to turn the static html into a web app. Just wondering how someone with more experience would do this?

Do I take the html and translate it into a PUG template file? I'm guessing to then make the onclick / links actually run some code, i'd need to point them at the routes setup in the web app?

Sorry to ask such inexperienced questions, web apps seem to take a vastly different approach to the desktop apps i'm familiar with programming

I'm wanting to create a web app that runs on a server, which I will later put on the desktop via electron.

thanks

Kronos1979
  • 21
  • 3

1 Answers1

2

The project you have is using browser-sync which indirectly uses NodeJS to run a local server and host the web application files.

Do I take the HTML and translate it into a PUG template file?

I am not sure about this question unless you specifically want to use server-side rendering I am not sure I would recommend this to start with especially if you plan to later convert this to a desktop application. [Note* - Assuming you are referencing this library PUGJS in statements above ]

Now For this requirement I'm wanting to create a web app that runs on a server, which I will later put on the desktop via electron.

This will require you to make your data serving layer which is most commonly called backend separate from that of the data viewing layer which is most commonly referred to as front-end. Thus a case for using the same data layer across different types of clients viz. A web application and/or A desktop application ( electron if you choose so )

Step 1 - Define what sort of web application architecture you want to follow or use. This will be based on your project and business requirements. From what information I have so far I would suggest a simple client-server architecture where your frontend or web-application is the client which makes REST API calls to the backend (API Server) and thus produces a meaningful result.

Step 2 - Start with the creation of 2 projects a frontend where your HTML, CSS JS, etc will be and a simple NodeJS script to serve this static web app when deployed on the server. I am going with NodeJS since the context of this question is suggesting the same.

Step 3 - The other project which will only be an API Server or Backend. This server will provide only REST API to the frontend. This server will talk to the database and provide other services like authentication and logging etc. You can use expressJS for this also in the frontend project.

Here is a simplistic representation of the client-server model which you can reference.

enter image description here

Some additional links for you to digest.

What is the difference between a web application and a client/server application?

https://medium.com/codiumclub/web-application-architecture-part-1-guide-to-become-full-stack-developer-cc9526a3519b

damitj07
  • 2,689
  • 1
  • 21
  • 40
  • awesome, thanks very much. I decided to go with expressjs, using CoreUI as a frontend template. Now I just have to figure out how to implement an offline-first methodology so the client can operate without having an internet connection. Any suggestions for that? – Kronos1979 Nov 12 '19 at 04:41
  • Nodejs will start an run a local server on your machine without requiring an internet connection. The only part where the internet is required is when installing dependencies. – damitj07 Nov 12 '19 at 05:33
  • sorry, I didn't explain myself very well. I was meaning in regard to a database offline-first. This is so the desktop client can still be working should the internet drop out (welcome to Australia). I've implemented mongodb, but i'm not confident that i can implement sync'ing like how pouchdb does for couchdb. Is PouchDB -> CouchDB the best way to go when your wanting an offline-first data structure? Thanks – Kronos1979 Nov 12 '19 at 05:45
  • Ok from what I could gather.. maybe this should help. https://stackoverflow.com/questions/27225233/pouchdb-couchdb-like-alternative-for-mongodb – damitj07 Nov 12 '19 at 05:48
  • thanks very much. I will take a look to see how i can implement that. seems like PouchDB/CouchDB is a good / well supported alternative though. – Kronos1979 Nov 12 '19 at 06:17