Curriculum: Follow a Heroku tutorial yourself and note problems you encounter

[alodahl]

Task: follow a Heroku tutorial yourself, actually follow the directions, open all the links, and write down any problems you encounter.

Work through this tutorial about deploying with Heroku: https://github.com/Techtonica/curriculum/blob/master/deploying/deploying-to-heroku.md

We need to find out what the problems are with it, and whether any of the directions or materials are outdated. Whatever problems you find, please add them in the comments below.

[Tahanima]

Hello @alodahl
I am a GSSoC 20 participant and I would like to work on this issue.

[Codess08]

Can I work on this issue?

[alodahl]

@Tahanima make sure to follow these directions and then you can start:https://github.com/Techtonica/curriculum/blob/master/CONTRIBUTING.md

[Tahanima]

@alodahl I got extremely busy and could not find time to work on this issue. Please unassign me. I apologize for any inconvenience caused.

[alodahl]

@Codess08 are you still interested?

[Codess08]

I'm afraid but this link gives "Page not found".
https://github.com/Techtonica/curriculum/blob/master/deploying/deploying.md

[alodahl]

Check the deploying folder - we may have just changed the name to deploying-to-heroku or something similar.

[alodahl]

https://github.com/Techtonica/curriculum/blob/master/deploying/deploying-to-heroku.md

[alodahl]

Hi @Codess08, submit your review and your placeholder PR as soon as possible so we can review it and still have time for changes before the deadline.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[thisLinda]

I would like to work on this project, it sounds pretty exciting. As an advanced beginner I've participated in MANY tutorials and so often wish I could give feedback on the process. There are times when the instructions gloss over a step or miss a small step because the author is familiar with what is being explained. I notice and admire when it's done well.

[alodahl]

Yes, this is one of the advantages of having a junior on your team 😄
Thanks for offering to help!

[thisLinda]

Prerequisite links are all active.

Materials links all active. Notes below regarding content of individual resources in Materials.

Video "What is Heroku," no issues.

Techtonica Slides: Deploying
Slide 6, FYI, refers to only PAAS and IAAS, video on slide 7 refers to SAAS, PAAS, and IAAS.
Slide 14 Rackspace video is dead link/null.
Slide 18 Links are not clickable (because they are in Google docs), copied links active for all except #3 to Digital Ocean which is a 404 error.

Video "The Deploy Node.JS Apps to Heroku" is four years old and the links shown in it are somewhat different than in the actual Heroku Dev Center guide it follows. In the video there is one jump the instructor makes that is done with no instruction to the student (about 3 minutes in), "So let's go ahead and take a look at the directory we just cloned..."

The Heroku guide is beginner friendly, thorough, and presented in short increments. Students can start here https://devcenter.heroku.com/ and see the various languages Heroku supports and click "Get Started" OR they can click on Node.js. Both options will bring them to https://devcenter.heroku.com/articles/getting-started-with-nodejs which is the tutorial. I viewed some videos on YouTube and recommend no video, the tutorial is the most appropriate and will not go out of date.

Lesson

Both links are active

Supplemental Resources

All three links are active.

[thisLinda]

Finally, the deploying instructions refer to "your app" and to change directories into a React app previously created. I could not easily find that in reviewing the curriculum, if it does exist please link it for me, I'll build it and then I'll review the specific instructions in the lesson. If it does not exist I can build something quickly in order to review the instructions. I'm awaiting your direction.

[alodahl]

@thisLinda thank you, this is extremely helpful! The directions should apply to any full-stack app with express + react. You are welcome to create the simplest one you can to test the instructions. It doesn't exist in this repo - the apprentices were supposed to have created their own a week before this lesson.

[thisLinda]

I'm starting on testing the instructions today.

[thisLinda]

Alina is it possible to get the actual code a student would have created in order for me to follow the Heroku deployment instructions? A simple react app is insufficient. Today I read through the Eventonica app project thinking I would just follow it and build but the initial code to fork isn't complete and it just seems like there are roadblocks everywhere trying to piecemeal this together.

[alodahl]

@thisLinda how about this one? https://github.com/boocheet/booktonica

[thisLinda]

Perfect, thank you.

[thisLinda]

Deploying step 2, requires "all the files from your Express API folder (1-3 JS files + package.json)." Can you also send me this code? If not I will complete this project https://teamtreehouse.com/library/express-basics-2 which appears to be the Express project required for the Heroku tutorial.

Prerequisites Instead of the hyperlink "Express" the hyperlink should read "existing Express API folder" (consistent with "An existing Node.js app" three lines above).

Deploying step 10, "configure your database." It is not clear to me whether this is an existing database or one I will be building as part of the Heroku tutorial. If it is an existing database can you also send me that?

Apologies for not reading ahead initially to get these issues addressed as one. I was approaching the problem as a beginner, just starting at the top and working down.

[alodahl]

Deploying step 2: I think this may be the code you need: https://github.com/boocheet/booktonica-api. Here's the starter page, too.

Thanks for the prerequisites tip. Is this more clear?

Deploying step 10: They set up a database during this step of the Eventonica project. I think the directions just mean to configure the url with the name and password for your online DB on Heroku so it can make the API calls. Unfortunately, I don't have one, because everyone would need to set one up themselves with their own password for their individual project. But any SQL database you set up that can respond to one request will be enough to prove that it works. Free SQL Cloud DBs can be created at https://www.elephantsql.com/ (this services uses postgres).

Don't apologize, we really appreciate the help! We are also not in a rush, as long as it's progressing.

[alodahl]

Hi @thisLinda , how is this going?

[thisLinda]

Slowly! I had a two week interruption secondary to purchasing a new laptop
and switching to Mac for the first time. Quite the learning curve. I
started on the issue again this past Friday.

On Sun, Sep 13, 2020, 23:11 Alina L. [e-mail] wrote:

Hi @thisLinda https://github.com/thisLinda , how is this going?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/Techtonica/curriculum/issues/1358#issuecomment-691785906,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AIIG7MRKRCNOX5EA2KPD6ALSFWCVTANCNFSM4M5KYZ7Q
.

[thisLinda]

Alina I have completed the review. Currently I have marked-up the tutorial and pushed to a branch. Do you want me to do a pull request for the edited tutorial or copy into a message here?

[alodahl]

A pull request would be great if you've made edits, thank you. If it's just comments for changes that should be made in the future, leave it in the comments here instead.

[dyap2]

Hello, I'd like to contribute to this tutorial.

[thisLinda]

It's both, I'll split it up. The edits are minor as I understood the issue to be about identifying problems.

[thisLinda]

Despite extensive study and preparation for the pull request I believe I did not do it correctly. I have spent time trying to revert it but have been unable.

[thisLinda]

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.

[alodahl]

@thisLinda you are welcome to close the pull request and make a new one with your changes on a new branch... that PR looks like a doozy.

[alodahl]

Hi @dyap2 , are you still interested in helping with this issue?

[dyap2]

Hi @dyap2 , are you still interested in helping with this issue?

Hi, there! Yes, I am still interested in helping with this issue

[alodahl]

Hi @dyap2 , I see you made a PR for this issue. Could you please explain any difficulties you had with this tutorial, or any parts that were unclear? (You don’t have to fix it).

[dyap2]

Hi @alodahl. I didn't face any difficulties and all were clear. However, one thing to note for the mkdir command is that issues may arise with permissions. Maybe adding a note to use sudo mkdir if the issue arises would help.

[alodahl]

Thank you! Once you resolve the conflicts, I can merge.