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:
Find — the monitoring, logging, databases, etc services that your application needs to grow.
Buy — Manage the billing of these services from one place. Simply amazing! (note: many of the services offer free plans!)
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.
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!
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.
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.
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 loggerapp23cd loggerapp45npm start
Create a components and utils folder within the src** directory. In the components directory, create a *RegisterApp.js*** file :
Create a logger-api.js file inside the utils directory and add this code:
Open index.js and modify it to route the index page to show the React component like so:
Finally, go ahead and run your app.
Then check the logs:
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!
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.