Serving HTML pages with GatsbyJS

Claire — Mon, 22 Jun 2020 19:21:30 +0000

Recently, I was working on a GatsbyJS website and wanted to port over a few HTML pages with Javascript in them without converting them to React to get a prototype of the site up faster. However, after some trial and tribulation, I learned that this simple idea was not so straightforward in reality.

The Static directory

This doc explains that GatsbyJS provides a static directory where one can put files that are not part of the module system. Sounds perfect for our HTML pages!

Resulting file structure:
/src /static ----/<we would like our HTML pages to go here>

The Problem

As this Github issues mentions, there is a bug in GatsbyJS that makes it so accessing HTML pages gives a 404 page.

The Workaround

When I was investigating this problem, I noticed that GatsbyJS wasn't serving HTML pages specifically. When I tried to access a JPG file or a PHP file located in the static folder, they were all served without a hitch.

After researching other ways to display HTML pages in a web browser, and after reading comments Github issue which reported the problem, I decided to convert my page to XHTML so GatsbyJS could serve it properly.

Now, you might be wondering why I didn't just covert the pages to React since I have decided that their original format won't work anyways. Well, converting to XHTML is much easier than converting to React. In fact, sites such as (this one)[http://www.it.uc3m.es/jaf/html2xhtml/simple-form.html] will convert the pages for you! Just be sure to check that all your Javascript functionality is copied over too. A few of my onclick function calls were removed, but copying and pasting them back in worked flawlessly.

Final file structure:
/src /static ----/approve-event.xhtml

Conclusion

Converting my HTML pages to XHTML and putting them in the static folder was a quick way to port over pages to a website generated with GatsbyJS.

If anyone knows why GatsbyJS won't serve HTML pages, I would love to hear about it.

How are you using GatsbyJS? Leave a comment below!

Cover image by Andrew Martin from Pixabay

AI + Github API = Issue Sentiment Classification

Claire — Thu, 21 May 2020 21:30:19 +0000

During a class I took on Software Engineering while studying abroad, I developed a software application that used Naive Bayes to classify Github issues as resolved or simply closed.

This type of analysis allows developers to understand which repositories are fixing issues and which are simply closing them due to inactivity or other such reasons.

View Project

claire-1 / github-metrics

Github Metrics: The Classification of Github Issues as Resolved or Unresolved using Naive Bayes

Github Metrics: The Classification of Github Issues as Resolved or Unresolved Using Naive Bayes

I wrote a blog post about this project here!

I created this project for a Software Engineering class I took.

Project Description

For this project, I got comments from issues on Github repositories. I used Naive Bayes to do sentiment analysis on the comments to decide if they were really resolved or if they were simply closed. After I classify the issues, I display the results in a bar chat and in a bubble chart. The bar chart lets you see the number of issues resolved and closed over time. The bubble chart lets you see the individual resolved and closed issues and click on links to see more information about each issue.

How to run

This project is fully dockerized. You must have docker and docker-compose installed.

To run this project, go to the…

View on GitHub

Technical Details

This project is fully dockerized. I used Java for the backend. The frontend is in Javascript. I used some SQL in this project as well.

Process

In one docker container, this application fetches the comments from issues in a specified repository using this Github Java API.
Next, it runs a Naive Bayes classifier on the last comment on the closed issue to decide whether the issue was actually resolved or just closed.
This classification is then put into a SQL database running in another docker container.
Once all the issues have been processed, the program queries the database to calculate the number of closed issues. It groups them by the times they were closed. It outputs the result in a JSON file.
Next, it queries the database again to get the url associated with each issue so that it can display all the closed issues with clickable links.
To generate the display, the start-up script for the main docker container runs the http-server command to start a webserver that is accessible from the host machine of the docker container.

Once this process completes, you can view the clustering of the issues by visiting http://localhost:8080/bubble.html or http://localhost:8080/bar-chart.html on your browser.

Example Display

Future Work

I used an API to access Github. This API is not perfect. It does not tell you if it cannot get all the issues for a repository due to rate limiting. Thus, if there are a large number of closed issues, this application might not display all of them since it doesn't know that there are more and doesn't have a way to get the others. Also, this API also includes closed pull requests when it says it is getting all the closed issues.

Additionally, the classification of issues as resolved or closed is heavily dependant on the training data. More and better training data would lead to more accurate predictions.

Final Thoughts

I learned a lot about developing iteratively while working on this project due to the numerous moving parts involved.

I also learned a lot about working with opensource code in making this project. The existing Java Github API made it so I could easily access data from Github, even if the API has a few bugs. Additionally, I used some existing Javascript code to display my final data, and found several tutorials on implementing Naive Bayes in Java that were immensely helpful. I could not have completed this project without the help of a vibrant opensource community! Thank you!

Header image source: https://pixabay.com/illustrations/question-mark-pile-questions-symbol-2492009/

DEV Community: Claire