What is Firebase?
Firebase is a platform that offers a set of tools that allows you to develop an application without server-side programming. It has an authentication system, realtime database, analytics, A/B Testing and free hosting, plus many other services.
All of this makes it a perfect way to deploy small or medium applications, saving time and money developing them.
Creating a basic App with VueJS
The first thing you need to do is install the Vue CLI. You can install it using npm or yarn.
npm install -g @vue/cli
yarn global add @vue/cli
To create a new project, run:
vue create <project_name>
When you run the previous command, the terminal will display a prompt to pick a preset. You can choose between a default config based on babel as compilator and eslint rules for your code, or manually select feature by feature.
I picked the default config since I’m not really going to code anything in this example. I’ll be using the default project generated by the Vue CLI and upload it to Firebase.
This will install cli plugins and it can take a few minutes. When the installation is done, navigate inside the directory in your terminal.
Executing the App
Open the project with your preferred IDE. Then, open the
package.json file to take a look at the basic commands created by Vue.
- serve: this command runs the development server in localhost on port 8080 using the default configuration.
- build: this command compiles the code and puts all files in a
- lint: this command executes lint rules and displays errors if there’s any.
To check if the generation of the project went well, run the
serve command (make sure you’re inside the project folder in your terminal).
npm run serve
Building the App
Once you are ready to deploy your app, the first step is to build it. As we saw earlier, there’s a command to do this:
npm run build
When the process has finished, a
dist folder will be created in the root directory of the project. This newly created folder has an
index.html and some static folders (css, js and img):
Once you’re done creating and building your app, you need to config Firebase to upload your application.
The first step is to install the Firebase CLI globally. To do that, execute the following command:
npm install -g firebase-tools
This will install the necessary tools to communicate your machine with Firebase. But first, you need to login to your Firebase account.
This command will open a new tab in your browser to login using Google. If the login is successful, Firebase will display the next page:
Now you need to initialize Firebase in your project. To do that, execute this command:
This will ask you which features you want to set up. You only need to pick “hosting” to upload your site:
Next, the CLI will ask you to use an existing project created previously with the Firebase Console or to create a new project.
Pick “create a new project” on your terminal. You’ll need to include a name for the application and a unique project id. Firebase will ask which public directory to use. Pick the dist folder generated before with the Vue CLI, and configure this app as a single-page application.
When Firebase initialization is complete, there will be two new files inside the project:
- firebase.json: file to config the different Firebase features. For example, the hosting.
- .firebaserc: the project configuration to connect with your app.
Finally, upload your application using the following command:
Your terminal will display the URL pointing to your project. Click on it to open it in your browser.
Remember you can create and config your project from the Firebase Console as well:
Thank you for reading! 🚀