Prosper Otemuyiwa

Add Logging to your App on Zeit’s Now in 5 Minutes

In this tutorial I’ll show you how to combine Zeit’s Now, a modern cloud platform, with the best developer services — managed via. Manifold to quickly get a Node application up and running.

To build even an average modern application, a developer is forced to face a mountain of decisions: will the application consist of many micro-services or be a monolith, which cloud will it live in, how will you deploy it, which data-store will you use? Oh, the choices!

Services like Mailgun, Auth0, MemCachier and Scout, allow us to borrow expertise and short-circuit development. But, each of these services require you to create an account, add your credit card and juggle credentials and dashboards, which still beats implementing this functionality yourself.

Not bad, but let me introduce you to a new process, that (dare I say) is 10x faster and as a developer, I know you need all the time that you can get!

Introduction to Manifold

Manifold is a new platform that is making it easy and secure for developers to discover and manage cloud services. Manifold brings all of your logging, email, databases, and search services together in a central dashboard.

With Manifold, you can:

  1. Find — the monitoring, logging, databases, etc services that your application needs to grow.

  2. Buy — Manage the billing of these services from one place. Simply amazing! (note: many of the services offer free plans!)

  3. Manage — Upgrade, downgrade and cancel services anytime you want with the click of a button.

Enough about Manifold. Let’s build our app and discover for ourselves. Our time starts now!

Test Logger — Our app is so simple, it has only one feature: logging!

The importance of logging in an application can not be overemphasized. You need to be able to track everything that goes on in your app. When something goes wrong in an app, the log repository/dashboard is the first place that is checked.

The Solution

1. Sign-up for a Manifold account

Once you are logged in, you’ll have access to a create resource button on the right hand side.

2. Create a Resource

Click on the create resource button:

The list of available resources are highlighted in the Choose a Product section on the left. You can go ahead and click on the service you want to use. For our app, we’ll take advantage of the LogDNA service.

Note: LogDNA is a full-fledged, real-time logging service that will enable us to instantly aggregate and search our logs…

Now, go ahead and click on the create resource button to provision a new LogDNA account from within manifold dashboard. Sweet!

3. Explore LogDNA Service

Within the Manifold dashboard, we have our login credentials for LogDNA, the monthly plan, and other details for the service. Clicking on the resource name takes you to the LogDNA dashboard.

4. Write the backend code

We’ll write the backend with node.js. First, create a package.json file with npm init command.

Create a server.js file and dump the following code in it.

Embedded content: https://gist.github.com/unicodeveloper/8a23b474c5538869b7ca38850dc3fd85#file-server-js

Install the following node modules like so:

1npm install body-parser cors dotenv express logdna

In the code above, we spun an express server and installed the logdna node module. In the options object, go ahead and replace the values with yours.

Make sure you have a .env file that has a key variable with the value of your LogDNA key. You’ll find this in your Manifold dashboard too, just click reveal credentials.

The code below sets the logger up with the credentials.

1const log = Logger.setupDefaultLogger(process.env.key, options);

Now, run the node.js backend with node server.js and try out the /api/log endpoint with Postman.

Switch to the LogDNA dashboard to see the result of this operation.

Aha! Our app is working! Up to 5 minutes yet? 😄😄😄😄

Let’s take it a step further. We’ll build a simple frontend interface using React.

The code for the backend can be found here.

Just before we build the frontend, let’s deploy our backend. We’ll use a beautiful tool by Zeit called **now.**

5. Deploy to Now

Open your terminal and install the now cli-tool:

1npm install -g now

Next, just simply run the now command to create an account:

Finally, make sure you are in the code directory and run the now command again:

The highlighted url is https://loggerapp-jxruffzvrv.now.sh. So, we’ll use this URL in our frontend.

6. Build the Frontend

We’ll take advantage of the valuable create-react-app tool by Facebook to quickly scaffold a new React application.

1create-react-app loggerapp
2
3cd loggerapp
4
5npm start

Create a components and utils folder within the src** directory. In the components directory, create a *RegisterApp.js*** file :

Embedded content: https://gist.github.com/unicodeveloper/20a597b3ae4a3d30b616bafd00f44b14#file-registerapp-js

Create a logger-api.js file inside the utils directory and add this code:

Embedded content: https://gist.github.com/unicodeveloper/aef76ac3733f05807446ade70def5096#file-logger-api-js

Open index.js and modify it to route the index page to show the React component like so:

Embedded content: https://gist.github.com/unicodeveloper/f45a7c4bf20787f241edf3190ca1df68#file-index-js

Finally, go ahead and run your app.

Embedded content: https://gfycat.com/wetbothindusriverdolphin

Then check the logs:

Logged successfully!

Save the data and log it out? No problem!

We can easily spin up the **MemCachier or [JawsDB MySQL](https://www.manifold.co/services/jawsdb-mysql)** service on the Manifold dashboard to store data sent by the form by repeating the same process in less than a minute!

Conclusion

With the help of LogDNA & Manifold, we have been able to spin up a test Logger app in less than 5 minutes. Furthermore, the ability to add more services in less than a minute is within reach via our central dashboard.

Hopefully this will inspire you to try out Manifold — The Service of Services and 10x your productivity in development and app deployment.

You can find the source code for this tutorial on Github.

LogDNA
LogDNAReal-time log aggregation, monitoring, and analysis from any platform, at any volume
Try Freearrow_right
Stratus Background
StratusUpdate

Sign up for the Stratus Update newsletter

With our monthly newsletter, we’ll keep you up to date with a curated selection of the latest cloud services, projects and best practices.
Click here to read the latest issue.