Covalent: Feature request for Server Side Rendering

Created on 11 Mar 2017  ·  19Comments  ·  Source: Teradata/covalent

Do you want to request a feature or report a bug?

Feature

Feature Request

Make Server Side Rendering

I haven't found any server side rendering feature request or issue on this repo, that is why I am making a new feature request.

I am using your covalent for web app development, everything is going well. in next few week I am gonna deploy it on DEV server (alpha/beta release)

I have done AOT and its working fine but looking forward make server side rendering and SEO kind of problem.

What is the expected behavior?

it should render angular 2 code for search engine bot.

What is the motivation / use case for changing the behavior?

After developing application final stage is that make it available for people, and for that, you need to do some marketing. SEO is a most important thing of digital marketing. so I think server-side rendering will help to solve this problem.

I am working with full-time Node.js backend developer, side by side learning angular 2. I have show lot of people want to make blog and eCommerce website using angular 2. the main thing is / the last problem is that SEO, server side rendering which is more important in eCommerce and blog like web app/website.

I think covalent team is doing a very good job to keep in sync with angular 2 and material 2. you guys are doing an awesome job. I think you need to look at server side rendering at the same time.

Thank you for your time to read this long boring explanation, I am very bad at explaining.

Most helpful comment

Yes, there is thought about full support for angular universal, but its still down the road since material doesnt even support it yet, and angular universal is still kind of immature.

Having said that, we try to limit the use of window or any access to DOM elements directly for this particular reason.

All 19 comments

I agree and support this idea because I want to use the covalent with asp.net core and it's SpaService feature.

In fact,a few progress has been made with my weeks of hard work but its'n susessful yet.

Yes, there is thought about full support for angular universal, but its still down the road since material doesnt even support it yet, and angular universal is still kind of immature.

Having said that, we try to limit the use of window or any access to DOM elements directly for this particular reason.

Of note is that Universal is now a part of @angular/platform-server and @angular/platform-browser so it's maturity should come quickly. The Material2 team is targeting full support for this version of universal for when angular 4.1.x is released according to https://github.com/angular/material2/issues/308#issuecomment-288843196

May I ask how it's going?

So the last place we use window is TdMediaService. If there is other places/component that break please let us know in this thread so we can start checking it out.

RerenceError: window is not defined
Using just
import { CovalentLayoutModule } from '@covalent/core';
imports: [

    CovalentLayoutModule,

Hmm, that seems odd since we never use window in CovalentLayoutModule.. unless its a problem with MdSideNavModule?

Does somebody have a quickstart with everything good and running for server side rendering? It would be helpful if we can test it ourselves.

That being said, we need to include in the pipeline this sort of testing

I try to learn Angular4 and try to use Material and Covalent. With JIT it works, but with AOT it crashes:

ReferenceError: window is not defined at ...@covalent/core/core.umd.js:7:21

var __decorate$1 = (window && window.__decorate) || function (decorators, target, key, desc) {

I followed that Informations at coursetro to precompile the code.

I dont't know how to fix this. I think I have to define window somewhere (a Noop would be nice), or something else. Absolutely duno WTH I should do. Maybe: rm -rf / && more beer :D

Im trying to set a CI pipeline to test server side rendering for covalent, since we dont support it fully.

The reason is because we dont have a way to test it yet.

This will be a major focus soon since we want to be able to render covalent components server side too.

[Quick Update] We have an open PR that will allow us to test server side rendering of Covalent components.

I dont know about covalent ui, but may be some of the material2 component
does not supports server side rendering. I have faced problem with material
2 while i was doing server side rendering. After that i have also check
angular.io angular 2 code but they have also doesn't use server side
rendering. I will check that covalent quick start example works with server
side rendering or not.

On 01-Aug-2017 3:54 AM, "Stoovm" notifications@github.com wrote:

[Quick Update] We have an open PR
https://github.com/Teradata/covalent/pull/794 that will allow us to
test server side rendering of Covalent components.


You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/Teradata/covalent/issues/419#issuecomment-319213871,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AEx2_TOUwAzfbThXweHLw8OUc-rS1vjsks5sTlQhgaJpZM4MaHAk
.

How about to use the angular-ssr in covalent to support it?

@ElderJames that might be an additional usage after we support it properly

Update on this, the initial script let us know that our build process was incorrect so we need to change it a bit to be more in line with how angular and angular material have it.

So steps to continue after the script is merged:

  • [ ] Update build process
  • [ ] Update modules so they can be rendered server side
  • [ ] Add the test script to CI pipeline

Any updates on this, we are in the process of upgrading our app to SSR and this is the only dependency blocking us, if you guys need some help transitioning to SSR let us know we are more than willing to contribute.

Yeah, we are in the midst of planning our RCs and SSE is one of the things to tackle.

If you notice anything that needs to be fixed, a PR would be more than welcomed. Trying to setup a CI test to find out this kind of issues.

So its reasonably safe to attempt an angular universal project with Teradata or?

We just merged a PR that changes our build format, so now we can start fixing any SSR issues you might encounter. Please let us know if you find some

Nice!
But how can I run it with SSR?

@ElderJames For covalent core you can install the covalent-nightly repo

Was this page helpful?
0 / 5 - 0 ratings

Related issues

mailok picture mailok  ·  3Comments

asaph26 picture asaph26  ·  3Comments

emoralesb05 picture emoralesb05  ·  4Comments

trkbrkr2000 picture trkbrkr2000  ·  5Comments

victorboissiere picture victorboissiere  ·  5Comments