No content for crawlers #1

Twois · 2020-01-08T19:57:35Z

I checked the source view of the live demo page and there is no content there.

The crawlers only see what you can get from the source.

borjapazr · 2020-01-08T20:55:35Z

When you inspect and see the source code once the page is loaded you will see the index.html without rendering. This is because the service worker has already saved a copy of the page.

To see the html rendered on the server you should open a tab in incognito mode and put in the browser bar view-source:http://localhost:<port-number>. Another option is use curl in a terminal and see the generated html code.

Twois · 2020-01-08T21:00:23Z

Oh, you are right :) Thanks!

AndriusdevLa · 2020-03-24T11:51:40Z

@borjapazr When i run npm run serve:ssr your app in incognito mode , i see this :

  | <!doctype html>
-- | --
  | <html lang="en">
  |  
  | <head>
  | <meta charset="utf-8">
  | <title>AngularStarter</title>
  | <base href="/">
  | <meta name="viewport" content="width=device-width, initial-scale=1">
  | <link rel="icon" type="image/x-icon" href="favicon.ico">
  | <link rel="manifest" href="manifest.webmanifest">
  | <meta name="theme-color" content="#1976d2">
  |  
  | <!-- Global site tag (gtag.js) - Google Analytics -->
  | <script async src="https://www.googletagmanager.com/gtag/js?id=UA-135732895-3"></script>
  | <script>
  | window.dataLayer = window.dataLayer \|\| [];
  | function gtag() { dataLayer.push(arguments); }
  | gtag('js', new Date());
  |  
  | gtag('config', 'YOUR ID');
  | </script>
  |  
  | <link rel="stylesheet" href="styles.95b34f643b4ebf614228.css"></head>
  |  
  | <body>
  | <app-root></app-root>
  | <noscript>Please enable JavaScript to continue using this application.</noscript>
  | <script src="runtime-es2015.b43477a3f5c1c029f6f0.js" type="module"></script><script src="runtime-es5.b43477a3f5c1c029f6f0.js" nomodule defer></script><script src="polyfills-es5.c9441936740fb4c2d32d.js" nomodule defer></script><script src="polyfills-es2015.495a14908bd0a2dc5248.js" type="module"></script><script src="scripts.c253176e2eb816995a1b.js" defer></script><script src="main-es2015.763bebb4342fa7df3551.js" type="module"></script><script src="main-es5.763bebb4342fa7df3551.js" nomodule defer></script></body>
  |  
  | </html>

But when i run npm run dev:ssr :

Everything seems nice, there is all page content in page source

Also when i run your demo app in incognito i dont see any content in page source.
Any updates on this ?

borjapazr · 2020-03-24T13:26:56Z

First of all, this is not a project of mine :) It's a great job that @ganatan did.

I have just tested the application as you say, and it works correctly for me.

Try doing the following.

Launch
npm run build: ssr
npm run serve: ssr
Close the browser. Reopen it on an incognito mode and open the following URL:
view-source:http://localhost:4000

AndriusdevLa · 2020-03-24T15:27:35Z

@borjapazr Yes sorry, i saw it , you only see it if its the first page view-source:http://localhost:4000/ and not localhost:4000 -> view-source:http://localhost:4000/.

Another thing I would love to ask You is about deploying to heroku :

I am trying to deploy this app to heroku, but getting error :

Procfile :
web: node server.ts

Package.json :
These both happens before procfile command

 "postinstall": "npm run build:ssr", <-- second
 "preinstall": "npm install -g @angular/cli @angular/compiler-cli typescript", <!-- first

Deply is successfull but when I go to the website i see "

An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details. You can do this from the Heroku CLI with the command
heroku logs --tail

"

So i write heroku logs --tail and see this error :

2020-03-24T15:26:52.643062+00:00 app[web.1]: /app/server.ts:1
2020-03-24T15:26:52.643076+00:00 app[web.1]: (function (exports, require, module, __filename, __dirname) { import 'zone.js/dist/zone-node';
2020-03-24T15:26:52.643076+00:00 app[web.1]: ^^^^^^^^^^^^^^^^^^^^^^^^
2020-03-24T15:26:52.643077+00:00 app[web.1]:
2020-03-24T15:26:52.643077+00:00 app[web.1]: SyntaxError: Unexpected string

How to fix this ?

ganatan · 2020-03-24T16:47:31Z

Hi Andrius,

I do not know the deployment with heroku.
But if it can help you.
For the live demo angular.ganatan.com I use the simplest deployment.
A vps with nginx and node.js

the nginx.conf is

user nobody nogroup;
worker_processes auto;

events {
    worker_connections 1024;
}

http {

    gzip on;
    gzip_http_version 1.1;
    gzip_comp_level 5;
    gzip_min_length 256;
    gzip_proxied any;
    gzip_vary on;
    gzip_types
    application/atom+xml
    application/javascript
    application/json
    application/rss+xml
    application/vnd.ms-fontobject
    application/x-font-ttf
    application/x-web-app-manifest+json
    application/xhtml+xml
    application/xml
    font/opentype
    image/svg+xml
    image/x-icon
    text/css
    text/plain
    text/x-component;

    sendfile on;

    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    server {
        listen 80 default_server;
        listen [::]:80 default_server;

        server_name _;

        location / {
            proxy_pass http://127.0.0.1:4000;
        }       

    }
}

AndriusdevLa · 2020-03-24T17:12:53Z

@ganatan Hey , great repo! I never deployed with nginx , I can't find where are this file in your repo ? Would like to see more and try to copy step by step.

ganatan · 2020-03-24T17:59:41Z

Hi,

I give you all the steps

Take a VPS(Virtual private Server : for example with OVH or digital ocean)
We will use an ip address example 192.168.100.1
Select ubuntu or Debian
Update the os
sudo apt-get update && sudo apt-get upgrade -y
Install nginx
sudo apt-get --yes install nginx
sudo apt-get update
Verify nginx
http://192.168.100.1/
Install node.js
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt-get install -y nodejs
create a directory
/home/services/frontend
clone the project and compile
git clone https://github.com/ganatan/angular9-app.git
npm run build:ssr
Copy your dist on the server
copy all dist into /home/services/frontend
Copy the nginx.conf into /etc/nginx
nginx.conf below
Restart nginx
sudo service nginx restart
Execute your app in the directory /home/services/frontend
node dist/angular-starter/server/main.js
Verify
http://192.168.100.1/

user nobody nogroup;
worker_processes auto;

events {
    worker_connections 1024;
}

http {

    gzip on;
    gzip_http_version 1.1;
    gzip_comp_level 5;
    gzip_min_length 256;
    gzip_proxied any;
    gzip_vary on;
    gzip_types
    application/atom+xml
    application/javascript
    application/json
    application/rss+xml
    application/vnd.ms-fontobject
    application/x-font-ttf
    application/x-web-app-manifest+json
    application/xhtml+xml
    application/xml
    font/opentype
    image/svg+xml
    image/x-icon
    text/css
    text/plain
    text/x-component;

    sendfile on;

    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    server {
        listen 80 default_server;
        listen [::]:80 default_server;

        server_name _;

        location / {
            proxy_pass http://127.0.0.1:4000;
        }       

    }
}

You can improve with pm2 (a process manager)

Install pm2
sudo npm install -g pm2
create a file : process.config.js (below)
in the /home/services/frontend
execute the script
pm2 start process.config.js --env prod

Tell me if it works
and if you like you star

module.exports = {
  apps : [
    {
      name      : 'frontend',
      script    : 'dist/angular-starter/server/main.js',
      env: {
        COMMON_VARIABLE: 'true'
      },
      env_dev : {
        NODE_ENV: 'dev'
      },
      env_prod : {
        NODE_ENV: 'prod'
      }
    }
  ],
};

borjapazr · 2020-03-24T18:38:21Z

@ganatan, one question. Why do you need the process.config.js file to start the app with pm2? There is only one version of the final build, so NODE_ENV: 'dev' and NODE_ENV: 'prod' aren't necessary, aren't?

You could start the app with pm2 simply with:
pm2 start dist/angular-starter/server/main.js --name frontend

Correct me if I am wrong or if you use it this way due to some reason.

ganatan · 2020-03-24T19:54:14Z

@borjapazr
I agree with you it was a test file for dev and prod
your case is simpler

AndriusdevLa · 2020-03-25T09:02:18Z

@ganatan why i have to create directoryt home/services/frontend and copy dist there ?

Cant i just create repo in var/www/myrepo/dist and leave it there ?

ganatan · 2020-03-25T10:25:36Z

@AndriusdevLa
Exact it was an example the name of the repo is not important

AndriusdevLa · 2020-03-25T11:13:20Z

I am stuck at this step :

Copy the nginx.conf into /etc/nginx
nginx.conf below

How to edit a file properly ?

And later how to run main.js always not only when node command is running ?

ganatan · 2020-03-25T16:16:04Z

on windows : Winscp
on linux : vim

jgab97 · 2024-05-08T15:17:40Z

Hello . I want to know how to deploy with firebase the configuration please thank you

Twois changed the title ~~No content for cawlers~~ No content for crawlers Jan 8, 2020

ganatan mentioned this issue Apr 8, 2020

I can't get the SSR project live #2

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

No content for crawlers #1

No content for crawlers #1

Twois commented Jan 8, 2020 •

edited

Loading

borjapazr commented Jan 8, 2020 •

edited

Loading

Twois commented Jan 8, 2020

AndriusdevLa commented Mar 24, 2020 •

edited

Loading

borjapazr commented Mar 24, 2020

AndriusdevLa commented Mar 24, 2020 •

edited

Loading

ganatan commented Mar 24, 2020

AndriusdevLa commented Mar 24, 2020

ganatan commented Mar 24, 2020

borjapazr commented Mar 24, 2020

ganatan commented Mar 24, 2020

AndriusdevLa commented Mar 25, 2020

ganatan commented Mar 25, 2020

AndriusdevLa commented Mar 25, 2020

ganatan commented Mar 25, 2020

jgab97 commented May 8, 2024

No content for crawlers #1

No content for crawlers #1

Comments

Twois commented Jan 8, 2020 • edited Loading

borjapazr commented Jan 8, 2020 • edited Loading

Twois commented Jan 8, 2020

AndriusdevLa commented Mar 24, 2020 • edited Loading

borjapazr commented Mar 24, 2020

AndriusdevLa commented Mar 24, 2020 • edited Loading

ganatan commented Mar 24, 2020

AndriusdevLa commented Mar 24, 2020

ganatan commented Mar 24, 2020

borjapazr commented Mar 24, 2020

ganatan commented Mar 24, 2020

AndriusdevLa commented Mar 25, 2020

ganatan commented Mar 25, 2020

AndriusdevLa commented Mar 25, 2020

ganatan commented Mar 25, 2020

jgab97 commented May 8, 2024

Twois commented Jan 8, 2020 •

edited

Loading

borjapazr commented Jan 8, 2020 •

edited

Loading

AndriusdevLa commented Mar 24, 2020 •

edited

Loading

AndriusdevLa commented Mar 24, 2020 •

edited

Loading