Migrating from localhost to the web

In this post:

Problems I've solved
Attenuating problems

I'm writing in the middle of trying to move my project from my local environment to the live web.

It's super exciting.

Right now, I'm able to visit my domain and see my page flicker onto the screen for the briefest flash of time before disappearing and yielding to a blank page.

I've had to resolve so many issues to get to just that point. So to see my page disappear as quickly as it appears...well that felt like a success!

Here are some things I've had to resolve:

Getting my EC2 instance running in the first place.
Getting the instance to serve a bare 'Hello World'-React app.
SSH-ing into my EC2 instance (I still can't do this!)
- I am accessing the instance through the browser console. I have four consoles open right now.
Pulling my blog code from git and (unsuccessfully) serving that app over my IP address.
Having that code break due to a failure to connect to the database.
Realizing that there is no database on this instance.
Struggling to download mongo (EC2 uses 'yum' and not 'apt-get' to manage installs).
Seeding the db with info for the app to render.

And now I'm at another big sticking-point.

I've got some posts in the db, so I refreshed the live page expecting to see my index page appear and persist. And yet, again, just the flash.

What's going on? I open the Express server file to find out. Check out the API call made by my react component.

const getFeedAllUsers = (callback) => {

  const instance = axios.create({
    baseURL: 'http://localhost:8000',
  });

  instance.get(`/api/all`)
    .then(response => {
    ...
  }
}

Localhost

Well, EC2 is most definitely not on my local machine, so it has no access to my locally-hosted API server. Time to fix that, and start serving API calls from my instance.

Alright, how might I do that?

Well, I'm going to need to replace 'localhost' with my public IP address. But I might still prefer to 'localhost' to serve my requests in my development environment, and continue working from that development database.

Is that the sound of a new stage of this project: separate branches for dev and deploy? I think so!

Another way might be setting up some environment variables that the app reads. If the environment indicates that the app is running locally (dev-mode), it pings localhost. If it's deployed, the variable tells it so, and it'll reach out to the public API.

Maybe these two methods can work in concert.

Takeaways

I bet a lot of these problems could've been solved with some pre-planning. Here are some things I might have considered in a planning session:

What is done via localhost? You'll need to change those addresses.
What dependencies (like the database) exist locally that need to appear on EC2?

But while I don't want to be a shoot-from-the-hip engineer, it's been satisfying turning up those problems as I go and then knocking them down. And along the way, I think I'm building an intuition for things that I'll know to anticipate the next deployment.