Lanka Developers Community

    Lanka Developers

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Shop

    පහසුන්වෙන්ම ඔබෙ Angular Application එක නොමිලෙ Netlify server එකෙ deploy කර ගමු. (Simple English)

    Front-End Development
    angular frontend deploy netlify web
    5
    6
    851
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Udith Indrakantha
      Udith Indrakantha Web Development last edited by

      alt text
      This article is all about how you can deploy your Angular application securely on Netlify server . This is a free place for you to deploy your application.

      First you need to have a Netlify Accout (Create if not) and a GitHub repo of your project.
      ( I assume that you already have a github repo of your Angular project.)
      I teach you the way with a sample project I created just for fun.

      Let’s begin

      Configuring Netlify

      1. First go to your Netlify account. There you can see a button “New site from Git” (Fig 1.1). Click on it.

      0_1573148079548_0608d448-a21c-4063-9249-efabdf7b6631-image.png
      Fig 1.1

      2. Then select the repository site. I here select GitHub.(You can select the site where your project is.)
      When selected, you are redirected to authorize the access from netlify and there you can select the repository that you need to deploy.

      3. Select the repository again and go to step 3. (Fig 1.2)
      alt text
      Fig 1.2

      Here in this page, you have to fill some information. (you can change these later too)

      You can specify which branch needs to be deployed.
      For Build Command , give ng build — prod
      For Publish directory , give dist/<your project name>
      (You can find your correct project name at the end of angular.json file of your project. Ex: dist/my-blogger-web as in Fig(1.3))

      alt text
      Fig 1.3

      If all set. Click the button “Deploy site”. You will be directed to something like this in Fig 1.4.

      alt text
      Fig 1.4

      4. Next, go to Settings tab and copy the API ID and save it somewhere because we are gonna need it later. (Fig 1.5)
      [Here, you can change your site name also.]

      alt text
      Fig 1.5

      5. We need to find a Personal Access Token key .
      Click on Avatar picture of your profile on right top corner, select User settings,
      Select Applications from the menu,
      Under Personal access tokens, click New access token button .
      (Fig 1.6, Fig 1.7)

      alt text
      Fig 1.6
      alt text
      Fig 1.7

      Give a simple description for the token so that you can identify why this token is used, when you check tokens sometimes later.

      Click the button to Generate a token. Copy and paste that token somewhere to use it later. Then click Done! at last.

      Configuration in Angular project

      6. Open the command window inside your Angular project’s root folder.

      and run this command
      ng add @netlify-builder/deploy

      **There you are asked to enter API ID: you can enter it from where you copied and saved it earlier.
      ** You are asked next to enter personal Acccess token which you generated earlier . Please, do not enter it here.Just press enter and skip it.( Because these details are entered in your angular.json file which can be tracked in your github repo easily so that outsider can use your API ID and access token to get access to your site. see Fig 1.8 )

      alt text
      Fig 1.8

      7. Next you have to set up the access token key as an environment variable of your computer.

      Right click on This PC icon on desktop of you computer ==> Properties ==> Advanced system settings ==> Advanced tab ==>Environment Variables ==> User Variables

      Under User variables , you have to enter a new variable, Variable Name as NETLIFY_TOKEN and Variable value as the access token key generated earlier and saved for later use by you. see Fig 1.9

      alt text
      Fig 1.9

      9. Next you have to run
      ng run <your project name>:deploy

      Plz, give your project name when running the above command.(See ,no space when typing the colon : )
      Ex: ng run my-blogger-web:deploy

      [For Angular vCLI 8.3.0 and above, just run ng deploy instead]

      This creates a folder dist/<Your project name> which you gave as the Publish directory for netlify site.

      10. Next part is, open your .gitignore file of your project and delete the line with /dist to track dist folder to be pushed to gitHub.

      At last commit and push.

      Here you go, go to your netlify site, and Click Trigger Deploy button to deploy. You can change ‘deploy settings’ there if you want.

      alt text

      All done!

      Your site is available at https://<your site name>.netlify.com

      ex: https://udithdemo.netlify.com

      Thank you.

      1 Reply Last reply Reply Quote 3
      • root
        root Linux Help last edited by root

        awesome bro, nelify is a great option for serverless technology, please do a article for heroku, that is all also free

        https://heroku.com

        Udith Indrakantha 1 Reply Last reply Reply Quote 2
        • Udith Indrakantha
          Udith Indrakantha Web Development @root last edited by

          @root Thanks bro. I'll upload the article on hosting on heroku soon. I just selected Netlify as first one because I just like that word "Netlify" more than "heroku". By the way, if you find any mistakes in my article, plz don't hesitate to let me know.

          1 Reply Last reply Reply Quote 2
          • Nubelle
            Nubelle Web Development last edited by

            patta broo

            1 Reply Last reply Reply Quote 0
            • dev_lak
              dev_lak last edited by

              awesome bro...

              1 Reply Last reply Reply Quote 0
              • ciaompe
                ciaompe last edited by

                Keep it up, good luck

                1 Reply Last reply Reply Quote 1
                • 1 / 1
                • First post
                  Last post

                4
                Online

                3.6k
                Users

                1.3k
                Topics

                5.3k
                Posts

                • Privacy
                • Terms & Conditions
                • Donate

                © Copyrights and All right reserved Lanka Developers Community

                Powered by Axis Technologies (PVT) Ltd

                Made with in Sri Lanka

                | |