Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ssr): adds SSR support #237

Merged
merged 9 commits into from
Jun 28, 2022
Merged

feat(ssr): adds SSR support #237

merged 9 commits into from
Jun 28, 2022

Conversation

pavankjadda
Copy link
Collaborator

@pavankjadda pavankjadda commented Jun 8, 2022

This PR creates new project ngx-cookie-service-ssr that adds support for SSR. So far 1 beta version and one rc version released with this PR changes and that can be seen here: https://www.npmjs.com/package/ngx-cookie-service-ssr

Here is the summary of the approach

  • When express server loads web page, it does have cookies in request object, but since our cookie service depends on document object we can't access them
  • To fix this, first we need to provide REQUEST in providers. We can achieve this by modifying server.ts file
...............

  server.get('*', (req, res) => {
    res.render(indexHtml, {
      req, providers: [
        {provide: APP_BASE_HREF, useValue: req.baseUrl},
        {provide: 'REQUEST', useValue: (req)},
        {provide: 'RESPONSE', useValue: (res)}]
    });
  });
  return server;
};

...............
  • Then we need to inject REQUEST object in cookie service, which helps us to get cookies on server side through REQUEST
import {REQUEST} from '@nguniversal/express-engine/tokens';

@Injectable()
export class CookieService {
constructor(@Optional() @Inject(REQUEST) private request: Request) {
  }

  • Then we need provide this in AppServerModule
@NgModule({
  imports: [
    AppModule,
    ServerModule,
  ],
  bootstrap: [AppComponent],
  providers: [CookieService]
})
export class AppServerModule {
}

  • Finally, if the platform is server, we can get the cookies in the following way, otherwise we can use existing method
const result: RegExpExecArray = regExp.exec(this.isServer ? this.request?.headers.get('cookie') : this.document.cookie);

Closes #225. Sample project can be found here https://github.com/pavankjadda/angular-ssr-docker

@pavankjadda pavankjadda added the ssr label Jun 8, 2022
@pavankjadda pavankjadda self-assigned this Jun 8, 2022
@github-actions
Copy link

github-actions bot commented Jun 8, 2022

Hello 👋 @pavankjadda
Thank you for raising your pull request. Please make sure you have followed our contributing guidelines. We will review it as soon as possible.

* @since: 1.0.0
*/
static getCookieRegExp(name: string): RegExp {
const escapedName: string = name.replace(/([\[\]\{\}\(\)\|\=\;\+\?\,\.\*\^\$])/gi, '\\$1');

Check failure

Code scanning / CodeQL

Incomplete string escaping or encoding

This does not escape backslash characters in the input.
# Conflicts:
#	package-lock.json
#	package.json
@pavankjadda pavankjadda marked this pull request as ready for review June 27, 2022 04:36
@pavankjadda pavankjadda force-pushed the add-ssr branch 2 times, most recently from a0ea87b to ed2fc11 Compare June 27, 2022 04:40
@pavankjadda
Copy link
Collaborator Author

I released one beta version and one rc version for this project and it's present in https://www.npmjs.com/package/ngx-cookie-service-ssr

@@ -1,3 +1,14 @@
# 14.0.0
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice!

@Injectable({
providedIn: 'root',
})
export class SsrCookieService {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

so basically instead of all conditional dependencies - you duplicate the service?

maybe not such a bad idea - to make it explicit

Copy link
Collaborator Author

@pavankjadda pavankjadda Jun 27, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah. The other open I see is create a utility class/function that has common functionality and make both client/ssr cookie service use it. What do think about that?

My suggestion is we use this as it for now and think about optimization later.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, I think that's a really good idea, instead of over-engineering, simple solution that just works!

@pavankjadda
Copy link
Collaborator Author

@stevermeister I think we can merge this and release first SSR version. Based on user feed back, if needed we can change it. Thoughts?

@stevermeister
Copy link
Owner

👍

@sonarcloud
Copy link

sonarcloud bot commented Jun 28, 2022

Kudos, SonarCloud Quality Gate passed!    Quality Gate passed

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 2 Code Smells

No Coverage information No Coverage information
2.5% 2.5% Duplication

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

ETA On SSR
2 participants