Update — 4.11.21!

I think I’ve made an error regarding the use of subprocess to run OCR on our files, so while you can OCR files locally you don’t actually get an OCR’d file stored in AWS. Sorry about this, folks. 😩 I’m working on a way to correct this. If you have any suggestions on how to make things work drop me a line.

Why We Need AWS

Heroku has an ephemeral file storage system, essentially meaning when the Heroku server is shut down, our files are lost. As such, we’ll need to connect to another service to have any sort of lasting file storage of…

Now that we have our front and back ends working locally and our prerequisites taken care of we can step up the difficulty by deploying them to an online service provider. We’ll be using Heroku for this, as it is relatively simple to use (assuming you set things up correctly to being with 😄).

Deployment Prerequisites

Now that we have everything working as we need it to locally, we need to prepare to deploy our apps to Heroku so our work can OCR documents from anywhere. …

Now that we have our front and back ends working at the bare minimum level, we need to go back and update the back end so it will actually run OCR on the file we upload to it. After all, there’s no point in just uploading our own documents to ourselves locally! This is going to be a big change in terms of functionality more than lines of code, which is why I’m combining it with preparing for deployment of our apps.

Download and Install Prerequisites

If for any reason you didn’t install the following packages in Step 1, go back and get them…

File Upload via React

Now that we have a basic back end set up, let’s work on our React front end. To get things off the ground, the front end will be a simple form with a title, description, and upload button.

So, our first step will be to open a command line (Powershell for me) and create our React project. Navigate to your preferred project directory with (in my case) cd/Documents/Projects and create the React project with npx create-react-app tutorial_frontend . Make sure to refer to Part 1 if you need to install npm or React.

This is what your directory structure ought…

Now that we have are working web page, let’s test our REST API using Postman to see if our page actually does something. Postman is something you’ll need to install on your own system, but the process is painless and straightforward.

Postman allows us to enter a URL and test to see if it works, even if all that means is that it returns some response other than 404 or another error. Postman is useful in situations like ours where something ought to be submitted but there is no front end to submit from.

Before we get to the point…

I thought I would write this tutorial as a way to help myself better understand a project I was working on. What we’re trying to do here is create a system where you can upload a PDF via the web and have it OCR’d for you. I’ve chosen the Django REST API for running the back and and React for creating the front end. Both, for now, will be the minimum viable product for getting this project up and running.

Unlike many other tutorials combining React and Django, I’ll keep the front and back end portions as completely separate projects…

Joseph Cardenas

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store