How to fix Netlify “page not found, broken link or entered a URL that doesn’t exist” error

I made a simple React app with React router that worked while clicking the links in the nav, but not if you enter those URLs in the location bar.

Netlify – Page Not Found
Looks like you’ve followed a broken link or entered a URL that doesn’t exist on this site.

TLDR – make a file in the public directory called “_redirects” with this line in it

/* /index.html 200

What’s going on here?

Single page apps have one HTML file and everything is launched via Javascript from there. Routing is handled through the client, not the server so there is no file located at mySPA.com/about (for example). In a traditional HTML site /about would work if there was an index.html file in the /about directory. In an SPA however, something in the router code tells the browser what component/page to display when that route is asked for. So this file basically says “hey, anything you don’t find ( the * character) come back and look at the main index.html file, I’ve got router info there. Much success! (200)”

I found this page which says netlify only tries to serve the main index.html file https://community.netlify.com/t/common-issue-i-ve-deployed-my-site-but-i-still-see-page-not-found/125

This didn’t really solve my problem but it got me looking around through the forums and I found something that said you need to use “redirects” to handle those pages (the ones that look folders with no index page)

First I found something about putting config information in a netlify.toml file in the root directory of the project. For me, putting the reccommened line in that file failed on build. I came across something that said to put the “_redirects” in my root directory which also didn’t do anything. I ended up doing a lot of clicking around before I got my solution.

Eventually I found a page on the netlify blog that said the “_redirects” file needs to be in the build folder. https://www.netlify.com/blog/2019/01/16/redirect-rules-for-all-how-to-configure-redirects-for-your-static-site/

My problem here was how my build folder is also in my .gitignore file so it never gets uploaded to github and my site is being built from my git repo! Finally, I realized I could just put the “_redirects” file into the public directory (same place as the index.html file for the site)

I wrote this blog because it took me 20 minutes or more of searching to figure out how to implement 20 characters of code. I’m not complaining about netlify mind you, they are an amazing product. There are a million different combinations of frameworks and languages that they are trying to support so there may not be a simple answer to my particular case. I just had a hard time finding the short answer so I hope to save someone the time solving the same issue.

Thanks for reading!

How to prevent ejs from splitting a string in attribute-value pair in a form field

TL:DR – put quotes around your EJS value when it is being used as an HTML attribute

I was making a simple Express app with EJS templating and MongoDB for my REST API. I passed the response, which was a few strings and a date, to the view in the typical fashion, and I could verify that the data was being passed by outputting the object to the view like this:

<%=responseObject%>
//which displayed this:
{ 
  _id: 5d347b004b0c201108909a55, 
  name: 'hot dogs', 
  description: 'costco dogs', 
  dateOnBag: '3/4/19', __v: 0 
}

This displayed the entire object on the screen. Additionally, I could display one of the object’s values using dot notation with no problem.

<h1>Edit <%=responseObject.name%></h1>
// which displayed this

Edit hot dogs

However, when I tried to use the same syntax to prefill a form field like this:

<li>
  <input type="text" name="name" value=<%-responeseObject.name%>><br />
  <label for="name">Item Name </label>
<li>

It pre-filled only the first word, “hot” instead of both words “hot dog”


I finally figured out that I needed to put quotes around it. When Express renders the page it simply replaces the EJS syntax with a string of text so the resulting HTML looked more like this:

  <input type="text" name="name" value=hot dog><br />

I later learned that HTML attribute values do not always need quotes. (basically, when there are no spaces) https://mathiasbynens.be/notes/unquoted-attribute-values So in the example above,

value=hot dog
//is equivalent to 
value="hot" dog

which leaves dog just hanging out there, an attribute without any value which HTML just ignores in this case. Actually, if I’m interpreting the spec correctly, it is setting the value of dog to true which is any case is not used so again it is ignored. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes

Web Scraping with Cheerio.js

When learning web development, they all tell you to find a problem in your life and create a solution using code to create a great project. Well, I drive for Uber and I wanted to know when the most flights would be coming into my local airport. The airport website has listings, but it’s a cluttered mess. I wanted something where I could just see at a glance when the most flights were coming in. I could not find a public/free API for flight information so I needed to figure out a little bit of web scraping. Code and working example is here: https://codesandbox.io/s/7zx3v5kqmq and I did a video walk-through explaining how the code works here:

Algorithms!

I’ve been making more videos and this time I’ve been working on the freeCodeCamp selection of algorithm challenges. I’ve been doing one every day and adding them to the playlist below. I’m twelve days in and the plan is to do one every day until I’ve got them all!

Just Enought JavaScript To Be Dangerous

I made a series of videos on my youtube channel about the basics of JavaScript. These might not be the best for the total beginner and it’s not meant to be a “learn everything about JavaScript deeply” kind of a course. They might be best suited for someone who has started to learn JavaScript and needs a refresher. It goes pretty quickly and it might gloss over a few things. My goal was to get to doing something more useful quickly. I’m pretty sure nobody ever said “The day I knew web development was for me was the day the computer confirmed for me that racecar spelled backward is in fact racecar”. I wanted to get to making things actually happen on the page ie. DOM manipulation, event listeners, etc. sooner than later.

CSS animation basics and Sass mixins

This was based on something a person was asking about on a facebook group. They were asking if there was a library that would make background animations. I saw their example and said “That looks like the bottom of 3 moving circles. I bet I can make that with just CSS”. Here is the result of what I came up with. I ended up reviewing about SCSS mixins to reduce the amount of code. Below you’ll find my codepen as well as a video where I walk through my process.

Responsive landing page based on client requirements.

Huddle landing page

This was a project from www.frontendmentor.io The site provides practice challenges that users can work through.  They provide a project brief, style guide, and an image of the design and you have to recreate it yourself.  If you’re trying to get out of the tutorial rut but need some inspiration on what to build yourself, this is a great resource.

Event Delegation in JavaScript

You don’t always have to write event listeners for everything. Event delegation lets you add one listener to the parent element and then use the information from the created event object to tell which child element was the target of the event. Here’s how it’s done.