How do I get a largely HTML site generated from a rails app? - html

I would like to create a Rails 4 app, where some data is entered into the db via a form and when it is published, any changes on the site are compiled and the entire consumer facing site is just a bunch of flat HTML files.
That way, on each request there isn't a db request done and just a simple HTML file is sent.
This is similar to the way Octopress operates, where you write a blog post locally and when you do a deploy it basically compiles the entire site into a large set of connected HTML files that are then pushed to your host(gh-pages for instance).
Is there a way to use extensive caching or something similar to get the same effect in Rails 4 or should I go about it another way in Rails or should I just try to customize Octopress for my needs?

Have a look at page caching, it has been moved from Rails to a separate gem
https://github.com/rails/actionpack-page_caching
It saves the generated HTML files to a specified directory which you should be able to deploy separately from the rest of the application.

Related

Vue-Nuxt: Why can't I see the generated HTMLs correctly?

So when I type npm run generate Nuxt generates my project into the dist folder. In that folder I can find a folder called _nuxt where I have .js files and the index.html file but when I open it in a browser it doesn't show anything.
So, my question is: Aren't those static files?
When you work with the CDN served vue.js you have the html file and you click and everything is showed on the browser because those .html files are static, they don't need an internal localhost server. Why npm run generate doesn't do the same? Or how can I see those generated files?
As #aljazerzen explained, Vue,js doesn't do SSR out of the box, one of the aims of Nuxt.js is to provide SSR for you, as a benefit you can also generate a static version of your website. If I get what you want correctly, what you want to do is that when you open your index.html (the one that Nuxt.js generates for you) you can see your functional webpage. When you're accessing your website as a file:/// url, your browser (at least I've seen it happen with Chrome) doesn't load your .js files.
I don't have any Nuxt generated websites at hand so I can't tell you exactly why this happen. But this is my guess: when Nuxt generate those files it gives them a src that can't be accessed as file:///, maybe something as /your_js.js, that when it tries to load it, thinks it's the / of the root folder instead of relative to your website's root (/).
The solution to this problem is to serve your assets using any web server. According to Nuxt.js's documentation:
nuxt generate :Build the application and generate every route as a HTML file (used for static hosting).
You could do a quick test and use a simple web server by typing:
python -m http.server
In the folder that contains your generated assets.
Hope this helps!
Nuxt uses server side rendering.
You can read more here.
To generate static HTML files, run:
nuxt generate
Explanation: Vanilla Vue.js application is rendered only when the page loads and JavaScript can start running. This means that some clients that do not have JavaScript enabled (web crawlers) won't see the page. Also for a brief second before Vue.js can render the page, there is blank screen, when plain HTML files could already be visible.
Now, server-side rendering (SSR) is a technique for rendering a single page app (SPA) on the server and then sending a fully rendered page to the client. The client’s JavaScript bundle can then take over and the SPA can operate as normal.
This can also help with SEO and with providing meta data to social media channels.
But on the downside (as you mentioned), such application cannot be hosted at a CDN, since you have to have a Node.js process running to render the page.
In my opinion, SSR is redundant with SPAs if what you are building is actually an application and not a website. A website should mostly display information and should not be interactive. It should leverage web-based mechanisms such as links, cookies and plain HTML with CSS. In the contrast, web application (eg. Vue.js application) should be more like a mobile application: it is larger to download, but performs better and offers much more interactive experience. Such application does not need server-side rendering, since we can wait for it to load a bit more and because it shouldn't be indexed by search engines (it is not a website).

Creating a server / service client

I have been developing an app that has to access a DB and return data has charts in a web page. since it is to be added to another software i had to create it as a local server / servce, using self host web api, returning the data as json so i can read it in my html file and create the charts.
The server / service works, but my problem remains on the client. I don't know if i have to create another project for my html or if i just add a folder with my html and all css and javascript.
Basically when i run it i have to display my html file.
I have been looking the web for examples / solutions but i can't seem to find one that will help me, i've checked:
creating help pages with T4, but it includes all my css and js files in my html and when i want to change something i have to remove the include, debug and include it again;
create a web app but when i run it it creates me 2 servers, the one i've created and the web page server, although my web page will access it using angularjs, i can't have the second server;
I'm a little lost on how i will do it.
Can someone give me some help?
I'm using VS2010, self-host WebApi, console app, entity framework, angularjs, nvd3 and d3.
thk
If you have developed your project using MVC4 you can create view/controller related to report in webapi project.Point add html files to this view.This won't create 2 servers.

SquareSpace how to view local template?

I am currently developing a customized template of SquareSpace and I am not sure how to view the changes i have done locally? Also are there any resources out there to help me alter the templates, the documentation on the site isnt great?
Being able to develop and then display rendered squarespace (SS) templates in a local development environment (or "offline") seems to be an oft requested feature.
It's not straightforward so far as I can tell. To quote
The short answer is no. There is not currently a way to develop locally.
However, once we get site data exports working it should be a simple matter to setup a lightweight node js script to get local development running.
(source), similar answers
According to the SS docs, the templating engine is JSON Template, the styling is done by LESS and all of the data for a website is stored as JSON. The data for any page of an SS website can be viewed by appending ?format=json-pretty to the URL of the page (or &format=json-pretty if the URL already has a query string appended to it).
Here's an example of how to use the javascript version of JSON Template to render a template (view its source).
So it should be possible to set-up a local devenv. The solution would have to combine the use of the aforementioned components along with a way to combine a set of templates for any given page (e.g. combine sites.region and collections/blog.list for a blog index page). You could probably even hack together an html page along the lines of the aforementioned JSON Template example without the ability to combine templates if you just wanted to develop within a single template.

Publish a new post on Octopress from another computer

I am currently exploring Octopress. One question popped up during the course of my work - is there an easy way to publish a post from a random computer/device. I mean - if I do this via rake new_post['title'] I must have the whole thing set up on the machine I am doing it from - Ruby, gems etc.. Is there an easier way - like create a markdown document and than just send it to the Github repository?
I think there is no way to do that.
Since octopress is based on Jekyll, every page is rendered as follows:
Render Liquid
Convert if a converter exists for that extname(e.g. .markdown)
Render layout(s) recursively.
That is to say, for such a static website, it's unable to show a markdown document directly.
On the other hand, if what we send to repo is not a markdown file which must be converted to html to be showed, but a html directly, it's also not possible to make the site work normally.
Since not only the post page itself should be generated, but also many related parts such as index page, categories and so on.
In one word, octopress is static, we need generation before deployment.
Reference:Allow markdown to not be compiled to html

What is the best way to add a Dart hello world into my existing Node.js website?

I have been reading tutorials and guides concerning this but have not found a straight forward answer to this.
I currently have an existing website running on a node.js platform, locally on my computer.
Goal: Now I want to try and write a simple hello world in Dart, export it to plain JavaScript and see it work in my existing website.
Reading the documents, I read that I should create a new "Web Application" and to create some sample code up and running, I check the "Generate sample content" box.
And my project is now created in Dart Editor:
I can run the sample in Dartium, see it work, etc.
But the problem is that I have now a .html file in the Dart-project, while I have a real .html file for my existing node website in a totally different path. I don't want that. I want to try and use the existing .html instead, since.. thats my real website.
But when trying to create a new Dartium launcher, I can only refer to .html files within my Dart-project:
So my big question is; How do actually start using Dart with my existing developed website?
How do I create that bridge?
On the second image above in your original question, there is an option just below the HTML file, called URL - is this what you're looking for? You can set that to any arbitrary URL.
You'd also need to copy the helloworld.dart file into your node.js server path, and copy the bits inside the <body> tag into your existing HTML page. You'll also need to copy the packages\browser\dart.js file somewhere to your node.js server, too.
If you wanted to run the JS version, you'd also need to use the editor menu option to Generate JavaScript and copy the .js files into your node.js server path.
The script tag that refers to dart.js automatically detects if the browser supports Dart natively, and will either load the .dart version of your app, or the .dart.js version of your app (from the same folder location).
So what you're likely after is something like:
c:/nodejs_server_root
/existingIndex.html // containing the two script tags from helloworld.html
// and other tags referred to in helloworld.dart
/helloworld.dart
/dart.js
/helloworld.dart.js
And in the "URL" path in the launch configuration, you'd put something like http://localhost:<port>/existingIndex.html
https://pub.dartlang.org/packages/dev_compiler can compile Dart to Node.js modules with the --modules=node option.
See also https://github.com/dart-lang/dev_compiler/issues/291#issuecomment-176687849