No content for crawlers

Twois commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

Oh, you are right :) Thanks!

AndriusdevLa commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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

AndriusdevLa commented 4 years ago

@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 commented 4 years ago

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

AndriusdevLa commented 4 years ago

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 commented 4 years ago

on windows : Winscp on linux : vim

jgab97 commented 2 months ago

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

ganatan / angular-app

No content for crawlers #1