- Connect Angular and FaunaDB with Netlify Serverless functions
- Product list and detail view with Angular
- Create crud for products and show products on an Angular page.
- Setup Authentication to register and log in (so people can shop)
- Create a shopping cart to order products.
- Best practices on how to use FaunaDB with Netlify Serverless functions
In this part, we are going to set up a basic Angular application with Angular Material. Next to that, we are creating our Serverless function which is going to be hosted on Netlify. That Serverless function will retrieve data from our database on FaunaDB via the API.
We are exploring this Angular in combination with serverless functions and FaunaDB, because it will make our process of building full stack applications much easier. After this whole series of posts you will become a practical expert in how to use all of these techniques.
Most of the times people would use a NodeJS application, which is in much more need for maintenance than serverless functions.
If you want to learn more about serverless functions, than check my introduction article to it.
Let’s get started and Happy coding! 🚀
Before we start we have to make sure we have a couple of things installed on our computer.
- NodeJS & NPM/Yarn: You can download it from the NodeJS website or install it via NVM on Mac or Windows which is more effective when you need to update NodeJS in the future.
- Angular CLI:
run npm install -g @angular/clior
yarn global add @angular/cli
- FaunaDB: run
npm install -g fauna-shellor
yarn global add fauna-shell
Now that we installed every dependency on our computer, we will set up the project.
First, we are going to create a project on Github so we can store our code safely. Netlify is also using this project to pull the code and build it on their servers. We will work on this project together.
If you want to check for my code, please check the Github repo I will use throughout the whole series.
Go to the Netlify website, log in or register if you don’t have an account yet (you can use Github for it).
Go to the FaunaDB website, login or register if you don’t have an account yet.
When you are on Netlify click on the “New site from Git”.
Click on the Github button and authorize it with your Github account.
Search for your project and select it.
If you are using a clean project don’t fill in any of the input fields. Only if you’re not working on the master branch off-course.
Now your project is ready to get started!
Now we are going to create a brand new Angular project. Run ng new project-name in your terminal.
In the branch “add-angular-project” you can see how this looks.
Open this project in your favorite editor/IDE.
I’m going to add Angular Material, but if you want to use something else, please go ahead, this doesn’t affect the tutorial, only a different visual end result 😉
ng add @angular/material
I chose the purple/green theme, added the animations and typography. But pick whatever you like, it has no effect for the rest of the tutorial.
This is how it should look.
The branch can be found on Github.
Now that we have set up the start for our Angular application, it is time to set up our functions folder.
Create a functions folder in the root of your project.
To make sure we can call the serverless function we have to tell the Netlify system where our functions live. We do that in the
\[build\] functions = “.netlify/functions/”
Netlify builds a tool for running and testing serverless functions on your local computer.
If you use Yarn use this command.
yarn add netlify-lambda
For NPM users use this command.
npm install netlify-lambda — save-dev
package.json we add 2 new commands in the scripts to make it easier to call. See the
Now create the first serverless function
hello.js in the functions folder.
yarn fn:serve or
npm run fn:serve to test the function locally. For making a build run
yarn fn:build or
npm run fn:build.
If you want to have support for TypeScript, check how to set it up on the Netlify-lambda repo.
Now push this to GitHub. The Netlify build will start and make your function visible on the “functions” page.
In this branch, you can check this function on Github.
Give your database the name that you want. For the purpose of building a webshop, I select the “Pre-populate with demo data” option.
This option fills your database with a couple of collections, indexes, and data. I think this is super useful when discovering the FaunaDB service!
Click on “security” on the sidebar and create a new security key. Initialy there are two Roles to choose from, Admin and Server. Choose the Server role, we do not need Admin access. You can create your own fine-grained roles later if you want to restrict access further.
After saving you will see a key, copy this key and keep it private! Go to the settings of Netlify.
Find the “Environment variables” section and create your environment variable. I use the secret key: “FAUNADB_SERVER_SECRET” and paste the security key from FaunaDB in the value input.
I think it’s a good idea to create a lib folder where we can put all the logic for our functions.
We need to install the
faunadb npm package to access the FaunaDB API. To have access to the
FAUNADB_SERVER_SECRET we need to install
npm install faunadb dotenv
yarn add faunadb dotenv
config.js outside the functions folder, where we can add header information, the Fauna DB server secret, and more.
To have a local environment variable
FAUNADB_SERVER_SECRET we create a
.env file in the main directory of the project.
In this function, I want to retrieve the data from the products. In that folder we create
ProductService class will be used in our
products.js in the functions folder and import the
faunadb package and create a client where we use the environment variable.
To test if everything works as intended, we have to run
yarn fn:serve or
npm run fn:serve. When the build is finished successfully check this url in the browser: http://localhost:9000/.netlify/functions/products. The data you should get back looks similar as the example below.
Push the changes to Github, wait until the build finished and test the URL from Netlify to see if everything works as expected.
Now that we have seen that the serverless function gives back the data we would expect we can retrieve the data from our Angular application.
We need to make sure that our
app.module.ts has the
And in the
app.component.ts we need to use the
ngOnInit method to get the data when our component is finished with rendering. We need to import the
HttpClientand use it in the
ngOnInit method to call our local serverless function.
Test in the browser if you can see the data from the products.
Now we have learned how to make a serverless function, get data from the FaunaDB and retrieve it in the Angular application.
Next time we go a step further with Angular, FaunaDB and Netlify’s serverless function. If you can’t wait for the next tutorial, please experiment a bit more with what we already have built.
Happy Coding 🚀
Originally published on: ByRayRay.Dev
I’ve gathered a couple of aspiring developers around the world on a Discord server, feel free if you like to join in.