switchon@lavalamp.biz
+27(0) 83 419 4851 / +27(0) 21 036 1165
Application & software development
Get A Quote

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact
    javascript basics
    JavaScript Basics
    Feb 22, 2021
    testing practices for developers
    Testing Practices For Developers
    Mar 29, 2021

    Deploy Static Frontend Sites Instantly And For Free With Firebase

    Categories
    • Software Development
    Tags
    • angular
    • angular application
    • apache
    • code
    • command prompt
    • database
    • firebase
    • firebase cli
    • frontend
    • frontend development
    • nginx
    • node js
    • web server
    • website code
    deploy static frontend sites instantly and for free with firebase
    deploy static frontend sites instantly and for free with firebase

    Intro:


    Okay so you have built your website and now you wandering how to deploy this, you did some research and you most likely came across a thousand different solutions, a lot of them costing money or require experience in spinning up servers and configuring apache or nginx or some sort of complicated web server to run and interpret your website code.

    Well thats where firebase comes in handy, you can simply host and deploy your static frontend website without to much hassle and it won't even cost you a cent depending on your usability of course, but even so firebase is very affordable and if you do go over your limit it won't break the bank.

    so to get started you first require 'node.js' installed in your machine, if you haven't already please head over to their official documents and install it locally on your machine.

    Node.js Offical Install documentations

    Okay great, you have node install, but to actually get started you simply need to install Firebase CLI

    npm install -g firebase-tools

    This snippet you can paste directly in your terminal(Macosx/Linux) or Command Prompt(Windows).

    This will install the firebase cli globally for you and you will be able to use the CLI in any directory of your choosing.

    We will be using an Angular Application as an example but the following will really apply to most if not all static website code, essentially you just want to build your project to a distribution and deploy that bundle.

    To start the deployment process we first need to login with our firebase account, if you don't have one then go to firebase and make an account.

    if you do have an account then enter this in your terminal.
    $ firebase login

    after logging in successfully you can navigate to the root of your project directory by using CD

    once you are there then you will need to first bundle your application with

    $npm run build --prod

    if you aren't building a single page application then you can skip that step entirely and just continue on.

    follow that step with the following

    $ firebase init
    this will actually start the hosting process, follow the steps like so:

    Firebase CLI features…: Hosting.

    Database rules file: You can keep that default file name that they provide, or change it if you prefer. This file will be created and will contain the database rules for your app.

    Public directory: Type in dist, because this is where your production-ready Angular app assets are.

    Configure as single-page app: Most of the time you’ll say yes (y) for this one.

    Overwrite index.html: No.

    after those steps you can simply enter

    $firebase deploy

    and that will deploy your bundle static application files located in your dist folder.

    every time you make a change you can just re-enter $firebase deploy to re-deploy



    Conclusion:


    Firebase is really simple to get started and to use, and once you do it once or twice you won't ever want to use anything else.

    that being said it doesn't of course support your backend server, however Firebase does have cloud actions that you can setup that can replace the basic functionality of a backend setup.

    if you do want to host for example a Node.js or PHP server I would recommend using a service such as Heroku, which is just as simple as firebase but slightly more flexible on what stack you choose to use for your project, however the free tier of heroku can quickly run out if you plan on building a project that is expecting a bit of traffic like a blog application.

    Contact us


      Related posts:

      how to deploy your app/website on herokuHow To Deploy Your App/Website On Heroku laravel envoyer and forgeProvisioning A New Digital Ocean Server With Laravel Forge, And Deploying Code With Laravel Envoyer how to send a tweet from within your angular app via node jsHow To Send A Tweet From Within Your Angular App Via Node Js how to setup git-ftp for windowsHow To Setup Git-ftp For Windows
      Share
      86
      Mitchell Yuen
      Mitchell Yuen

      Leave a Reply Cancel reply

      Your email address will not be published. Required fields are marked *

      Lava Lamp Lab


      Like technology, a lava lamp constantly changes form, producing new conditions with every passing moment



      lava lamp lab facebook   lava lamp lab twitter   lava lamp lab linkedin   lava lamp lab instgram

      Services


      Application & software development

      Outsourced software development

      Project based resourcing

      Digital marketing & consulting

      Graphic design & consulting

      UI / UX design & consulting

      Contact Us


      +27(0) 83 419 4851

      +27(0) 21 036 1165


      switchon@lavalamp.biz


      Unit 4 Monaco Square,
      14 Church Street,
      Durbanville,
      Cape Town, 7550

      NBConsult Group


      nbconsult
      nbconnect msp
      nbclearning
      river broadband
      designer needed
      © 2023 Lava Lamp Lab (Pty) Ltd | All Rights Reserved | Privacy Policy
      Contact us now

        Application & software development

          Outsourced software development

            Project based resourcing

              Digital marketing & consulting

                Graphic design & consulting

                  UI/UX design & consulting

                    Lease an expert

                      Recruitment services

                        We are using cookies to give you the best experience on our website.

                        You can find out more about which cookies we are using or switch them off in settings.

                        Lava Lamp Lab
                        Powered by  GDPR Cookie Compliance
                        Privacy Overview

                        This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

                        Strictly Necessary Cookies

                        Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.

                        If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

                        3rd Party Cookies

                        This website uses Google Analytics to collect anonymous information such as the number of visitors to the site, and the most popular pages.

                        Keeping this cookie enabled helps us to improve our website.

                        Please enable Strictly Necessary Cookies first so that we can save your preferences!

                        Cookie Policy

                        More information about our Cookie Policy