Server Side Rendering Improvements

22

What I’d really like is to be able to update my “super-minimal-aurelia” repo to include an SSR-variant.

The problem with the skeletons is they have way too much stuff I don’t use or need by default. I’d rather see something that strips out all the unnecessary cruft and just includes the absolute bare necessities to make it build and run successfully as a scaffold I can build on top of.

Maybe we can figure out a way to achieve that? I imagine lots of people would love to have a minimal starting point to work from.

23

Yeah I wish there was an easy way to know what dependencies were required. I think this is the subject of another thread.

Not sure what the problem is with the reconfigure error. What does your server-main.js look like?

24

This might make it easier for you: https://github.com/rquast/cavy-website-ssr

Feel free to pick it apart.

25

Nice work you have there…
would you like to move your repo to aurelia-contrib and continue there?

26

@rquast Thanks! I’ll pick through it and try to see how it all works.

To answer your question, the skeleton I cloned of yours still had a server-main.ts, and this was its contents:

import '../static/styles.css';
import 'font-awesome/css/font-awesome.css';
import 'bootstrap/dist/css/bootstrap.css';
import { Aurelia } from 'aurelia-framework';
import { PLATFORM } from 'aurelia-pal';
import bootstrapper from 'aurelia-ssr-bootstrapper-webpack';

async function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration();

  await aurelia.start();
  await aurelia.setRoot(PLATFORM.moduleName('app'));
}

module.exports = bootstrapper(configure);

@Alexander-Taran perhaps if/when I can get an SSR boilerplate in place, sure!

27

Yeah, still getting the same result with your cavy repo - seems like it must be something to do with ssr-engine?

$ yarn run server
yarn run v0.27.5
warning package.json: "dependencies" has dependency "autoprefixer" with range "^7.1.6" that collides with a dependency in "devDependencies" of the same name with version "^6.3.6"
warning package.json: "dependencies" has dependency "bluebird" with range "^3.4.1" that collides with a dependency in "devDependencies" of the same name with version "^3.5.1"
$ nps webpack.server.ssr.start
nps is executing `webpack.server.ssr.start` : nodemon ./server.js
[nodemon] 1.17.3
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node ./server.js`
Wed, 04 Apr 2018 10:56:00 GMT koa deprecated Support for generators will be removed in v3. See the documentation for examples of how to convert old middleware https://github.com/koajs/koa/blob/master/docs/migration.md at server.js:13:5
Starting server....
Listening at http://localhost:8084/

  TypeError: Cannot read property 'reconfigure' of undefined
      at start (D:\v2 2017\rquast ssr forks\cavy-website-ssr\node_modules\aurelia-ssr-engine\dist\commonjs\aurelia-ssr-engine.js:53:20)
      at Object.render (D:\v2 2017\rquast ssr forks\cavy-website-ssr\node_modules\aurelia-ssr-engine\dist\commonjs\aurelia-ssr-engine.js:25:12)
      at D:\v2 2017\rquast ssr forks\cavy-website-ssr\node_modules\aurelia-middleware-koa\dist\commonjs\aurelia-middleware-koa.js:15:37
...
28

Looks like this line, maybe?

PLATFORM.jsdom.reconfigure({ url: requestUrl });

29

Maybe try it with npm instead of yarn, since there’s an npm lock file. May be an issue with a library or something. Works fine for me with npm.

30

I also run it with “npm start”

Rolands-MacBook:cavy-website rquast$ npm start

> cavy-website@0.1.0 start /Users/rquast/WebstormProjects/cavy-website
> nps

nps is executing `default` : nps webpack
nps is executing `webpack` : nps webpack.server
nps is executing `webpack.server` : webpack-dev-server -d --devtool '#source-map' --inline --env.server
Project is running at http://0.0.0.0:9005/
webpack output is served from /
Content not from webpack is served from /Users/rquast/WebstormProjects/cavy-website/dist
404s will fallback to /index.html
webpack: wait until bundle finished: /
Hash: e939bc41baf3f7e33111
Version: webpack 3.8.1
Time: 11395ms
                                                         Asset       Size  Chunks                    Chunk Names
                                static/website-integration.jpg     6.9 kB          [emitted]         
                          2de5da9a7f53a033b96798b9a67d1269.jpg     459 kB          [emitted]  [big]  
                          b1b9214762898023e1f4990e4e5533c7.jpg     392 kB          [emitted]  [big] 
(snip)
 Child html-webpack-plugin for "index.html":
     1 asset
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./index.ejs 1.97 kB {0} [built]
       [1] ./node_modules/lodash/lodash.js 540 kB {0} [built]
       [2] (webpack)/buildin/global.js 488 bytes {0} [built]
       [3] (webpack)/buildin/module.js 495 bytes {0} [built]
webpack: Compiled successfully.
31

Here are my versions just in case too…

Rolands-MacBook:cavy-website rquast$ npm -v
5.8.0
Rolands-MacBook:cavy-website rquast$ node -v
v9.8.0
Rolands-MacBook:cavy-website rquast$ au -v
0.32.0

32

Wow! That’s the first time I’ve seen a project not run at all because of using yarn vs. npm! I did have to add ssr-engine to the dependencies, but I got it building and running now. Thank you.

33

Hi @rquast!

Thanks for your response. I’m in a bit of a bind and this has become my number 1 priority behind my other 100 priorities. I recently launch iSoPro which in short is a web app for independent software professionals https://isopro.solutions/about. I’ve got to get ssr working with the esnext webpack 1.1.2 skeleton. While this app is generating 0 revenue at this point I’m happy to donate funds if that would help create a nice “how to”. In the mean time I’m going to spend my time trying to get it figure out.

Again I appreciate your response and effort.
–Steve

34

Yeah I had strange problems with yarn a while back and went back to npm shrinkwrap, but they since added lock files, so npm isn’t too bad now.

35

@sboyd glad SSR works for you. It’s also behind on my priorities at the moment, but I want to see it done because I want to see Aurelia do well. Aurelia is close to perfect for me now with SSR, so I’ll be pushing those fixes once people give me some feedback on if they are okay or not.

36

@sboyd love your idea with iSoPro… hope that does really well! Better idea than linkedin for finding contract work.

37

@rquast I haven’t gotten it working just yet. I was hoping that there was already some good documentation out there on how to add it to the skeleton I started with, and thanks for the iSoPro support. Feel free to refer any contractors you may know to it. I’m hoping to build a really solid community of independents.

1 Like
38

@rquast - Using your ssr-transformer.js as a base, how might one go about injecting the tags via the viewmodel instead of via the router?

i.e., something like this:

import {inject} from 'aurelia-framework';
import SsrTransformer from './ssr-transformer';

@inject(SsrTransformer)
export class AboutPageViewModel {  

  constructor(transformer) {
    this.transformer = transformer;
  }

  attached() {
    var meta = {
      page: {
        description: 'Helpdesk And Support Platform - Fast, Cheap, Easy',
        keywords: 'support platform, helpdesk, help desk, live chat, CRM, customer management'
      },
      opengraph: {
        'og:type': 'article',
        'og:image': 'https://getcavy.com/static/opengraph/default.jpg',
        'og:image:height': 422,
        'og:image:width': 806,
        'og:title': 'Cavy Online Support Platform',
        'og:site_name': 'Cavy',
        'og:description': 'Helpdesk And Support Platform - Fast, Cheap, Easy',
        'og:url': 'https://getcavy.com'
      }
    };
    this.transformer.appendElements(meta);
  }
}
1 Like
39

Hi rquast
any news regarding implementation of SSR in aurelia CLI ( it will be assume if so, think it will bring aurelia to easy implementation of SSR to accomodate SEO demands other then Google
(and unfortunately some important crawler engines do not support JS FW driven sites ! )

thanks

1 Like
40

@rquast Your changes are fantastic. You should add those into a PR if you haven’t already because I think they offer considerable value to the SSR functionality.

2 Likes
41

I used the efforts (thank you for that :)) of @rquast and wrote some quick and dirty script for generating static site assets. It is not a complete skeleton yet, but might be worth sharing https://github.com/wzrdtales/aurelia-static-site-generator.

2 Likes