This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Reusing backbone views/routes on the server when using Backbone.js pushstate for seo/bookmarking
I am using Backbone.js and bunch of other modules to handle Single Page App method. My goals:
The site must be SEO-friendly
Server bootstrap html code to client and data stored in JSON models.
Sub-sequence actions are all handled by Javascript (e.g. render new screen, change url using Backbone router).
My question is: how to structure the server to align with Javascript on each router url and keep it DRY?
For example: if user goes to wwww.mysite.com and then click on some link to go to www.mysite.com/page/2, it must be the same as having him to go to www.mysite.com/page/2 directly on first load.
This seems to be an old topic but I cannot find any solid resource about best way to handle this on server side without repeating the template code in Javascript.
One option I am thinking is to split backend into Node.js and another server to handle API only. The Node.js server somehow share the template construction code as the Javascript frontend
Anyways, love to hear some advice and apology if this is not the right place to ask such question.
I would treat my node server as just a REST interface to my data. I would then handle everything else client-side: I could load templates using require.js with a template plugin like jade, do all my routing using Backbone.Router, and then access my models and collections using Backbone.sync methods (like collection.fetch().)
So for example, when a user accesses "mysite.com/#page/2", I could get my Backbone router to load and display whatever template would be on the page. If I happened to need a list of products to display on that page, then I could make my product collection do a product.fetch(). That would send a GET request to "/products" -- or whatever URL is specified in product.url. My node server would then respond with an array of product objects that the view my collection belongs to could use in rendering itself.
Related
What is the best way to persist user-generated data with NodeJS, Express, and MongoDB?
I'm building my first web-app using this stack (with bootstrap HTML/CSS and JS for the frontend) and I've realised that I need a data-binding solution. I'd rather avoid a complete rebuild of my front-end so it seems like React will be the best option, but I'd rather find out now if I'm missing something obvious.
The app will allow users to create 1-n documents, generate 1-n new components within them, and edit 1-n content-editable elements within those components.
I'm at the point where I've built the server, db, and frontend and the users and documents persist, but the components and their content does not.
The functionality I would like is that, when a user generates a new element or exits the contenteditable area of that element, any changes they have made will persist. I'd like to achieve this without a bazillion API calls.
Any assistance appreciated.
You may create page description in markdown and then render it to react components.
For example you can check https://www.gatsbyjs.org/ plus Remark Custopm blocks plugin - https://www.gatsbyjs.org/packages/gatsby-remark-custom-blocks/
I have recently started learning React and am trying to make a simple blogging app. I store the data (post content, comments etc.) in MongoDB and would like to render the content according to the route, such as, when I have a certain URL (like /blog/:username), I'd pull data from the database and then render a view with the data content.
Using Express, I am now using static html files ( express.static) as the view, yet this makes it impossible to render the content according to the requested route, such as:
/blog/:username/:article
It is possible with a template engine, like Jade, but Jade, as far as I know, does not work with React.
What is the correct way to make dynamic views using React while preserving the URL route structure?
Thank you
Generally speaking, there are several ways to achieve your goal. I'll sketch the one that I feel is the most natural approach when using React:
Create your blogging app with React
Use a frontend routing mechanism such as react-router to make React aware of the URL
Either fetch the data for each blog entry from the backend via an Ajax call each time the user hits a URL, or store the blog entry data in the frontend (e.g. using something like redux) and reuse it when required.
Does this make sense? If not, please keep asking...
I developed a small node.js app in which I can configure conditions for a custom javascript file, which can be embedded in a webpage, and which modifies the DOM of that page in the browser on load. The configuration values are stored in MongoDB. (For sake of argument: add class "A" to DOM element with ID "B" )
I have difficulties to figure out the best way to serve requests / the JavaScript file.
Option 1 and my current implementation is:
I save a configuration in the node app and a distinct JavaScript
file is created for that configuration.
The page references that file which is hosted and served by the server.
Option 2 and where I think I want and should go is:
I saves a configuration (mongodb) NO JavaScript file is created Pages
a generic JavaScript link (for instance: api.service.com/javascript.js)
Node.js / Express app processes the request, and
returns a custom JavaScript (file?) with the correct values as saved in mongodb for that configuration
Now, while I believe this is the right way to go about it, I am unsure HOW to go about it. Any ideas and advise are very welcome!
Ps: For instance I wonder how best to authenticate or identify the origin, user and requested configuration. Shall I do this like: api.service.com/javascript.js&id="userID" - is that good practice?
Why not serve up a generic Javascript file which can take a customized json object (directly from mongodb) and apply the necessary actions? You can include the json data on the page if you really need to have everything embedded, but breaking up configuration and code is the most maintainable approach.
I am working on a single page web application and have run into a question for which I cannot seem to find the answer.
Is there a way to load partial views from server side when using angular? I am using nodeJs, with express and Jade, and wanted to load partial views into angular, but I am confused on how I would do such. Is there any particular guideline that I should follow to structure my files?
I do not want to load all of my partials from angular, so I wanted to know if there is a way to load the views in from node.
EDIT: What I mean to ask is, am I allowed to load in partial jade views on angular? Does that have any effect on the way the page renders?
You can't. Angular is a Single Page Application framework, it means that you application (ie HTML+CSS+JS) is loaded once at first load in the browser, and all what happens is a communication of raw data (JSON over REST for example), Angular is in charge of displaying correctly the already-loaded-html correctly according to these raw data.
Ok, I am new to web dev and here's a stupid question. I have been through a few tutorials for node, express and backbone individually, but I can't seem to wrap my head around how they are integrated. Particularly, consider this use case:
Person X opens the browser, types in a URL and hits enter->Express responds to the request and sends some data back to the browser.
My question is, where does backbone come into the picture here ? I know it's a mvc framework to organize your JS code. But, I can't find a place in this use-case where the server/browser interacts with backbone. Only thing I can think of is that the backbone saving the route and serving the page the next time. But what about the first time ? It would be best if someone could explain to me how the request gets routed from client browser to express/backbone to browser again.
Also, am I correct in assuming response.send() or response.json() will send the result to backbone when model.fetch() is called ? I mean, is there no additional code required ? Being new to web dev, I'm quite not used to the idea of the framework 'taking care' of everything once you send the response back.
EDIT : Here's what I have understood so far. Feel free to correct me if I am wrong. When I access websites like gmail, the server first sends a big html file including backbone.js code in it. The backbone.js code listens for events like clicking on links in the html file and handles them if the links are defined in it routes(routes are always relative to current route, accessing a completely different route sends request to the server). So, if I click compose, my url remains the same because backbone handles the request. However, if I click Maps/News services in the bar above, the server handles the request.
There is no special integration between backbone and node.js.
If you use the standard backbone sync method then all you need to do is:
Use the static middleware in express to serve up your static html/js/... files.
Define RESTfule routes in express that conform to what backbone is expecting.
Backbone does indeed make an http call when you do model.fetch. You could look in Chome network tab to see where it's sending the request to and then implement that route in express.