Deploy static site to Firebase

Overview

Static websites made only with HTML and Javascript are a good option to have a presence on the internet. They are fast, safe and easy to maintain. And with the modern features of HTML, CSS and the many options available of javascript libraries and frameworks can be as rich of resources as the sites made using PHP, Rails, etc.

At the time this text was written Firebase offers the possibility to host static sites with up to 1 GB in size, 10GB of traffic/month using a custom domain and SSL certificate. All for free.

In this tutorial you will learn how to create an static site in Daspanel and deploy it to Firebase.

Quick Start

Login

Open the admin in your browser Sites module

Daspanel login

The admin user and your password are the ones you choose when creating your project as instructed here.

Create new site

Go to the Sites module

Daspanel sites

  1. Add new site clicking the + icone in the upper right of the Sites panel to see the page with the options for the new site:

Static new

  1. Write an description for your new site
  2. Choose 'Generic site' as Type
  3. And 'Static' as Engine
  4. Click on the button 'CREATE SITE'

Install initial content

After the site has been created, a screen will be displayed to upload any remote content that is in a ZIP file. For this howto we will use a website template that is in Github.

Static upload

  1. URL: To do the installation place this link https://github.com/BlackrockDigital/startbootstrap-creative/archive/gh-pages.zip in the URL field.
  2. Directory: Directory relative to the root where the content will be installed. Put /public here
  3. Click the "UPLOAD CONTENT" button.

Because the site has been created now and the ZIP file with the content is publicly accessible, you only have to enter the URL where to get the file.

Template used

The content of the site was created using one of the cool themes of Start Bootstrap. See the full list of their themes by clicking here. Most of them can be used for free.

Set root dir of the site

When the site was created its content is initially served from the directory of its default version.

That is, when you access, for example, https://wonderful-bartik.sites.daspanel.site/ the content displayed is being fetched from a directory like this content/cjb71wzv1000365o420pyc5np/v/cjb71wzxb000465o4u7cquskg.

However, in this tutorial we chose to put the site content in the /public subdirectory, which is a hint of the Firebase documentation.

Before viewing the site configure the root dir of it going to manage the available versions of a site go to the Sites module

Daspanel site versions

  1. Click the third bullet to display the version management area of the chosen site.

The site card will be changed to the version management area:

Daspanel site versions tab

  1. Click the MANAGE buttom to go the management page.

On the next page you will see a list of all the existing versions for the site:

Daspanel version

  1. Click the Edit button for the choosen site.

Daspanel version

  1. Set the directory relative to the top level directory where the site version exists. In this case it is /public.
  2. Click UPDATE VERSION to save changes.

View the new site

Go to the Sites module. You will see a page like this:

Static preview

  1. Click the PREVIEW button of the choosen site and a new window will open in your browser displaying the contents of the active version of the site.

Static content

Now just customize the site for your needs.

Install firebase-tools

The firebase-tools is a program that must be run through a console. To do this open the console of the site that was created:

Daspanel site

  1. Click the second bullet to display the toolbox management area of the chosen site.

The site card will be changed to the toolbox management area:

Daspanel site toolbox console

  1. Click on the console icon to access it.

If this is the first time you access the console in the current session of your browser, a screen like this will appear to log in:

Daspanel console login

  1. User Name: Is the console user.
  2. Password: Is the console user passord.
  3. Click the login in button.

Login credentials

You can easily obtain login credentials in the *** Console *** section of the Daspanel System->Services Users module using the link below:

admin.daspanel.site/system/services/users

After your browser has an authentication token with console access permission, the web page of the console will be displayed:

Daspanel console

Now run this command on the console:

npm install -g firebase-tools

NPM global install (-g)

Because the nature of the Docker npm packages installed globally through the console does not persist after a Docker reboot. If you want to install firebase-tools in the same directory where the site is so that it is permanently saved run the command like this:

npm install firebase-tools

However, in doing this the firebase command must be executed like this:

./node_modules/.bin/firebase login

Because normally globally installed packages are usually just line command tools, there is no problem in reinstalling them every time that Docker is rebooted. Just do not globally install the packages that are used by your site. Click here to understand better.

Set up your Firebase account

After the firebase-tools package has been installed iit's time to set up which Firebase account you want to use to deploy the site. Of course, if you still do not have an account on it, create one now on his site.

Run this command on the console:

firebase login --no-localhost

Important

Use the --no-localhost option because Google can not redirect authentication result to your localhost.

Answer the standard questions and when the validation URL appears:

Daspanel firebase login url

Copy the URL, open a new browser window, and enter the address in the navigation box.

After performing the authentication on Firebase a page like the one below will be displayed:

Daspanel firebase login key

Copy the authorization code, go back to the site console page and enter it there:

Daspanel firebase login auth

Press ENTER to finish the login setup.

Persistence of the login setup

Because the nature of the Docker the login setup of your account does not persist after a Docker reboot. You will need to repeat this step every time you reboot your Docker environment.

Initialize Firebase project for the site

Run this command on the console:

firebase init hosting
When the console is updated:

Daspanel firebase init service

  1. Select [create a new project]
  2. Press ENTER

When the console is updated:

Daspanel firebase init service2

  1. Confirm that the site content is in the public subdirectory.
  2. Choose that the site is not single-page.
  3. IMPORTANT: Do not overwrite the index.html file.
  4. Press ENTER to confirm

Next, create a project in Firebase to host the site. Open a new browser window with this address Firebase Console:

Daspanel firebase init service3

Go back to the site console and run the following command:

firebase use --add

When the console is updated:

Daspanel firebase init service4

  1. Choose that the project you created in the Firebase console.
  2. Press ENTER to confirm

When the console is updated:

Daspanel firebase init service5

  1. Choose an alias. Just type production here.
  2. Press ENTER to confirm

Deploy site to Firebase

To publish to Firebase go to the site console and execute this command:

firebase deploy

When the console is updated:

Daspanel firebase init service6

Copy the Hosting URL, Open a new browser window and access the site hosted on Firebase.

Using firebase server for development

Instead of running the firebase deploy command every time some site file is changed Daspanel allows the firebase development server to be used.

Go back to the site console and run the following command:

firebase serve --port 8080
In moments you will have a development HTTP server running and so to test any changes made to the content will just make a reload of the page of the site:

Daspanel firebase-server

See which port the server is running on. In our case the port is 8080, as can be seen in the screenshot above.

Open a new blank tab in your browser and enter the preview address of the development server. This address is formed by prefix https://_ds. + site URL + :8080. To facilitate, just copy the address of the preview window that was opened before in this howto. The URL would look something like:

https://_ds.condescending-minsky.sites.daspanel.site:8080/

Now to view any changes made on the site just give a reload on the site page to see the changes.

When the site is ready for publishing, simply execute this command on its console:

firebase deploy

Ports that can be used

The Daspanel load balancer only supports ports 8080 and 3000 for running npm run dev. If your site uses another you will have to make the necessary adjustments to it.

Next Steps

Docs Home