Static site generator on Ember


#1

Hi! I’d been searching static-site generator on embers and it turned out there are no mature solutions within ember community. I found https://github.com/robwebdev/ember-cli-staticboot but it has very limited functionality.

If you try something like Nuxt.js you’ll see what I mean.

My questions are:

  1. Does ember team plan to make static site generator?
  2. Are authors of ember-cli-staticboot going to continue active development?
  3. Do you know any other solutions?
  4. Do you think people actually need full-featured static site generator on Ember?

PS. I’ve tried https://github.com/ef4/prember and it works like a charm. Website loads really fast! Thanks for advice gyus! Example website here http://mf-ember.surge.sh/


#2

I think cdn’s like cloudflare do a good job speeding things up. See the example https://bloggr.exmer.com/ that is accessed via cloudflare. The Ember app is coming direct from a relatively slow CouchDB database on https://martinic.couchcluster.com/bloggr See also ember-service-worker to speed things up for the second time. So I would not invest in a full-featured static site generator myself.

.


#3

Aidan has started a neat publishing pipeline project you might want to check out:


#4

@jacobq Thanks, it looks like what I’ve been searching for


#5

Seems like you may also be interested in https://github.com/ef4/prember


#6

Agreed. Also anulman/hyde builds on top of prember.


#7

Thanks! This is interesting tool as well!


#8

Very cool, to find this as I was dreaming about doing this as soon as I installed prember. However, does anyone know if I can use prember to output static files without Ember core linkages (eg. to vendor.css or including any ember files)?

Just looking to use all the goodness of ember but keep static pages super lean (or no .js at all).

Joel


#9

Hey @progand :wave:

I always find it fascinating how it’s quite often the case that a few different people start looking into very similar things independently at the same time!

I don’t know if you’ve noticed the announcements yet but we have just launched the new Ember Guides app that is essentially a fully working “static” site. I’ll be jumping into some deep-dive blog posts soon to explain how every little bit of it works but we have already updated the Guides App Readme and the Contributing guide on the Guides Source with details of how to get started contributing.

If you are interested in this static-site generation side of things then we would really appreciate your help on the Guides App and you should be able to figure out how to take some of the tech and run with it on your own projects. I have already built a side project that uses the same tech as the Ember Guides called Ember Casper Template

From the top of the readme:

This project is designed to be a fully-functional, static site implementation of the official Ghost Casper Template built on EmberJS with fully working out of the box SEO friendly output. It supports being hosted on AWS S3 or any other static site hosting solution.

And all of the above also uses prember (thanks @ef4 :tada:)


#10

@real_ate It’s awesome! I haven’t tried so far, but I have a few questions:

  1. ember-casper-template is a fork of another repo so I cant post issues on github. Do you plan to make it an indepent repository?
  2. Can you fix problems https://emberobserver.com/addons/ember-casper-template to make this addon visible for community?
  3. Can I use this addon inside my regular ember app? Does it require any url changes?

Thanks a lot. I’m going to check both the addon and ember guides very soon.


#11

I’ve tried ember-casper-template and encountered error

Assertion Failed: Attempting to inject an unknown injection: 'service:fastboot'

in the end (after Configuring when I remove {{ember-welcome-page}})

My console output:

DEBUG: -------------------------------
ember-console.js:43 DEBUG: Ember         : 3.1.2
ember-console.js:43 DEBUG: Ember Data    : 3.1.1
ember-console.js:43 DEBUG: jQuery        : 3.3.1
ember-console.js:43 DEBUG: Ember Postcss : 3.7.1
ember-console.js:43 DEBUG: -------------------------------


#12

I’ll answer your questions one by one :joy:

  1. It seems that issues are just off by default when you fork a repo, but that has been fixed now :+1:
  2. I have submitted a request to emberobserver to see if they know what’s wrong, it looks like I have things set up correctly but I’m not too sure :thinking:
  3. No. This is currently a “take over your app” situation for the time being.

This is very early in its development cycle so it had a very narrow scope, very much a “do one thing and do it well” kinda thing.

We do want to be able to use this to maybe “mount” this app at a particular subroute of your app but for now, I would recommend using hosting strategies for this.


#13

I imagine you probably ran something like ember install ember-casper-template and then it would have thrown an error along the lines of:

➜  test-blog git:(master) ember install ember-casper-template
npm: Installed ember-casper-template
ENOENT: no such file or directory, scandir 'content/'

if you go this error then it is likely that ember didn’t get a chance to install the necessary packages automatically. Just run ember g ember-casper-template and it will do that for you :+1:

I’ll take a look at making this a better experience for people wanting to try it out :joy:


#14

It works indeed! Thanks!


#15

For anyone else that was following this discussion, I have now fixed the issue @progand was having in v1.9.3 and it shouldn’t crash on you when you’re trying to install ember-casper-template.

You will still need to follow the instructions and create the content folder and a few others but now at least if you follow the documentation it’s working again :tada:


#16

Hi all :wave: me again :joy:

I’ve just tweeted about the next generation of the system powering ember-casper-template and I thought anyone watching this thread might be interested:

Essentially the section that contained “Essential steps to get this working” has been deleted and it works out of the box :tada:

All you need to do is the following snippet:

ember new super-blog
cd super-blog
ember install ember-ghost ember-ghost-casper-template

And it should work straight away! I have even populated it with example data so you can get a feel for what you need to do to get it working :+1: enjoy!


#17

Haven’t tried yet, but looks amazing! Thank for your hard work! I’ll definitely give it a try:+1: