Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
Is there a full-stack, NodeJS-based framework similar to Ruby on Rails or PHP which renders templates on the server-side?
Basically, I am wanting to develop a web site which will be indexable by Google (non-SPA). I'd like to be able to include common header and footer files on each page. I basically want to do the following but with NodeJS:
index.html:
<?php include 'header.php'; ?>
<h1>This is the home page</h1>
<p>Here is some content.</p>
<?php include 'footer.php'; ?>
I will not be using a RESTful API (or any API) for this web site. It's basically a simple, static web site which uses NodeJS for its server-side component.
I would suggest that docpad is the best solution at the moment for what your looking for. It allows you to setup a set of templates, content and styles which generate a static site for you.
You select what templating engine that you would like to use based on a plugin system. The tutorial (which I followed recently) explains very easily how to do what you would like to do. The tutorial uses eco templating engine. Now I knew nothing about eco and was able to follow and figure out some tricky requirements of my own without too much trouble.
If you go this route, then I also suggest the partial plugin, which is really nice for inserting bits into other bits.
Start here on how to use. It takes you through everything that you could need to know for using it.
I also suggest installing node.js as per these instructions.
If you have experience with Backbone.js, Rendr.js shows some promise.
Your best bet is to just use one of the simple frameworks like Express http://expressjs.com/, along with a simple templating engine like Handlebars.
This module is then the one you need to add to the project:
https://github.com/ericf/express-handlebars
The readme of this is excellent, and has some fully working examples showing your two options:
Use a global layout file (this will have your header and footer in it).
Use partials - similar to the php example above
Keep in mind that the default Node world is to do server side rendering,just the same as PHP, but in JS. The frameworks like rendr are really trying to do something much more complex, and share rendering between server and client - you don't need this if you are just building a simple web site.
Best of luck.
Related
Sorry for stupid question. I'm learning frontend and backend technology. I'd like to do apps like this easy, but i don't undertand how that was made.
https://thelucky777.site/
It's look very simple only few blocks, but index.css have more then 10 000 lines of code. It has a lot selectors name wb_layoutgrid54, wb_layoutgrid16 etc.
I know react a little and django.
My question is how can i do apps like this without headache? How that app was made?
Having a look at the site, I would be fairly certain this can be achieved using plain HTML, CSS and some Javascript/jQuery to help with the animations.
When it comes to development, my personal opinion is take for example a site, it can be developed many ways using different tools to achieve the same outcome. To make this less of a headache I would develop a wireframe and break things down step by step what you need to do without thinking what tool(s) was used and once you get an outline start to slowly build and research how to do certain sections using your skillset.
Overall I will still state that it can be done using basic tools such as HTML, CSS and some Javascript.
I hope this helps :)
So, I want to apologize ahead of time but I've been googling and stack overflowing for an answer to this question and I just can't find a satisfactory one.
I know that Facebook uses React and, although I don't know what software architecture they use (MVC, Client-Server etc.), I can't see any react files or react components in the dev tools sources tab on any browser.
I'll show you an example in my own react app using create-react-app that shows all my files:
Create-react-apps dev tools sources:
However, when I go to Facebook's page, I don't see anything like that. I see this:
Facebook's dev tools sources:
This isn't only true of react apps, but just node apps I've made as well. Now, I want to know where all of this information is on facebook's page.... Where are the components? Why can't I see them? Where are all the post and get requests being run? How can I put breakpoints in the code for debugging? I mean, I don't even see an HTML page besides the elements tab! And, most importantly, how do I do the same thing to hide my files?
It seems like it adds an extra layer of security that I would think is preferable on all public websites. Once again, thanks in advance and, as far as I know, the answer to this is nowhere near obvious.
I admit, this one little bit confusing when you are quite new on the web development.
You can see your files (source code) via devtool because you also upload your .map files which help map your bundled/minified code into the the original readable one.
However, this is super helpful on development environment, but quite dangerous on production. What you need to do just remove the .map files, as comment suggested.
I’d like to move away from Wordpress with my blog which may also contain pages with different layouts/design. Therefore I’m looking for suggestions for a full web-stack which meets my requirements below.
I would like to use Node.js and also DocPad for the blog itself but DocPad seems not to be made for the kind of dynamic content I’d like to have.
These are most of my requirements:
dynamic content (like unlimited scrolling for posts, switching categories without fully reloading a page) crawlable by
search-engines crawlable by search-engines
multi-lingual blogging with markdown
atom-feeds
sitemap-generation
full-text search for articles / pages
manage/count downloads
pages may have a different designs/template (e.g. if I want to experiment with HTML5 or anything)
embed media from YouTube, Soundcloud etc.
responsive layout
Technologies which are set
Node.js
Express
I’m eyeing with the following technologies as well (this is not a stack, just technologies I find interesting):
Ember.js for the client-side
Foundation
DocPad
Mongo DB
Grunt
I will recommend you Mean.js It's a complete stack of nodejs, express using mongodb. Frontend is based on angular I think is very powerful and you can use yeoman generator to avoid to write a lot of boilplate code.
I heard that mean.io is very useful too but I didn't use it yet.
Take a look here http://meanjs.org/
EDIT: Here is an interesting thread about this two stacks Difference between MEAN.js and MEAN.io
Express JS uses templates for generating HTML and then server sends them to client in response. There may be several other templates from which HTML can be generated. The ones I was able to discover are:
Jade (http://jade-lang.com/)
EJS (http://embeddedjs.com/)
In my app, I need to use both ExpressJS and AngularJs. I am new to both technologies. While learning angular, I had to use it in pure HTML. After learning ExpressJs, I realized, in order to use angularjs, I need to use them in any of the above templates which will be converted to HTML while sending to client.
Now, I want to use expressjs as my server and angularjs as my client side app. For this, I think I have two options.
Option 1
I can stop using templates altogether and use our NodeJS server to respond by sending simple HTML files. These HTML files will then contain AngularJS coding within them. AngularJS then, on client side, will act as our application. It will demand other HTML documents from the server. Or it can also be used like AJAX, where we can only request the piece of information to update just part of the page rather refreshing the whole page for a minor change.
Option 2
I can use angularjs inside expressjs templates (jade or ejs).
Kindly, help me in understanding the pros and cons of both options. Which one will be your choice in such case.
This is very much an opinion question and Stack Overflow admins hate anything that smacks of opinion, but here's my experience and opinion nevertheless.
I've done a couple of apps now using purely static files (HTML, CSS, and JavaScript) with those calling a service on the back-end to deliver the data. It reduces the back-end, whatever it is (I've used both Java and Node.js), to just being a set of service URLs but it works very very well.
You've got a fantastic hard line between the responsibilities of the
two systems
It's very easy to work on and test each one independently
Bugs are usually very clearly in the front-end or the back-end (all
you have to do is look at the data transferred to know)
The back-end services are ready to be reused to support alternative UIs from the
command line or something mobile specific if you want
You can use one technology for the back-end to start with (say Node.js or Ruby on Rails) and then switch to something else later if you need to. As long as the API stays the same the front-end never knows.
I personally use AngularJS with Express/Jade. The setup is actually pretty simple and I find writing Jade much more enjoyable than writing HTML. I've also adopted writing my Angular code in CoffeeScript as, again, it makes for quicker development. If you are looking to save keystrokes then Jade is a great solution and its integration with Express makes it a no brainer. If you aren't worried about producing code more quickly then there is absolutely no problem with using HTML.
I will point out that one of the greatest benefits I have found to using Jade over HTML is the ability to develop a single page in multiple files, then use include to have them concated before compiling into HTML. This allows you to take larger pages and break them into more manageable chunks. Together with Angular's templating, this can relieve much frustration.
Really it is all a matter of opinion, but since I decided to give Jade a shot, I have not regretted it and I have never ran into a situation where my HTML was rendered incorrectly when using Angular.
I went with option 1 because I didn't want to deal with any potential issues with jade or ejs converting the template incorrectly and interfering with Angular. My app essentially has the index page (which is really just the basic page template with my css and js includes) come out of Express as jade and then angular takes it come there and all my angular templates are in a separate location than my jade template.
Is there a module or similar things that support skinning in NodeJS? I want to build a NodeJS website, and want to be able to re-skin the website as I like without much efforts, like in Wordpress.
Is skinning supported in NodeJS?
If you're interested in building a website in Node.js and don't need a wordpress-style cms behind it, there are few projects that can help you out.
Have you looked into Bootstrap? It's built with less which you can easily plug in to your Express setup (see the guide here, using the command line executable to set up a new project you can specify less like this: express --css less myapp and it will do all the work for you)
In the bootstrap less file are several variables you can use to change the colours, fonts, sizes, etc, and it's also got a lot of helpers for grid layouts and responsive designs.
It even includes a few useful javascript plugins too which make the ui nicer with less work.
There are also a lot of sites with themes and theme generators around which then work on top of bootstrap, and may achieve what you want.
Plugging in this sort of solution (whether bootstrap or other) is about as close as you can come to getting skinning for node; As otherwise suggested if you're looking for a CMS out of the box as well, probably best to look for another platform like Wordpress.
Node.js is not a content management system. It is a platform on top of which you could built a web server with a content management system. To answer your question you need to be looking for node.js based content management systems that support themes.
The only node.js CMS that I am aware of is Calipso. It's still pretty alpha-stage. It may have some theming support, but it is nowhere near as polished as Wordpress.
Also is there a reason why you want to use node.js? I mean there is nothing wrong in using Wordpress for creating a themeable website - it is just awesome for that.
If you just want another OnlineShop, or maybe a blog, i think nodejs is maybe not your right choose as Jed Watson told.
If your requirements are more complicated, and you want a quick and easy implementation of a nice web interface, and you have html, javascript, and css knowledge... I strongly recommend you just trying to work with MEAN.js
It puts together MongoDB Expressjs, AngularJs, and NodeJs.
Use this, for example with a yeoman fullstack constructor and you will have a powerful webapp, with user autentication, and much more in a few minutes.
After that, the use of jade, less, scss, and similar languages of modelling the front, and the easy way you can also model collections in the back, is for me the best combination you´ll find for creating a website today.
Hope it´ll help you
King Regards