Divshot has joined Firebase!
Showdown Lowdown: Leveraging Divshot
The second annual Static Showdown hackathon is less than two weeks away. Before the competition starts, we'll be posting some useful info to help you stay lean, mean, and on your game!
Divshot is built from the ground up for front-end web apps. In addition to static web hosting, we've built a stable of advanced features to help you be more productive and ship more capable front-ends.
If you're entirely new to Divshot, read through Divshot Hosting 101 to get you up to speed on the basics. If you're prepping for the showdown, here are some ways to get the most out of Divshot:
Deploy Early, Deploy Often
Divshot has atomic releases and three built-in environments: development, staging, and production. As with any hackathon, we strongly encourage you to get regular deployments into your workflow as soon as possible. Knowing that you have a rock-solid deploy process is much better in hour one than hour 47.
Don't deploy your app straight to production. Instead, use the development and staging environments to test your code, then promote to production when everything looks good. This way, production (which is what judges will view) is always in a "most recent but totally working" state and you don't have to worry about breaking the app with last-minute pushes.
If you want to get fancy, you can also automate the deployment of your app straight from GitHub using Showdown sponsor Codeship (details here).
Use the Routes
Divshot has built-in support for front-end app routing. Your framework of choice almost certainly ships with an HTML5 History API router, and it couldn't be simpler to use it in Divshot. Just add this to your divshot.json:
{
"routes": {
"**": "index.html"
}
}
Now any paths that aren't recognized as files will automatically serve up your index.html. Easy!
Environment Variables
You may have some configuration that will vary between your local, development, staging, and production environments. Divshot gives you JS environment variables that work both locally and when deployed. Environment variables are ideal for things like Firebase URLs or analytics package IDs.
Environment Variables can be used in two ways:
- Add
<script src="/__/env.js">to your<head>. This will make your environment variables globally available as the__envvariable on thewindow. - Write your own script to pull in environment variables from
/__/env.json. This gives you more control, but you'll have to manage the initialization timings yourself.
To add environment variables to your app, it's as simple as:
divshot env:add <environment> VARIABLE=value
To use environment variables locally, just create a .env.json file in your project directory. It will automatically be picked up when you run divshot server.
Services
Divshot offers a few lightweight back-end services that may come in handy:
- Want AJAX access to a public API that doesn't support CORS? Give the AJAX Proxy Service a spin.
- Want to have full search-engine crawlability? Try out our Prerender Service
- Just want people to be able to shoot you an email? There's a service for that, too.
These are some of the less-obvious features of Divshot that will really help your competition entry shine. Remember, documentation for all of these features and more is available at docs.divshot.com any time you need it. Stay tuned for more Showdown tips in the days to come, and good luck out there!