How To Put A React App On Your Website Without Using Server-side, Back-end Methods.

Jump To Steps or

Read The True Very Short Story:

Not too long after going through W3Schools and Codecademy's HTML, CSS, and JS front-end development tutorials, I thought to myself: "Let's take a crack at React to see if I can learn the basics of it and to see if I like it." So, my fingers led my eyes to the React documentation; when my eyes had their fill, my industrious fingers quickly ran to the React Tutorial. Figuring it would be a better learning experience, I decided to do the tutorial in a "Local Development Environment" using Create React App. My fingers were itching to write code, but my mind slowed them down and even prevented them at times from such great pleasure because I didn't understand something and, or I was trying to understand something better.

After completing the tutorial, it's extra challenges, and my own self-prescribed challenges, I wanted to figure out how to put react app on my website for several reasons. So I went to the create-react-app documentation and did my best to understand it. And, while reading through it, realized:

"Create-react-app, we have a problem...

I'm not a pro-front-end coder yet and I don't know anything about back-end coding.

What should I do?"

My Perplexity triggered me to go to Reactiflux on the discordapp.com again for advice, help.

Several people tried to help, but to no avail especially since they were tyring to tell me ways of doing it on the back-end which my mind wasn't ready for. And one of them, after realizing I didn't know any server-side programming, said something like this: "You made a big mistake because there is no way of uploading an app created with create-react-app without the server-side."

Determined to figure out a way, my mind was working over time, and I wrote in the feed or thought:

"There's got to be a way to upload the files maually to my website."

And suddenly, a moderator stepped in and said something of the sort: "You can copy the build folder contents into the file you want it in, but make sure you specify the file path before executing 'npm run build.'"

So I went back to the create-react-app docs and learned how to set a custom file path for my react app before doing something similar to the steps below.

Here Are The Steps:

1. Step 1:
   
   Create a folder somewhere in your main website's project folder where you want your react app to be placed at. (I recommend naming your folder the same name as your react app or at least something related to it.)
   
   E.g.:
   
   main-website-folder > super-awesome-react-app-folder
2. Step 2:
   
   Open the package.json file in your react app project's folder change the json "homepage" key's, property's value:
   • For Relative Paths
     
     (If you know exactly what relative path, relative url location you want the app to be located at on your website)
     
     Type This:
     
     "homepage": "http://www.your-site-name.com/relative-path",
     
     Here's An Example Using My Website:
     
     "homepage": "http://www.noelbray.com/play-tic-tac-toe-online"
   • For Different Paths
     
     (If you want to be able to put your react app at any relative path, url location on your website without having to rebuild it everytime (This is what I did because I wanted the ability to move my Tic Tac Toe React App around without having to rebuild it everytime.))
     
     Type This:
     
     "homepage": ".",
   • For More Information Visit:
     
     Create React App Developer Docs Deployment Webpage
     
     and go to the "Building for Relative Paths" and "Serving the Same Build from Different Paths" sections.
3. Step 3:
   
   Execute, run "npm run build" command in your react app project's folder.
4. Step 4:
   
   Once the build folder is created, copy everything in the build folder and paste it into the folder of your website you want it in.
5. Step 5:
   
   Upload your super-awesome-react-app-folder or your entire website using whatever uploading method you want.
   
   And, Boom Shakalaka, you're done! 🙂
6. Step 6:
   
   Go to your website and check out your Super Awesome React App Webpage.
   
   If you want to check out my Tic Tac Toe React App Webpage:
   
   https://www.noelbray.com/play-tic-tac-toe-online

P.S. Thank You for reading. I hope my code post helped you in some way. I hope you have a great day.



Noel.