How to deploy a web application
Sometimes you may want to showcase to the world your data visualizations by displaying them on the internet. I was in this exact position while working on a project that highlighted COVID-19 case counts for certain counties in northern California. I’m not talking about making a simple plot created from Matplotlib or Seaborn. Although the plots I made through this project were rather simple, such as showing a two-week timeline with line graphs, there was a greater sense of satisfaction seeing it displayed through a fully customizable web browser instead of uploading into onto some rigid format such as a Jupyter notebook pushed onto GitHub.
Furthermore, deploying a web app that showcases your visualizations can increase the intractability between your analysis and the viewer and makes trends and insights easily identifiable. Such web apps can be designed with multiple buttons, menus, and toggles that can helpfully convey a data set’s meaning.
Tech Stacks
A tech stack is an ecosystem of software and frameworks that power your application. When building web applications, one has to think about client-side programming and server-side programming. Client-side programming is also known as “front-end” development while server-side is known as “back-end” development.
Client-side means designing what the user sees on their screens and how they interact with your app and can be thought of as a black box. The back-end powers the application by maintaining its servers and databases. A user may request data, which means they request information from a database and display that information on the user interface.
Data analysts interested in building a web app have a plethora of choices when it comes to choosing frameworks for building their frontend and backend components. A framework contains a pre-written code structure and directory with ready-to-code files that assist you in developing your web app (as opposed to starting your app incomplete scratch).
As of 2020, some of the most popular front-end frameworks are mostly JavaScript-based: React, Vue, and Angular. There are a ton of resources floating around on the internet in learning these three and are usually picked up by most web-developers.
Back-end frameworks also exist, and some are completely based in Python, which can be beneficial for data analysts who primarily code in this language. The top two Python back-end frameworks are Django and Flask. Django is regarded to have better capabilities to help developers build complex applications whereas Flask is suited for more lightweight, simple applications.
Along with a front-end and back-end framework, your web application also needs a place to store data, so you will need to create a database and connect it to your back-end framework. You will also need to decide whether a relational or non-relational database is needed. For the Django framework, a great database that would complement is this PostgreSQL. Other common databases used for web development also include MySQL, MongoDB, and SQLite.
My Tech Stack
For my app, I used the React JS framework (along with HTML and plain CSS) for the front-end and Django with PostgreSQL serving the backend. I had zero knowledge of any of the back-end frameworks (I had some experience using React, HTML, and CSS prior to the start of my project) and it took about a week consisting of hours of watching some YouTube tutorials and reading Medium tutorial articles.
Using React + HTML + CSS with Django + PostgreSQL allowed me to set up the basic needs of my web app. There is a calendar that the user may select a date from to view the number of COVID-19 cases based on that date. Furthermore, the user can also toggle a three-day outlook or a two-week outlook. All the available information of the COVID-19 confirmed case counts as well as their associated counties and dates are organized in relational schemas contained within a PostgreSQL database I had set up. When the user selects a date to see the number of COVID-19 cases on that particular day, we need to take the information from the database and post that information right back on the screen so the user may see it.
We can achieve this using a REST API: the user selects a date that triggers an HTTP request (a request to a server asking for information) which asks the database for some information. That information is relayed back to the screen. Much of the inner workings of HTTP requests and the usage of a REST API can be easily taken care of through Django, making this back-end framework easy to use for beginners.
Finally, I used D3.js, a JavaScript data-visualization tool, to display COVID-19 cases through a line plot. This might involve more time investment (I definitely thought this was more difficult to understand) than understanding the front-end and back-end frameworks. Basic understanding of JavaScript, as well as objects, will surely help you build basic plots and have them displayed on your web application.
The whole application was deployed on Heroku, a PaaS (platform as a service) that provides developers a complete infrastructure on the cloud. Basically, a web application usually requires servers, storage, and networking; obviously, your local computer might not provide all of that, so there are solutions to this problem by offering these services on the cloud. I recommend Heroku for complete beginners. There is also DigitalOcean, Firebase, and AWS, although these are a bit more difficult for novices.
Wrap-Up
Deploying a web application is no cakewalk. If building web apps is something you want to add to your toolbox as a data analyst, it will surely be rewarding. It is an uncommon skill set to have and certainly can make you stand out! There are many ways to get there (besides just Googling what top frontend and backend frameworks you should utilize for your project).
I also recommend watching these series linked below that will teach you how to get started with full-stack development (focusing on both the front-end and back-end of a project) and how to deploy your Django app on Heroku:
