Giter VIP home page Giter VIP logo

Comments (15)

Twois avatar Twois commented on May 25, 2024 1

Oh, you are right :) Thanks!

from angular-app.

borjapazr avatar borjapazr commented on May 25, 2024

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.

from angular-app.

AndriusdevLa avatar AndriusdevLa commented on May 25, 2024

@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 ?

from angular-app.

borjapazr avatar borjapazr commented on May 25, 2024

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.

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

from angular-app.

AndriusdevLa avatar AndriusdevLa commented on May 25, 2024

@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 ?

from angular-app.

ganatan avatar ganatan commented on May 25, 2024

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;
        }       

    }
}

from angular-app.

AndriusdevLa avatar AndriusdevLa commented on May 25, 2024

@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.

from angular-app.

ganatan avatar ganatan commented on May 25, 2024

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'
      }
    }
  ],
};

from angular-app.

borjapazr avatar borjapazr commented on May 25, 2024

@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.

from angular-app.

ganatan avatar ganatan commented on May 25, 2024

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

from angular-app.

AndriusdevLa avatar AndriusdevLa commented on May 25, 2024

@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 ?

from angular-app.

ganatan avatar ganatan commented on May 25, 2024

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

from angular-app.

AndriusdevLa avatar AndriusdevLa commented on May 25, 2024

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 ?

from angular-app.

ganatan avatar ganatan commented on May 25, 2024

on windows : Winscp
on linux : vim

from angular-app.

Related Issues (14)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.