I have recently finished the book: Node Beginner Book and I want to build static websites and real time web apps. I have a project idea that is basically just an eCommerce website. From what iv'e heard, node.js is very good at real time data transfer between the client and the server but is it possible to make general websites instead of real time single page apps in node.js?
If so, could you please point me in the right direction.
Thanks!
Using the ExpressJS framework and express.static() you can serve a directory hierarchy of static files with a single line of code.
For example:
app.use(express.static('public'));
Tell express to look in the 'public' sub-directory for any requested file and serve it statically from there if a match is found.
Other route handlers you configure with Express also have a crack at serving the file so you can freely mix static files and dynamic files.
There are several good frameworks available in node.js for serving static resources.
I've personally used Harp.js in several projects with success. It not only lets you easily serve static content, but aldo supports several template for languages for abstraction and dynamic behavior. It can also works nicely with other frameworks like express.
Revised
Meteor.js, sails.js or similar framework seems to be what you're looking for.
Related
I am dealing with some legacy web apps which are loading 70+ JavaScript files (libraries, core files and custom files). Only a handful of these files are "minimized" while most of them are not. All files are local and not coming from CDN. These web apps are deployed inside secured data centers (private clouds) and does not necessary have access to internet (I know it sounds funny, but most enterprise private clouds are like that).
What would be the best way to "minimize" all these files and keep them local? Is it possible to merge 70+ JS files into 1 large "minimized" JS file to save bandwidth/performance?
You can consider using something like: minify.
We have used it for quite some time. There may be other solutions also, but I am curious to hear from others as well.
I was just wondering if there's a way to implement Node.JS and its main file as a sort of container for a fully implemented HTML template/theme like those on Themeforest.
I looked around and saw JSDOM but I don't think that will fit my needs.
In case it isn't clear, Themeforest hosts HTML5 themes that are fully functioning HTML/CSS/JS files that you can just upload to your host file server and it will serve up your front end. I'm just getting tired of making React-styled apps, and just want to try these nice looking themes for a change.
As you are looking to host static HTML/CSS/JS contents, you just have to run a basic server, as described by answers on this question. If you are looking for a production appropriate solution, you should also consider cloud storage/CDNs.
What are good practices about building a multiple page application using modern JS frameworks?
Multiple page application
In multiple page application we have multiple templates using some “template syntax” to provide us with backend data and AJAX (if needed) or advanced UX voodoo is often handled by jQuery.
Single page application
In single page application “backend data” is provided by AJAX requests and whole routing, frontend logic is handled by JS. We often use some JS framework like Angular or React and compile our sources with task runners/bundlers like webpack or gulp.
Hybrid application
But the most popular around the web seems to be hybrid app. What is typical build workflow while working with such an app? I could not find any tutorials or guides.
So to be specific. I imagine webapp where in which, each page has to be compiled and could share some resources. Every page has own JS routing like wizards or subcomponents. Data is loaded both during page load and AJAX.
For example my webapp would have 3 pages:
guest page - would provide website user with limited content and attract him to sign up
user - would provide signed website user with full content, resources would be extended guest content
admin - shares only styles and webapp “core”
Task Runners/Bundlers
For example in webpack is there a way to specify multiple entry and output points? Maybe the better way is to have multiple webpack/gulp configurations. In that case If I have a lot of pages I would have to write webpack/gulp configurations for every page even though some of them could be exactly the same. How to run that kind of build?
Sharing resources
Will browser load cached js bundle with the same hash like bundle.a2k4jn2.js within the same domain but different address? If so, how to specify such a behaviour in tools like webpack or gulp. I heard about CommonsChunkPlugin but not sure how to use it or even I’m looking at right direction.
Templates
What if I want to load some “backend” data not by AJAX but at the page loading. Of course every templating engine provides us with ability to write native code directly in html template like JSP or PHP. But what if some routing is handled by JS and “template tag” is not visible for page at initial loading i.e. template would not be compiled. Sometimes template engine in server and client could have the same special tag like Blade and Angular which can lead to conflicts.
Directory structure
I suppose that in hybrid app frontend and backend will be tightly coupled. Sharing JS in hybrid app could lead to very complicated imports (in es6 or html script tag). How to keep it simple.
Deploy
What about deploying an application? In java it’s easy because we just specify directories (compiled pages) in build tool (maven, gradle) which be copied to jar/war, but in PHP source code is not compiled how to keep “js source” away from production I could not imagine sensible resolution other than writing own batch/bash script
Summary
I have mentioned specific technologies and frameworks. But my question is about common approach to work with such an webapp rather than “how to do sth in that tool”. Although code examples would be greatly appreciated.
Their is a lot in this question, as a starting point you can define multiple entry points in webpack.
https://webpack.js.org/concepts/entry-points/
If you want to mix data loading between FE and BE then you really need to write an isomorphic JS application and use Node as your BE, otherwise you’ll end up writing everything twice in different languages and having once come across a project like that, trust me you really want to avoid that.
The other bit of this question on shared resources is best answered by WebPack’s bundle splitting which is made for what is being asked here
https://webpack.js.org/guides/code-splitting/
Not sure if I totally understand the question, but single-spa (yes it's redundant) is a tool that can be used to combine multiple apps (even if they are different frameworks) into one single page application. Link to the docs: https://single-spa.js.org/docs/getting-started-overview
I'm writing Java Web application and want to use AngularJS on frontend.
But I don't want to delegate routing and security to angular, but handle it with spring. My file hierarchy in the project looks like that:
I wrote Angular controllers, services etc. And just apply it on the jsp page with some init parameters. All jsp are loaded by Spring controllers, I have some security rules for that pages. Angular also consumes REST API from this application.
The question is about efficiency of such approach. In fact I have a few SPA in here. Every time i load a page, Angular initializes from the beginning (there is about 10 pages).
The reasons I want to stay on this version are:
It's already set (Routing, Security)
It seems like I don't need to load all the scripts on the page, but only required ones
But also I have feeling I'm doing it wrong way...
Should I separate Spring and Angular and use Angular also for routing and security handling, not only for DOM manipulation.
What do you think? Do you have any suggestion?
Angular is not another jQuery, its Single page application framework.
You can look on SPAs like on ordinary external application which communicates with your backend. So there is no view or prezentation layer on server, just REST API.
Angular app should have its own routing, it doesn't make sense to combine it with spring MVC. Security lays mostly on REST, and you can use spring security on it as ussual.
Best practice is to create Angular app as separate javascript application. You can use a lot of tools from angular ecosystem which makes your work very comfortable.
During development you have your backend running, and develop Angular part separately using javascript devstack. After that you can pack the both parts to single war.
I have nice small example of Spring and Angular integration here:
https://github.com/Angular-cz/java-devstack
Unluckilly the readme is written in Czech (beautifull language :) But if you are experienced in Java and maven you will probably get it from code, I will also try to describe it here.
The bigger app with a nice module structure and jwt autentication can bee seen here:
https://bitbucket.org/angular_cz/beerapp
Both of them has similar architecture:
separate maven module for frontend and separate for backend.
javascript part use npm as package manager
developer is using gulp task runner for javascript development (it is run inside module, where gulpfile.js resides).
there is karma runner configured and several unit tests
the app connects to the backend during development using proxy running on /api for the app can have same configuration on production)
when building war, frontend module uses frontend-maven-plugin which run gulp build task same as javascript developer would
then the built minified assets are put to resources
the next part is just ordinary maven way how to put assets to /static
one more nice thing - there is also integrated e2e test under integration-test profile.
Feel free to ask if you are interested in this kind of architecture.
I’m good at jQuery but I’m new to modern js frameworks introduced over the last couple of years. I understand how index.html works in the following example and I can infer that server.js serves the request made from index.html. However, I’m not clear on how server.js gets initialized.
http://codeforgeek.com/2014/07/send-e-mail-node-js/#comment-18703
There does not appear to be a src ref from index.html to server.js which appears to indicate that server.js gets initialized in some other way although that's all I'm able to infer. This is a knowledge gap on my end but can you explain how to initialize server.js so that it can be called by index.html?
Node.js is a platform built on top of javascript. Non blocking threads due to its asynchronous behaviour, still event driven.
Node.js provision many use cases. You can refer this & this.
Coming to your point is required to create a webserver on top of node.js http/https modules. Once this server started by nodejs, it is ready to serve http clients.
Open source dev communities built some of great web app framework like express which are easy to learn. github, npmjs are full of great node modules / packages which are ready to plug into your app.