Advice for Hosting a Front-End on Heroku

 ...don't.  Use surge instead.  Seriously, surge is the absolutely easiest front-end publishing method I've ever seen*.  Here's how to use it:

1. Download surge by opening up your terminal, typing "npm install --global surge" and pressing enter.

2.  Navigate to the directory with all your front-end code and run "npm build".  This will create a build sub-folder within your directory.

3. Navigate into that directory ("cd build") and....

Type "surge" and enter.

That's it.  If you just keep pressing enter your site will go to the web.

Several cool things about this:

A. There's a nice, neat division between your production code and your code that you filled full of bugs trying to get one simple, easy new button into.  You can work all you want on your laptop with your buggy code and not mess up your running-just-fine website.  Then when you do figure out your bugs, you can simply run npm build again and publish again to surge to the same domain.  No git headaches trying to manage your various versions and making sure you push your code to production without blowing something up - just get it running on your home machine and put the new version up.

B. You can run a couple different versions of your website.  Want to test out your new code - on the web! - without blowing up your old production code?  Just push your new version up on one of surge's random name urls and view it.  Then when it looks like what you want it to look like, push it to your real url.

C.  Time to publishing is literally seconds.  So whatever you want to do, whatever versions, bugs, layouts, etc. you want to put up can be done with no muss and no fuss.  Extreme dexterity here, folks.

D.  It's free. Nice.

Advanced users:

4. Surge automatically picks a url for you seemingly based off of this password generation scheme popularized by xkcd.  If you happen to want to pick your website's name, you simply enter in a different one when the "domain:" prompt comes up in.

All of the domains will still contain the "surge.sh" top-level domain, however.  If you want to publish to a completely-your-name domain, it's still fairly easy.

1. Buy a domain (this can be easy, but it can also be an endless rabbit hole of weighing the pros, cons, and prices of various domain hosting services.  Good luck, can't help you with that - but I use dreamhost, which is a bit pricier than most but comes in-built with a fair amount of security features.  You don't want your silly homegrown project hijacked by nefarious dark web hackers, do you?!?!)

2.  Set your CNAME record to na-west1.surge.sh.  This maps your hosted site to surge's hosting and makes sure that your domain gets your program from surge.  How to do this can vary based on what your domain provider is, so check out surge's instructions for your particular service.

3. Type "surge your-website-name.com" instead of just "surge" from your project's build directory.

4. That's it.  Woo!

After all that, if you don't just have a static site, you may still want a back-end though.  So if you do end up using Heroku for that, and your backend is Ruby on Rails, I got some advice for you:

1. In your /config/applications.rb file, check out your middleware configuration.  It should look something like this:

module YourBackend
class Application < Rails::Application
config.load_defaults 6.0
config.api_only = true
config.middleware.insert_before 0, Rack::Cors do
allow do
origins '*'
resource '*', :headers => :any, :methods => [:get, :post, :patch, :options]
end
end
end
end

Importantly, in Ruby on Rails 5 or 6 (i.e., the latest versions), putting quotes around Rack::Cors will wreck everything.  Most of your online tutorials you might haphazardly google into do not mention this, because before these versions you needed quotes - "Rack::Cors".  If you're having difficulties, you can figure out which version of Rails you have by entering "rails -v" in your terminal.

2. Use a Postgres database.  That's what they want you to use, so use it. Ugh.

3. Don't use Heroku.  Figure out AWS, or Azure, or google one of the thousand other solutions.  aALKHFSDGLSHGHEROKUARGGGHHH

*Note: this advice applies to front ends using JavaScript and React.  I believe surge works for other stacks as well, but just want to make sure I'm not caught with my pants down.

Comments

Post a Comment

Popular posts from this blog

The Sorting Hat

Image
Here's a lesson about the difference between theory and practical applications. Everyone knows about  bubble Sort  and  merge Sort  - they're probably the first two sorting algorithms you learned.  Everyone also knows that (1) bubble sort sucks and (2) this is due to the fact that its average time complexity is O(n^2), aka the worst time complexity.  It even generally performs worse than things like insertion sort and  selection sort , the "a D- is still a passing grade" of sorting algorithms. While all these things are true, there's a more important truth: always test your code. While reading  The Imposter's Handbook by Rob Conery  the other day and flipping through the comparison sort algorithms he provides, I decided, Why not actually test out this code?   And, the  speed test demon  that I am, my test involved sorting out his [23,4,42,15,16,8] array one million times with bubble sort and with merge sort, and I got this res...
Read more

Kadane's Algorithm

Imagine it is 1977.  You do not have a degree in computer science.  You have not spent months grinding leetcode.  You are given a algorithm problem that a decorated mathematician has already created what looks like an optimal solution. And then in less than a minute you come up with a better answer. You are  Jay Kadane , and the problem that you have solved is the maximum subarray problem. The maximum subarray problem gives you an array of numbers and asks you to pick out the subarray with the largest sum.  The problem is trivial if all the numbers are positive: [ 1 , 5 , 1 , 3 , 2 ] <- the largest subarray is obviously the entire array But what if you've got some negative numbers thrown in there? [ 1 , 5 , -1, 3 , - 2 ] <- sure, you don't want the negatives. But isn't taking the -1 worth the +3? A brute-force solution materializes pretty easily: just create every subarray and find the biggest sum: [ 1 ] = 1 [ 1 , 5 ] = 6 [ 1 , 5 , - 1 ] = 5 ...
Read more

Loose Equality, the Null Operator, and Other Oddities

 Here's a fun bit of code to run: console . log ( '0.5' == 0.5 ) //evaluates to true console . log ( '0.5' === 0.5 ) //evaluates to false The first equality statement is what's known in JavaScript as "abstract equality comparison", which people usually refer to as "loose equality."  Loose equality compares objects only after doing a type conversion - so even though '0.5' is a string and 0.5 is a number, JavaScript sort of jams them together and says "sure, good enough."  It's weird, but convenient sometimes when dealing with data that's really (in an abstract sense) numbers but could come through the pipes as either a number or a string. People have written surprisingly long algorithms to precisely define what  abstract equality  and  strict equality (aka, normal equality)  mean in JavaScript and other languages that adhere to the ECMAScript standards.  But for our regular usage, things that are to people the same ...
Read more