I'm building an html5 web application with knockoutjs + backend rest service in nodejs (custom rest api, I'm not using express and i deliver only json data - no html).
The application is working fine like it is, but I need to get indexed by google.
I populate content using ajax requests and now i need to find a solution to make those pages "visible" for search engines.
Is there any true elegant solution for this? I don't want to make another backend service(website - expressjs or php etc)
Please advice :|
Google specifies a way for your site to provide "HTML snapshots" of ajax-loaded content. Not sure how well this works or if other search engines support it.
https://developers.google.com/webmasters/ajax-crawling/docs/getting-started
Related
I have developed and hosted few react applications but I'm still confused about the word server side rendering. So, I'm curious to know what is the benefit of serving my react applications from an express server.
Thank you as I look forward to your response.
Please consider clarifying your question, because I don't know also if you use next.js or nuxt.js.
Angular, React, Vue.js are JavaScript frontend frameworks/libraries, which means they are using JavaScript language.
The websites on the Internet contain HTML, CSS, JavaScript Vanilla code.
The application you developed using React.js needs to use React.js library source code, and then you need the React.js code to be compiled to JavaScript Vanilla code because the browser at the end needs a JavaScript native code that it can read.
When I need to see your hosted website, I need to write the domain name to see it, so the HTTP request at the end goes to the server which is hosting your react app, thus if your react application contains just a static content, for example, a landing HTML page, then there is no need for server-side rendering from Express(Node.js), Ruby, PHP, Java,...
What I mean by static content is content that doesn’t change in response to different users, all of them will get the same content.
Notice you can host a static website in Github and you still don't need any server-side rendering...
Let's have a small application for a better explanation:
If you developed a Portfolio that contains a description of yourself, images of your projects, skills, then here there is no need for a server-side rendering.
But if you developed a system that lets a user who has permission to create a short link from a full URL, then you need a backend server(like Java, Ruby, C#, PHP,...) to host the logic code in order to generate a tiny URL from the full URL, and then save it in a Database, that way any user can click the generated tiny URL then this request goes to your backend server which needs to redirect the user with correct full URL, an application like this cannot be done using React.js alone, you need a server to handle the logic.
Returning to your answering your question: "So, I'm curious to know what is the benefit of serving my react applications from an express server."
If you have static content you can avoid using Express, but if you think your application needs some backend logic in the future, then Express or any other backend framework will help you in that.
*Notice when you have a static website, and you tried to edit the content of it, the users which already visited your website, their browser might cached your website content unless (they disabled this option in their browser), so if your website is cached in users' browsers they might not get the updated content unless you changed the static website file name for example by adding ?092130123 to file name in order to let the users' browser download the updated data
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...
Is it possible to use google apps script in my HTML? I want to be able to write to a spreadsheet from a form in purely Javascript from an external framework such as Node.js.
https://developers.google.com/apps-script/
Google Apps Script's syntax is Javascript, however it is a unique server-side framework that does not behave as a library to applications outside of the Apps Script servers. (No, you won't be able to use Google Apps Script in your node.js app.)
However, that doesn't mean that your node.js app (or any other app on the web) can't interact with your spreadsheet. For instance, your app could authenticate as you using the OAuth API, then access the spreadsheet through the Google Drive API. For an example of this, see Accessing Google Spreadsheets from Node.js
Alternatively, you could roll your own spreadsheet API in Google Apps Script, to support read / write of your sheet via HTTP requests from your node.js app. There are plenty of examples of that, for example Insert new rows into Google Spreadsheet via cURL/PHP - HOW?.
Sure you can. You can use HtmlService to create your web form, then send the submission data to your Spreadsheet with server functions.
Nowadays you could use the Google Apps Script API to call your Google Apps Script code from other platforms like Node.js, actually the official docs include a quickstart for Node.js.
You can you use HtmlService, but maybe can be helpfull to read the Google Hosted Libraries https://developers.google.com/speed/libraries/
To use a Javascrtip library inside GAS, I recommend JQuery.
But Maybe, you can use Node.js inside your external website and make a AJAX Request (get or post) to a GAS and return from GAS this:
ContentService.createTextOutput(e.parameter.callback + "("+Utilities.jsonStringify(JSONDATA)+")").setMimeType(ContentService.MimeType.JSON);
After that, process it inside your AJAX request...
Mogsad is right that you might be better of with Google Drive API to interact with your Spreadsheet!
...But depending on your exact need you might have some possible interaction between external service and google apps scrip using Content service Google Dev link.
Content Service can send back several information upon GET request (ATOM, CSV, ICAL, JAVASCRIPT, JSON, RSS, TEXT, VCARD, XML). By playing around with url parameters you can get information out and in a spreadsheet, send an email, trigger some action etc!.
But that is far from a real external library and direct interaction with server side functions!
I have a JS wep app & Parse.com backend which I would like to hook up to Facebook using Opengraph actions. Problem is being a web app, it's not possible to manipulate the meta tags in such a way so that the Facebook scraper will use it.
Most solutions point to having a server side implementation running alongside your web app. Having read a little about Node.js...I think there could be another way and I was wondering if Node.js experts could shed some light.
Would it be possible to use Node.js to query my Parse.com DB based on URL parameters in order to serve up the proper meta tags? And would it be quick enough a solution?
Something like
- Request comes in - 'xxx.com/user/1234'
- Node queries Parse.com DB with user=1234
- Parse returns the information for meta tags
- Node serves up HTML page with the correct meta tags
- Web app runs as normal
Thanks in advance for contemplating this question.
You can absolutely do this. To set up a simple webserver with node.js, you can follow the simple example on their homepage.
http://nodejs.org/
To communicate with Parse from node.js, you can use the Parse JavaScript SDK, available through through npm.
http://blog.parse.com/2012/10/11/the-javascript-sdk-in-node-js/
https://parse.com/docs/js_guide
I'm developing a very dynamic web application via ember.js. The client-side communicates with a server-side JSON API. A user can make various choices and see diced & filtered data from all kinds of perspectives, where all of this data is brought from said API.
Thing is, I also need to generate static pages (that Google can understand) from the same data. These static pages represent pre-defined views and don't allow much interaction; they are meant to serve as landing pages for users arriving from search engines.
Naturally, I'd like to reuse as much as I can from my dynamic web application to generate these static pages, so the natural direction I thought of going for is implementing a server-side module to render these pages which would reuse as much as possible of my Ember.js views & code.
However - I can't find any material on that. Ember's docs say "Although it is possible to use Ember.js on the server side, that is beyond the scope of this guide."
Can anyone point out what would be possible to reuse on the server-end, and best practices for designing the app in a way to enable maximal such reuse?
Of course, if you think my thinking here doesn't make sense, I'd be glad to hear this (and why) too :-)
Thanks!
C.
Handlebars - Ember's templating engine - does run on the server (at least under Node.js). I've used it in my own projects.
When serving an HTTP request for a page, you could quite possibly use your existing templates: pull the relevant data from the DB, massage it into a JSON object, feed it to handlebars along with the right template, then send the result to the client.
Have a look at http://phantomjs.org/
You could use it to render the pages on the server and return a plain html version.
You have to make it follow googles ajax crawling guides: https://developers.google.com/webmasters/ajax-crawling/docs/getting-started