I have an Angular 7 site, that works fine without server-side rendering (SSR). I host it using Google's Firebase hosting. I now want to setup SSR. I followed this guide and got it to build and deploy to Firebase Hosting and Functions.
However, the site does not load and the Functions logs include this entry:
ERROR ReferenceError: document is not defined
at new CssKeyframesDriver (/user_code/node_modules/#angular/animations/bundles/animations-browser.umd.js:4246:26)
at instantiateSupportedAnimationDriver (/user_code/node_modules/#angular/platform-browser/bundles/platform-browser-animations.umd.js:412:88)
at _callFactory (/user_code/node_modules/#angular/core/bundles/core.umd.js:19867:24)
at _createProviderInstance (/user_code/node_modules/#angular/core/bundles/core.umd.js:19825:30)
at resolveNgModuleDep (/user_code/node_modules/#angular/core/bundles/core.umd.js:19786:25)
at _createClass (/user_code/node_modules/#angular/core/bundles/core.umd.js:19854:72)
at _createProviderInstance (/user_code/node_modules/#angular/core/bundles/core.umd.js:19822:30)
at resolveNgModuleDep (/user_code/node_modules/#angular/core/bundles/core.umd.js:19786:25)
at _callFactory (/user_code/node_modules/#angular/core/bundles/core.umd.js:19873:71)
at _createProviderInstance (/user_code/node_modules/#angular/core/bundles/core.umd.js:19825:30)
Any ideas of what is wrong? I can provide code snippets or individual read access to the repo if requested.
Server side rendering probably means serving HTML from Node.js w Express.js. In the Firebase suite of products, this is accomplished using Cloud Functions for Firebase's HTTP triggers.
You can have a look at Firebase Samples on Github. This is a relatively advanced implementation so proceed as long as you are strong in JavaScript, HTML, and CSS (not to mention Angular).
Angular SSR is trying to run angular animations but it's not able to find any document variable(there is no document on server-side).
You can solve this by conditionally executing your code with the help of isPlatformBrowser and isPlatformServer.
example
Import this
import { Component, PLATFORM_ID } from '#angular/core';
import { isPlatformBrowser, isPlatformServer } from '#angular/common';
User like this
constructor(#Inject(PLATFORM_ID) platformId: string){
this.isBrowser = isPlatformBrowser(platformId);
this.isServer = isPlatformBrowser(platformId);
if(this.isBrowser){
//Do something on the browser
}
if(this.isServer){
//Do something on the server
}
}
Related
I have a website which I've built with CRA, node.js and I want to use ISR for most of the pages.
The problem is that about 20% of the users are registered users, which get their own content, and different header, which means I can only use SSR, and not ISR.
My thought is to use something like:
In my node.js server I would check if the user is logged
If he is not logged, I would send a get request to the next.js server, get the static html file and serve it.
If the user is logged I would just send him my CRA app.
Another option that I thought about is to use a proxy server with filter on the request which check if the session ID or cookie ID is set
Is it possible? Which option is better?
Shall I be able to use CDN to serve those static files?
Is there any better idea to solve this problem?
Just keep everything in the Nextjs application.
If you need static generated pages use getStaticProps and getStaticPaths or nothing (to have the same result as a CRA app) in that page.
If you need some server related logic use getServerSideProps in that page.
UPDATE
After run next build
The page test is a simple component
const Test = () => <div>test</div>;
export default Test;
In the other pages (/gpp, /gpp/[id]) getServerSideProps is defined
.....
const GppPage: NextPage = () => (
<>
<Head>
<title>GPP</title>
</Head>
<Box>
....
</Box>
</>
);
export async function getServerSideProps(context) {
return {
props: {
session: "mysession"
}
};
}
export default GppPage;
In the image the Test page is clearly a static page (look at symbols)
If you define in _app.tsx some getInitialProps or getServerSideProps in that case you will inherit the SSR behaviour
Instead of using next.js I ended up creating my own ISR for my website. This way I could use SSR for registered users and ISR for unregistered users. While using SSR in CRA app is not recommended by the create react app team, I found out that it is pretty simple with the help of this article for SSR, this article for SSR with react router. I used react 18 and react router 5.
While this solution worked for me, it is not guaranteed that it will work later so I won't recommend it until the create react app team will recommend it.
The pros of the solution:
More freedom with the code. For example, I could serve different pages for mobile and desktop (and still serve static pages).
Reduced costs compared to next.js
The cons of the solution
Unstable because the create react team doesn't recommend it
Missing out of some of the next.js features like images optimization
The html pages are not served from CDN (I used EBS)
I'm currently testing a React front-end application with TestCafe. Current environment is:
React: 16.3.2
Node: 8.10.0
TestCafe: 0.23.0
MacOS Mojave 10.14.1
We've written about 65 tests which all run great. We've introduced a Single Sign On component into our application which has posed some automation challenges. Instead of trying to drive TestCafe against our app AND this particular SSO provider, we're using a fake API call instead.
Simplified order of operations for the app during normal usage is:
React app starts, detects no SSO credentials
Environmental service provides app with a proper SSO URL, react app redirects user to SSO login page using window.location
User logs in and SSO redirects back to our react app with a an additional URL query param & respective value.
React app proceeds forward in a 'logged in' state
Pretty basic stuff.
When the React app is being tested, we just provide different URLs which point to a local ExpressJS instance on localhost:3002. When the React app performs a window.location to the fake SSO API (http://localhost:3002/fakeOAuth) the ExpressJS instance simply performs a response.redirect(http://localhost:3000/?sso=fakeCode) and now we are back to our React app with the additional synthetic SSO data. This scheme works great when not being driven by TestCafe.
When we drive the React app via TestCafe, TestCafe hangs when returning back from the fake SSO call to the React app. After this hang, we have to forcefully kill TestCafe on the command line with a ctrl-c.
Using chrome debug tools and looking at the console output, there is a message:
Uncaught TypeError: __get$ is not a function
at hotCreateRequire (bundle.js:73)
at bundle.js:719
at bundle.js:722
and a screenshot can be found at the end of this post below.
The Test code:
import { Selector } from 'testcafe'
fixture 'Landing Page Body Tests'
.page 'localhost:3000'
test ('Displays correct main welcome title', async t => {
const landingPage = Selector('.card-title')
await t
.expect((landingPage).innerText).eql('Welcome, Fakeuser', 'Incorrect Username Found')
})
Screenshot of TestCafe failure
Does anyone have any ideas as to why TestCafe crashes? I have reworked the test a few times, researched and experimented with using TestCafe's Roles and ClientFunction classes but to no avail. Any input would be greatly appreciated.
It looks like a bug in TestCafe. The __get$function is an internal TestCafe function, and the __get$ is not a function error means that TestCafe wasn't able to process your page properly and install its internal functions in the global window object.
I suggest that you create a new bug report in the TestCafe repository, and provide a HAR report and an example that can be used to reproduce the problem.
I am building a web application using Angular 5 and nodejs with express. As both the frontend and the backend are going to run in the same server I want to use my backend javascript functions in the frontend. The solutions that I have found didn't worked for me.
appController.js
var createApp = function (appData) {
console.log("App created")
}
exports.createApp = createApp;
This is the backend file that I want to use in the front.
Javascript files don't need to export things when used in the front-end. Most of the time, they use global variables. You should go with that.
To add it to your project, add it anywhere you want, and in your Typescript, you can simply use
declare var myGlobalVariable: any;
// ...
myGlobalVariable.createApp();
I did a similar thing. I have a frontend with Angular 5 and a backend serving an API via Express:
If you want to run your Angular frontend and your NodeJS backend on the same server you'll have to build your Angular project and serve the built files with your Express server.
I think I found a tutorial on that – but I can't find it right now...
Instead maybe have a look at my code for the backend:
https://github.com/saitho/ngHashi/blob/next/backend/src/index.ts
In production mode it will serve the files in the folder /backend/dist_frontend by default (apart from the backend routes (/api)). I use a build process (GitLab CI) to move the files I need to the respective place...
I finally find a solution. It would be necessary to modify the tsconfig.json:
tsconfig.json
{
compilerOptions: {
.....
allowJS: true,
......
}
}
I'm trying to build my app with React and Node (Isomorphic Rendering Architecture). I found on github example project but i have problem. I would like to develop my project client and server together, that the same Component can gets data/actions whataever from client nad server simultaneously. For example:
var Component = React.createClass({
render: function() {
return (
<div className="commentBox">
{this.props.client}
{this.props.server}
</div>
);
}
});
You can see that, Component gets props from client and server together. How i can do this?
I tryed 3 github projects but always i can't implement it. I dont know why. of course it's working when i render Component only by server or only by client but it's not working together.
For example when I render Component by server i can't make any actions specific for client (onclick alerting etc.) . So that's why it's important for me. Rendering some data from server and makes some client actions. But together, still on the same Component.
I'm sorry for my poor english!
Jan, it's impossible to do this using React.
They don't work "at the same time".
The server-side React code works by building the HTML page as a text-string, and serving the HTML text to the client.
After the browser loads the page, the React code in the browser will attach itself to the React code that was put on the page (because the server prints out IDs for all of the components, for the browser to attach to, after).
The goal, then, is to feed data to components, instead of expecting to have access to both the browser and the server at the same time.
That way, you can use server-side code to get data for the component, and you can use client-side code to get data for the component, and the component won't care.
This is not quite valid React, or the right way to do JS, in general but have a look:
class ServerElement {
render ( ) {
// sync calls should rarely ever (ideally never, other than booting up) be used
var articles = db.syncGetArticles();
return <Articles articles={ articles } />;
}
}
class BrowserElement {
render ( ) {
// isn't real, and should never be used even if it was
var articles = ajax.sync("GET", "/articles");
return <Articles articles={ articles } />;
}
}
The important part here is not the Server or Browser element (like I said, that's not really going to work), but rather that the <Articles /> element isn't expecting a server or a browser; it's expecting a list of articles.
The benefit of this approach, then, is that the server builds the HTML, but before the page is served, it's pre-filled with data, which will later be updated (replaced or added to) on the browser.
I hope that helps; if it doesn't, ask away, and I'll try to add to the answer.
#Norguard Thank you for your comprehensive answer. I am trying to own your answer. I know that your example code is not valid for React/JS cuz we have to build our db actions in models area. But one thing puzzles me. We are sending API with our '/articles' and gets data from this. OK, its cool, but this is still public data. I wonder about the private data. How to use React Isomorphic to get specific data or server if/else condition to build better app.
If we are using client-side templating language (like ejs) it's very easy. We are building our .html file and injection server methods(or whatever) to specific tags for templating language. How do to the same in React server? I can't imagines this using components and server.
I think that I understand idea you showed me but need time to efficiently build Isomorphic app using React.
I am a nodejs newbie and would like to understand the navigation flow when using nodejs to serve mobile applications.
Moible app
index.html
Show all users
Nodejs server snippit
var myData = {
"employees": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
};
res.send(myData);
Question: how do I display this data on another page (users.html)? I've worked with nodejs where I can just render to a specific path and it picks the appropriate Jade file but not sure how to do it since the html / js files are on the phone and not the server.
If you know of an example application I can just look through that code and figure it out.
Thanks for your help.
First of all you need to understand that your node.js is executed on server side, and all it can do - response on requests and do some logic, that stays on the server.
Then there is .html and .js that is sent to your clients (browser), and it is rendered and executed on client-side. This execution and logic is very different, and is focused to provide user interactions and render all sorts of data.
So all you need is be able to 'ask' server for data (request) and then get response, validate it in browser, if it is valid, you can render it using JS.
In order to make your life easier, consider using jQuery.
AJAX - to make requests to server and get response with data.
express.js - web framework for node, helps with routes.
And just generally - go and try things, experiment and it is better to understand whole picture or specific details frist, before you making any decisions.