React Recipe App with API connection deployed on Firebase

This guys vids are pretty cool. After my last failure ot get a pre-built app to Deploy on Heroku I decided to start from scratch and do a tutorial on building a React App from Scratch, and i followed the tutorial below:

I started at about 3.30am in bed using the Surface 3. It didn’t have node.js loaded (to use npm to install react app) so I had to try and install the .msi file, which wouldn’t install, so I had to install from Zip and then add node directory to the pc system path. As that was ticking along I used VS Code to start writing the code in some files. I then ran npm install create-react-app and it did that but I couldn’t find the App.js boilerplate file (its in SRC folder) so I tried installing and deleting the folder a couple of times before realising that the App.js was installed. I then ran

npx create-react-app my-app (where my-app is the folder it will create to install all the files into)

Anyway, I finally gor the files as Iwanted in the src directory and copied across the code to the App.js file and the Recipe.js file.

There was a problem with every time I saved the jsx infor reformatted so the <div> would end up with the beginning arrow on the line above, so wouldn’t work. After searching around I found that this is VS Code setting the coding language to vanilla JavaScript (see image below) and you have to re-set it to JavaScript React. After that reset it accepted JSX formatting correctly.

I then coded the tutorial and de-bugged it. I was stuck with an error for ages. In the mapping using the “props”? <Recipe /> it kept on saying there was an error in the code below: Expected an assignment or function call and instead saw an expression no-unused-expressions

    {recipes.map((recipe) => {
          <Recipe />

I finally found a StackOverflow article where you need to add return to the props then it works. That took me ages to de-bug. As below works:

  {recipes.map((recipe) => {          
return (  <Recipe />

I then had some issues with wrongly naming files, but the above issue was the main cause of me renaming them in the foirst place. Hours and hours later, the code is running. I’ve added a couple of items such as number of servings and the website url where the recipe came from. A rather protracted process, but a running app. I’ve now pushed it to github.

End comment on App

Colours are awful, but its up and running. This is only a front end app, which is fine, but what it means is that the API call is from the client side, so it has to wait to be served the data.

• If there was a backend, the data could be pulled up at intervals (actually for a search app such as this a backend would not help at all as you are deciding what you want, then making the call). I do need to learn about back-end data requestes to API’s
• I couldn’t get the URL to be an active link.
• It is pulling information through but I’d like to give the stream of data some information such as “Ingredients, Calories, Serving Number.
• Data coming through is a bit unclear and needs more explanation. A further exercise if I can deploy it.

Try & deploy this app on Heroku- NO GO

Now I have the app running, I’ll see if I can deploy it. My first attempt will be to push it to Heroku.

I tried to upload app to site but I just get the screen of death:

I fluffed around a bit looking at settings and on the web to try and figure out why it wasn’t doing it, I looked at ports and other stuff, no joy. I also pulled it directly from my Github Repo. No joy.

Then I created a brand new create-react-app and tried to load that up and that didn’t work either, so I thought “Stuff it”. So I went to Firebase:

Deploy to Firebase SUCCESS

I’d watched this video before and so I followed it and it worked exactly like he shows on the video, no problems at all, you do need to load a Firebase CLI (which works) and i also have the Heroku CLI too.

• So the first step is to sign up to Firebase , there is a free spark account.
• Make a new project and give it a name.
• npm install firebase-tools -g from your terminal on PC- You only need to do this once as its got the g tag so globally installed.
• go into project folder you wish to deploy: >firebase login this will pop up a web page for you to log in with your gmail account and you may have to give permissions forfirebase to footle around
• Then in terminal in your project go >npm run build this will create a compiled build folder on your PC.
• next > firebase init this will initialise firebase and it’ll ask you a few questions about what you want to do. In this instance, its web hosting an app , so arrow down to web hosting, then use SPACEBAR to SELECT OPTIONS
• It then asks what directory you want to use for hosting:(public) build , we will choose build as we’ve just compiledit into that folder (this is useful, as we know we’ve tested it on PC so compiling it we know the code is good).
• configure as a single page app? (y/N) y
• file build/index.html already exists. overwrite? (y/N) N (this will use our one, else it’ll use a firebase template which we do not want )
• You then have to go to Firebase to get your project ID which you can get by going to specific project and pressing on settings COG. Copy the project ID (you’ll paste it into the terminal in the next step).
• in terminal > firebase use recipeapp-53**4 (the red text is the project ID in firebase)
• Now it knows where the firebase project is >firebase deploy (it’ll load up files and deploy). It takes a little while.
• It then gives you a coupler of URL’s to link to, you can put a custom domain in, I may try that later.

Link to site : https://recipeapp-53817.web.app/

End comment

The Heroku deployment was frustrating, the Firebase one pretty simple. I’ll definitely use that again. I think I still have some free credit/space in the account to use.

So, I have now deployed a node.js app (data-selfie-app) to Heroku and now the recipe React app to Firebase.

My next goal is a MERN (Mongo, Express, React & Node) app deployment.