angular-app
angular-app copied to clipboard
ganatan
No content for crawlers
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.
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.
@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 ?
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: ssrnpm run serve: ssr - Close the browser. Reopen it on an incognito mode and open the following URL:
view-source:http://localhost:4000
@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 ?
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;
}
}
}
@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.
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'
}
}
],
};
@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.
@borjapazr I agree with you it was a test file for dev and prod your case is simpler
@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 ?
@AndriusdevLa Exact it was an example the name of the repo is not important
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 ?