Building a Web App Using Nuxt.js and Firebase

Additionally, I wanted to deploy the app to firebase functions, as I was planning to use Firebase Auth, Firestore in combination with Firebase hosting already and wanted everything in one place. Firebase offers a great selection of products that really simplify app developments (also web apps), and has a pretty generous free tier, so I was very interested to learn the tools as part of this project.

Now, you will have to set up setup up your local project folder. Create a directory with your project name:

Install Firebase CLI — if you don’t have it installed already — log in and initiate firebase:

Use the following installation defaults if you’re unsure which to choose from: during the installation:

Congratulations! Your Firebase setup should be complete and will have created a folder structure that looks something like this:

Remember this folder structure as it is key to understanding the next steps. The server files sit in the functions folder, you'll see the index.js with the commented out "helloWorld" function:

This is where your Nuxt.js files go later, but first let’s create a local nuxt.js project.

Within the root directory of your ‘my-firebase-nuxt-project’ project create a new Nuxt.js instance called ‘src’ with the following command:

Using src in the command above will install the Nuxt project in the src folder, which is where we want it to sit - seperate from the firebase files. You can choose the the setup options as you please.

In order for the application to work, we need to generate all the files for the server and client. Generating the Nuxt files in the src directory will work out of the box, like with any other Nuxt project. Run

It output should look should look something like this:

Notice the .nuxt folder within the src directory - these are your generated Nuxt files, with the dist folder containing both server and client files. You will need to put them into the correct locations for Firebase functions to know what to do with them. This is the key to deploying Nuxt to Firebase functions. We'll do this later.

Now that we have Firebase and Nuxt.js set up, let’s connect the two. In ./functions/node.js add the following code:

As you can see, we require an extra dependency in the functions folder: “nuxt-start” to create a server. Install all node modules, then add in the functions folder, and add the nuxt-start package:

At this point firebase won’t pick up any Nuxt files yet, as Firebase won’t know what to look for.

Pay attention to the exports.ssrapp function in the code we copied above. In order for firebase to know what to do with this, we need to tell it to look for this function in the Firebase settings.

Replace the content of firebase.json file, in the root folder of your project, with the following:

Your server is set up and you’re pretty much ready to go. The only part that’s missing is coping your Nuxt.js files to the right directory, for Firebase to find them, otherwise starting the server will result in a Internal Server Error.

For this we will need to copy our Nuxt.js files we generated earlier, when running the $ yarn build command from the src directory to our functions folder.

The server files need to sit in /functions/.nuxt/dist/server. In the root folder of your project run the following command:

We’ll also need to provide the correct files for the client to load on the front-end. First we delete the default Firebase files in the public directory as we won’t need them:

You can now ‘test’ the Firebase functions on a local environment using the following command:

You’re all set up.

All that’s left is to deploy your app.

Once everything is uploaded, you should receive a message:
✔ Deploy complete!

In order to save yourself manually copying the generated files every time you want to deploy we can set up some automation scrips. I’ve added them to the template of this project.

Related posts:

Kansas City is growing and so is your investment, your home. Therefore, it is important to protect your investment. Hiring a licensed contractor in Kansas City that looks out for you and your…

Sejatinya sebuah pergerakan mahasiswa terlahir dengan adanya sebuah cita — cita yang luhur, visi — misi yang jelas, serta kemauan kuat membangun bangsa ini dari keterpurukan. Namun, yang terjadi saat…

Have you ever heard of Jira before? I’ve noticed it on a couple Software Developer job postings, and much more on QA type roles. I thought it would be good to do a little research on the subject and…