Displaying html pages along with their css file on client side - javascript

I am quite new with server side programming in general and node.js in particular. Despite the several books I read about it I still can't figure out how to display an index.html in the client side, along with its css files. Is it most common to work with a ready made index.html file or perhaps to construct it on the fly using node.js? There's a big chance I'm missing something quite major here so I'll appreciate a well-explained answer...
Thanks!

Generally, if you're using Node to create some sort of web site or web app, you don't do it directly with Node. I'm going to assume that your end goal here is the website - not your own customized HTTP server that is also capable of serving websites.
So while Node does have the http library built in for serving content over HTTP, your life will probably be a lot easier if you use one of the common libraries/frameworks designed for creating websites with both dynamic and static content, such as Express.js. Using Node directly for HTTP relies more on your knowledge of the HTTP protocol and less on your knowledge of Node or HTML.
Express.js has a very straightforward guide about how to set up a simple app. If you're serving entirely static content, you can even skip the calls to app.get() and instead just set up up express.static() to point to a directory with your index.html and CSS files in it.
This might not be the answer you're looking for - you really need to decide if you're trying to learn server-side network programming, or if you're just trying to learn how to make modern/database-driven web apps. Raw Node is (usually) network programming. Express.js and similar are webapp programming.

Related

JavaScript, Reading and Writing files for a locally hosted application

I have read several posts on this site that ask similar questions but the key difference is they involve a client and a server. For my use, this is not the case. I am simply pasting a file directory on my computer into my browser in order to view a local HTML file, packed with CSS and some jQuery.
I've been looking around and the answers I've found are "No; a client can not write to a server", and "No; a server can not write to a client". But there is no answer to "can a client write to a client with JavaScript?"
Use case:
I'm building a webapp (website? JS app?) as a college project for a stock management tool that will be locally hosted and never connect to the internet. Sure, I could knock one together in python in a couple hours, but I wouldn't learn anything. I need to create an access a txt file containing an array of the current stock of all the items so that when the application is loaded, the user doesn't have to manually enter anything but the changes to stock levels.
Honestly, I'm a beginner at JS and JQ and I'm only going off of what makes sense based on a mix of HTML and Python that I know.
Maybe PHP would be the better option for this particular option, or maybe JS will work well enough.
You still won't be doing client-to-client, your browser will just act as though the local file system is the server using the file:// protocol which means the same rules about a "client" (the browser) cannot write to a "server" (your local file system) apply.
If you wan't to be able to write an application that can interface directly with the filesystem, then look into something like Electron which is essentially an augmented website that gives you APIs to interact with the actual computer the app is being run on, including filesystem stuff.

How to serve 2 different versions of websites under the same domain?

I have started working on a project that needs a re-write. So, instead of doing a big bang release
we have decided to use Strangler Pattern which means the following
The current application (stack details below) will be running as is under the existing domain https://app.com
The existing (and new) features will be re-written in a new stack (details below) and deployed in parallel to the existing app (under the same domain https://app.com)
The requirements are
The end-user always works with the same domain https://app.com
Any existing feature migrated to a new app or a new feature is available by the under the same domain https://app.com
The stack and architecture of the current app is
HTML files with hardcoded data
CSS files
font files
PDFs
images
flash files
among other things.
Thee application is static. It has no database. It makes calls to other 3rd party APIs but does not have its own database (other than the files, and the images)
It sits under a directory and is served by running a web server (Apache) on a private dedicated server.
The stack and architecture of new re-write will
Use React or Gatsby
A standard build system that generates the static files
The data (PDF, Images) hosted somewhere else
Flash files (until we figure out a better way)
Given these requirements, I thought of having 2 versions of the app using some sort of load balancer such as Nginx and serve the URL patterns using a proxy.
For example
a request coming to https://app.com/productPage.html goes to existing app deployment (assuming it is not migrated)
a request coming to https://app.com/profilePage goes to existing app deployment (assuming it is migrated)
Now, considering this situation, I want to ask the following question
Is this approach looks sane? Are there better ways to deal with this situation?
How to implement such a reverse-proxy based system (considering Nginx)? (or if there is a better way)
I would love to hear out ideas and any resources/books/github that can help me learn and implement this.
Thanks a lot in advance!
I would recommend to create a v2 of pages that has been migrated to new functionality. And all links to the page should be updated to point to v2.
If anyone has done bookmark to old links, then those pages can simply redirect the user to the v2 ones by simply redirecting them using JS - window.location(url_of_target_page);

Is it possible to use server side rendering with existing server?

I have nodejs + express server for API and I'm supposed to build SPA using latest Angular. The SPA should have a couple of static HTML pages which should be rendered using server side rendering and some templating engine - probably Nunjucks. My question is, is it possible to use that existing API server for server side rendering? SPA + static pages should be under one repository/directory, API server is under another. API server will be under separate domain. Is it possible to have them under separate projects or is it only possible if I combine server and SPA into a single project? The latter I assume being a pain to maintain.
Yes, You can definitely use your existing node and express server. #angular/universal is used for Server Side Rendering.
There will be separate Files for Server Configurations.
My Suggestion would be to make separate Repository for Angular app and let your existing one be as-is, that will help to maintain it better.
Please Follow "https://angular.io/guide/universal"

NodeJS, Express, Nginx and Jade... whats the deal?

So I'm currently investigating what technologies/libraries etc to adopt for a new, rather large scale project...
Given my teams knowledge of NodeJS, JavaScript, Express and Jade (now Pug) I/WE would ideally like to adopt these for the new project.
However, the current sticking point is the way in which HTML is being served under Express using route middleware.
We all know that Node/Express does a pretty bad job of serving up static files, which is where Nginx comes in. I can understand and even implement an Nginx config that handles the serving of img/js/css static files but what I'm trying to find out is this...
Can the serving of HTML (generated by Jade/Pug), using Express routes be handed over to Nginx in order to boost performance? Or is it the case that if you're using Express routing, you have to accept that serving of HTML files will be slow?
Got to be honest, I'm not quite sure how all this fits together so am hoping someone can shed a little light on this ;-)
Thanks in advance guys and gals
Reasonable recommendations:
Serve static files with NGINX, you can configure it to fetch the
files directly.
Serve dynamic files with NGINX proxied to your express app, and set an adequate cache value.
Can the serving of HTML (generated by Jade/Pug), using Express routes
be handed over to Nginx in order to boost performance?
Yes if you cache.
Or is it the case that if you're using Express routing, you have to
accept that serving of HTML files will be slow?
Not if you cache.
I hope that helps!
Without questioning for more details, I can point out some things i keep in mind when developing on Express:
Express "default" rendering done through res.render may not be optimal for a number of reasons. For example, lookup for the template file which is recalculated every request
Jade template engine doesn't support streaming
I would suggest, before looking at interventions outside application context (such as Varnish or plain Nginx conf), to try:
using a template engine supporting streaming: Marko, Dust, Nunjucks
if the app is a single-page, or generally an ajax based one, and you don't need any special SEO setup (although, there are fixes for that too), you may also pre-cache the static html then fill it up on the client (but this is really just a rant).
A good overview comes from Strongloop's blog post

blogengine without php or asp.net etc

Is there a way to have a blog directly integrated into my HTML/javascript-only website, without having to have something like a SQL-database and a dynamic engine like PHP or MySQL?
Maybe there is some service in the web that offers this (hopefully without ads :) ). Or maybe I can have a blog engine entirely written in javasript?
Entirely written in JavaScript? Surely that defeats the entire point of having a "blog-engine" in the first place? The point being that the data is stored somewhere and dynamically retrieved. To avoid using anything server-side (which seems to be your intent), and only use HTML/JavaScript, you'd have to store all the data for the blog in files that are served up to each visitor, and then retrieve the data from the particular, local, locations using JavaScript.
Sorry if I'm misunderstanding the point here... but this seems to be an utterly useless way of trying to go about things. Blogs are, in general, either written statically (in HTML [even though this is rare]), or are dynamically generated from a database by a server-side scripting language (most common).
Edit: As an additional point, I suppose you could include some third-party blog feed, or service, in your page, via use of JavaScript... but I'm unsure as to which (if any) blogging services would directly support this method of working. Additionally, this is quite an unreliable way of including third-party data in a page...
Here's a thought. It's not really a blog engine - but a wiki.
Entirely javascript/html/css. All lives in a single html file:
http://www.tiddlywiki.com/
not sure how it would work on a real live site, but their site is using it:
* A personal notebook
* A GTD ("Getting Things Done") productivity tool
* A collaboration tool
* For building websites (this site is a TiddlyWiki file!)
* For rapid prototyping
* ...and much more!
You could use github pages. You will get a generated blog with version control.
Other option is to use a Desktop blog tool and then update your site.
You can user iWeb if you have a Mac or CityDesk on Windows or you may try this open source tool
Edit Today I came across this tool: Zeta producer that may help.
http://code.google.com/p/showdown-blog/
Blog engine written in just JS and XML [v0.6] {JavaScript, XML}
So, what you want is to have a blog where you're website provider doesn't provide a way to serve dynamic content?
The only way I see that you can do it in that case is writing html-files (or text-files if you prefer) and adding them to the site. After that you can have some JavaScript to add them to your "blog-page".
You of course need to upload them to the website in the same way as you do for the other files, and then have a way for the JavaScript to know which pages it should fetch.
I am not aware of any JavaScript blog-engines, but you can have a look at the templating functions in for instance Prototype
Of course, that means that you will have to fetch both the template and the content through Ajax and let the client do all the processing (could be slow and possibly insecure), and you still need to have a place to upload the content and update it.
Your best bet is going to be using a generator to create the HTML/CSS/JS to upload to your server, take a look at Webby: http://webby.rubyforge.org/
IF you really need to you can use a public api for a service that lets you post small bits of info and retrieve it using javascript.
for example if you only need small posts you can make a blog in html.javascript that utilizes twitter as the engine. of course you will be limited to 140 chars. I am sure there are other services that will allow a similar idea but with less restrictions.
And of course the best option - Get a blog software or host your blog with a service provider and link to it from you site.
Good luck
One solution would be to use some application that generates the static web pages of your blog, and uploads them to your web server. This way you'd have a blog with static content that could all be managed in javascript alongside your existing site, without needing to install database, daemon software, or additional dynamic web programming languages on your server. The static content generation could happen directly on your server if possible, or you could run the html generation tool locally and upload the output.
MoveableType has a tool like this. You still need somewhere to store the content of your blog, and for this MoveableType uses MySQL by default, so you'd still need to install a database somewhere, but the database could simply be one your local desktop.
MoveableType also has support via plugins or older versions that can retrieve data from a sqlite or other database. The advantage of sqlite is that it doesn't require installing daemons like MySQL does, you can just put a sqlite file on disk somewhere, give MoveableType the path to the file, and run the script to generate your static content.
There are likely other tools like MoveableType, and I have in the past generated blog-like web pages simply by writing small scripts to generate HTML. The main issue is just that you need somewhere for these scripts to fetch data from.
Another option might be to develop your blog using XSLT, ... with XSLT, you'd put the content of your pages in XML files, and then write a template in XSL that converts your XML to HTML.
If you google for 'static blog site generation' you might find other ideas/options, including Jekyll/github mentioned in one of the other responses.

Categories