Curriculum: Clarify Heroku deploying directions: Part 1

[alodahl]

Created from task #1358

Our heroku tutorial outline in unclear in many spots. Please fix the following problems. For reference, below is a review of the outline that the To-do items are based on.

To do:

• [x] Fix markdown bulletting and numbering in the outline.
• [x] In the 'Gotchas' section, replace the link with a more helpful repo, or add some more detail on why the original one is helpful and what to look for. In fact, please do the same if you add a new repo link.
• [x] In the outline, there's a line that begins with this text: "./eventonica-app/server/*" that ends in a comment. The comment is not helpful for a learner. Replace it with something clearer. Even the asterisk may not be enough to signify to a beginner that we are discussing the contents of "./eventonica-app/server", so please be explicit about this too, and on other nearby lines if appropriate.

Number 10 and after will be addressed in issue #1404.

---

Issue #1358 Comments

Note: I did not build the apps as a student would prior to working on this issue. I utilized student code on GitHub which required some breaking apart and rebuild to follow the Deployment instructions. I may also have been limited in following some instructions by my own new learning with respect to the topic (specifically database).

The paragraph numbering is automatic and renumbers itself with some edits. In the original there were two step #6.

Deploying

1. cd into the React app you created and move _everything_ into a new directory named client.

cd <my react app>
mkdir client
mv * client

NOTE: mv * client returned this warning "mv:cannot move 'client' to a subdirectory of itself, 'client/client'." This command adds an extra level of code. I moved deleted that level to maintain the directory structure we’re supposed to have as indicated after step 2.

1. Create a server directory. Copy all the files from your Express API folder (1-3 JS files + package.json) into the server folder you're about to create inside your React app. _This is where your API code will live from now on -- don't modify or use the old directory or repo_

mkdir server
cp my-express-server/* server
# We need to keep package.json, package-lock.json, and node_modules at the top level.
mv server/package.json .
mv server/package-lock.json .
mv server/node_modules .

NOTE: cp my-express-server/* server did not work as expected. This code worked: cp -r ~/path.to.source/. ~/path.to.destination/ and I made that change in the pull request.

At this point, you should have the following directory structure:

./eventonica-app
./eventonica-app/client/* # The code for your React App
./eventonica-app/server/* # Your express API (app.js etc.)
./eventonica-app/package.json # Toplevel package.json used by Heroku to run your app
./eventonica-app/package-lock.json # Toplevel package-lock.json used by Heroku to run your app

NOTE: with respect to the line above “./eventonica-app/server/* # Your express API (app.js etc.)” I did not understand the purpose of (app.js etc.), it’s vague. I removed “etc.” in the pull request however “app.js” alone doesn’t seem much better.

1. Attach your Heroku app to your code. Run heroku git:remote -a YOUR-APP-NAME
   inside the terminal at the root of your project directory.

NOTE: After running this code I got the message "set git remote heroku to https://git.heroku.com/linda-booktonica.git." This step confused me for a long time and took research to understand what to do, I proceeded although I had a question mark in my head from this step on. I wasn't really sure what I was doing or whether I was doing it correctly (still don't so I'm not offering an alternative). Perhaps this is intentional for learning but based on my own experience I suggest a check in with the student for what they should be seeing.

1. Configure your database. Heroku will specify environment variables you can use to connect to the DB. Fill in your local database name in the Postgres URL. This is the default
   database URL when your app is running locally.

new Pool({
  // Make sure you swap out <user> and <password>
  connectionString: process.env.DATABASE_URL || 'postgres://localhost:5432/<database_name>'
  // Use SSL only in production
  ssl: process.env.NODE_ENV === 'production'
});

NOTE: what user and password?
NOTE: the heroku docs direction is different than the directions in the tutorial, lots of research again as to where new Pool code should go; I reviewed the deploying slides and clicked on the link in slide 17 for help.

Gotchas

All done! Small differences in the way you've set up your site may make bits of this process not work as expected, so there may be some debugging required. Here is a sample repository you can refer to https://github.com/esausilva/example-create-react-app-express.
NOTE: I did not find this repo helpful.

Supplemental Resources

• Code School Tutorial(requires sign-in) - Domain Names,Name Servers, and Cloud Based Servers
  NOTE: this is now a dead link.

[ananyakaushik]

@alodahl Can I take this issue up?

[alodahl]

Thanks so much @ananyakaushik ! Just be aware that this related PR is likely to get merged soon, which clarifies some language in the same file but doesn't necessarily fulfill this issue: https://github.com/Techtonica/curriculum/pull/1405