Jon Hemstreet

Angular html5Mode state refresh using Amazon’s ElasticBeanstalk

by · Published · Updated

Angular’s built-in routing works wonders. you can do so by either registering the route with the hash in the URL or you can states ( html5Mode set to true ). This will leverage html5’s push state to route URLs. Unfortunately, this will cause some issues when attempting to refresh the browser.

You will receive 404’s saying that the resources do not exist. To fix this we must redirect every URL other read file URLs to the index page for angular to interpret and decide where it should route. Using this strategy you must leverage a standard error page for if it is an invalid state.

.htaccess in the root of the eb deploy zip / folder

RewriteEngine   On
Options +FollowSymLinks

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule ^(.*)$ index.html

 

To get this working we need to add the following inside the head of the index.html

<base href="/">

Jon

Innovative, entrepreneurial and positively unsatisfied mind that constantly pushes the tech boundaries to create new solutions and devices that change people’s lives. Throughout my career, I have had the opportunity of having a multi-disciplinary experience, which led me to wear the hats of: Architect, IoT Consultant (Internet of Things Consultant), Developer, Designer, Engineer, Server Admin, Consultant and Project Manager – to name a few. Based on this diversified background, I get projects done by following smart ideas and well-planned goals. In a world which is getting more unconventional by the day, I use unconventional ways, and a very healthy dose of integrity, to create devices and solutions that help companies go from a steady present to a dynamic future.

You may also like...