DEV Community: Abzed Mohammed

How to Deploy JSON-Server to Heroku (3 Easy Steps)

Abzed Mohammed — Fri, 29 Jul 2022 22:42:28 +0000

Creating a local database and running your API locally is as easy as having a .json file and json-server installed in your machine or project. However, when deploying to Heroku that is another story.

In this article I'll be deploying my local database to Heroku in three easy steps. Before diving right to it, you should have Heroku-CLI and npm installed in your machine.

Step One - Configurations

There are only two configurations needed. The first is to connect Heroku account to the Heroku-cli and the other part is creating the package.json file.

Open an empty folder with visual studio (VS Code), then open a VS Code terminal and use the command below to link your Heroku account to the Heroku-cli.

$ heroku login

You will be prompted to open a link to your browser. Click on any key EXCEPT the letter q which will terminate the process.

After you've chosen the Heroku account you want connected, the whole login process will automate and if you check your terminal again you should be logged in.

The last step here is creating a package.json file using the command below.

$ npm init

There will be a series of prompts of version and descriptions of your project, click enter through each prompt and leave everything blank except for the last one which you will have to type yes to finish the process.

At the end of it all we should have a package.json file. Within the file, the only dependency we need installed during the build process is json-server, which if you check the image below has been included in the dependencies section and finally the start command to run the server. See image below

Step Two - Creating Files

In the image above, we only have 3 files inside our folder:

1. db.json
This file will contain all the data we need to use as the API.

2. server.js
All the configuration for json-server to run on Heroku are stored in this file and also the path to the db.json.

const jsonServer = require("json-server"); const server = jsonServer.create(); const router = jsonServer.router("db.json"); const middlewares = jsonServer.defaults({ static: "./build" }); const port = process.env.PORT || 3000; server.use(middlewares); server.use(router); server.listen(port);

3. package.json

The package.json file contain the dependencies that will be required by Heroku during the build process to serve our data, as explained earlier.

Step Three- Deploying

Once we have all the configuration and files ready, what's left is to deploy. In the Heroku dashboard, at the top right corner, there is a button to create a new Heroku app. Click on it, give your application a unique name that you'll use as the API endpoint and create your app.

Head back to Visual Studio and use the commands below to link the newly created Heroku app to the local project.

$ git init $ heroku git:remote -a your-app-name $ git add . $ git commit -am "make it better" $ git push heroku master

After running the last command, your app should start building and deploying to heroku.

To see your data, open the link and add a /resources as the one declared in .json file, in my case I used friends i.e https://your-app-name.herokuapp.com/friends.

Conclusions
This method is very easy to implement and takes less than 10-15mins. However, its not very secured. Be sure to use this method either for school projects or learning basis. As for creating secured API endpoints, I'd advise on using REST frameworks.

Inverse Data Flow - The React Way

Abzed Mohammed — Wed, 15 Jun 2022 13:21:00 +0000

Are you stuck in React trying to get data i.e props/properties from a child component to a parent component? Or trying to share data between sibling components? Worry not, because this is where React Inverse Data Flow comes in.

Inverse data flow is the ability of React to send data from a child component to the parent component through a function, which in turn can be accessible to sibling components. There are a variety of methods that can be used to achieve the same in React, for example useContext hook. However if your web application is not a complex e-commerce website or something similar, you are in the right place.

A. Creating React Application

Let's create a simple React app to demonstrate this. Assuming you have npm installed, we use npx create-react-app app-name to generate a React application. If you don't have npm installed you can click here for the installation procedure.

Next, we create a components folder inside the src folder that will hold our parent and sibling components. The images below show our folder structure.

When we run our application we get an output similar to the image above.

B. Setting State

useState hook which we import in the ParentComponent helps in managing the state of a component. We use the variables defined with useState to create a function getSiblingData that will be responsible for getting data inversely from the child to parent component. See image below:

B. Getting Data from Child To Parent Component

<SiblingBrother usernameData={username} dataFromHere={getSiblingData} />

We first destructure the props that we passed in the SiblingBrother component (reference above), then create an input text field that will get the user input. We now assign a value to the input field from the props and pass an onChange function that will send the data back to our ParentComponent. See the image below:

C. Finally...

With everything in place, what remains is to pass the username variable that we have defined to the SiblingSister component and then render it for output.

In the ParentComponent image above (second image from top), there is a similar code like the one below:

<SiblingSister username={username} />

The username props is being passed with username data from SiblingBrother to ParentComponent to SiblingSister.

Now when any data is being keyed into the input field, React updates the state and this information is then passed to the SiblingSister component.

The output should be as seen above.

Congratulations on using inverse data flow with React.

Django Or Flask (2022)? Small Scale Application

Abzed Mohammed — Thu, 09 Jun 2022 13:31:49 +0000

What Is Django?

Django is a Python framework for creating fast, clean, scalable and secure web application in a matter of hours. Some of the popular websites built with Django framework are Youtube, Instagram, Mozilla and Spotify.

What Is Flask?

Flask is a lightweight Python microframework for creating web applications. It gives developers flexibility and an easy time for to create and run a web application. Netflix, AirBNB and Reddit.

Developers are often faced with challenges when it comes to choosing the right path to take when creating a web application. There are plenty of options out there, however, today we'll majorly focus on Django and Flask as a choice in creating a start up or small scale web application.

Configurations And Getting Things Up and Running

The question comes, how fast and and efficient is it to set up and run each application? We'll have a side by side comparison on the amount of time, configurations and installations required to run a "Hello world" HTML file. See images below.

Django Setup

...The first step is creating a virtual environment and installing Django

...Initial folder structure on first launch

...Before using our app, we need to register it in the installed apps sections

...Set the file path to the app folder that will render our URLs.

...After creating this file, in here we define the mapping between our views and URLs

...Now we create our templates folder, then inside the views.py file we define a function that will render our template.

And Finally we run our application...

Flask Setup
...The first step is a creating virtual environment and installing Flask

...Initial folder structure on first launch

... We create a single file that is responsible for rendering our desired template.

And Finally we run our application...

Which One Should You Choose?

While Django comes out of the box with common functionalities such as authentication, URL routing and templating engine, it has a steep learning curve that requires indepth knowledge of the the framework. Flask on the other hand is very minimalistic and you can have the web application app and running in any way possible. This makes doing a small scale web application very easy and seamlessly. As seen above, the best option for a fast, small scale web application would be to use the Flask.

However, if you have plans to develop or scale your web application in the near future, Django would be the best option because for such a project because Django is set to scale and grow and has a large supporting communinity of developers.