How to get code from create-react-app to my website

Please help.

I have about eight questions.

If you would, please respond to them by number so that I can more easily understand the answer to them.

Aside: When I am able I am going to order at least a years worth of Codecademy as a thank you for the free tutorials that you have that helped me in my endeavor. You have my word. :slight_smile:

  1. How do I put an app I created using create-react-app on my website?
  2. and how to put it on any url, folder I want?

E.g.:
http://www.mysitename.com/name-of-app
http://www.mysitename.com/portfolio/name-of-app

Someone told me that I would have to do Server-Side-Rendering in, but I don’t know Server-Side-Rendering, and they told me that Server-Side-Rendering is hard, long story.

  1. Is there an easier way to do it than SSR?

For now, I was thinking about just copying and pasting my react component and other files into a folder or folders in my main website folder and then creating a page on my website and using the and and then making a root element on that page for the react-app to use.
4. Would that work?

  1. Do you have a tutorial that would teach me how to use SSR enough to be able to use create-react-app to put my app on my website?

  2. What are your recommendations?

  3. What are your thoughts?

  4. From here on out, Should I just write my react code directly in my website folder(s)?

More information:

When I was taking your free tutorials, it talked about using create-react-app so I went through and did the tic-tac-toe tutorial on Reactjs.org using create-react-app.
I have my react main file containing a src file that contains all the files ( the main index.js file that has the main Game component that is the parent to all the child and grandchild components files including the main index.css file for it ).

Thanks to your tutorials and the react tutorials and etc, I was able to also finish the Reactjs improvement challenges at the end of the tic-tac-toe tutorial and then I added my own improvement challenges.

I want to put the TTT app on my website and link it to my website portfolio or put directly on my website’s portfolio page in hopes that it will show potential employers that I know the basics of html, css, js, reactjs in hopes that someone will give me a shot and hire me and allow me, help me continue to improve as I work for them, especially since time is of the essence and I am unemployed, especially since I do like coding ( except for when I get stuck… but thanks to you I have learned to consider getting stuck to be part of the process and a learning experience.).

Doing my best to learn,

Noel. OGPH!

you don’t need SSR.

react contains documentation about deploying:

https://create-react-app.dev/docs/deployment

there are so many ways to deploy your react-app, its impossible to cover them all in a single forum topic.

you could try github pages, its free. Maybe a good starting point?

you can also set up a VPS (digital ocean for example) and configure everything manually (with PM2 and nginx)

3 Likes

Thank you stetim94 for coming to my aide.

I have a virtual private server, but all I know how to do really is upload and delete files.

Thank you for the link, but I’ve read that information and don’t really understand it.
I created a webpage (not live yet) called Tic-Tac-Toe in which I would like to put the tic tac toe app on. That way I can put a link to that page on my portfolio page.

In the end, I would like to have the ttt app located at http://www.mysitename.com/tic-tac-toe.html

When I read the material several times on the deployment link, I didn’t see a way getting the app on that page at that location, but I could have missed it, so I’ll reread the npm build part and the deployment part again.

I’m open to hearing any suggestions.

I feel really stressed out about this because “Time is of the essence” and I really need to get my foot in the door and get a coding job I hope, will enjoy, especially since I am currently unemployed.

I’m not a pro at coding by any means, but I hope that having that tic-tac-toe app which I created by doing the steps in React tutorial, of which I also completed the extra improvements, challenges at the end, and then created my own improvements, challenges that I eventually was able to achieve though it took me some time and much mental effort to achieve.

Thank you for reading this. I greatly appreciate your help.

if you have a VPS, you just need to find a guide how to configure everything from scratch:

https://medium.com/@mixpeal/simplest-way-to-deploy-reactjs-web-app-to-digital-ocean-to-production-adfb9f1667ed

which can be quite tricky, given it include PM2 and nginx.

1 Like

the first time deploying is always very difficult, understanding all the layers it involves. Once you found a deploy strategy, it involves trail and error, lots of reading and improving your understanding step by step

or simple start with a static serving:

https://create-react-app.dev/docs/deployment#static-server

those are 3 very doable steps? And then build from there

1 Like

Thank you for the link. I looked up static server and it basically says that it serves the files as is from the server to the browser.

I’m doing my best to understand. If you have a better explanation I’m open to hearing it.

Please bear with me, I need some advice on something else for a moment:
I went through the free tutorials on Codecademy and W3schools to teach myself html, css, and js, but when I completed the free tutorials in Codecademy, it recommended doing the free tutorial for Reactjs, so I went through it. Then I went through the React Tutorial on the React website which racked my brains. I’m wondering if I should just go back to the JS tutorials and start over but the problem is since I don’t have any money at this time, I can’t pay for anything that wasn’t covered in the free tutorials.

I made my own web site many, many months ago: https://www.noelbray.com/

What are your thoughts?

yes, but a server is nothing more then a fancy computer (okay, i cut some corners here), you could even deploy the app on your own machine, if you then also open up the port on the router, you can access it from the outside (i would like to include a security warning at this point)

programming is practice, practice and guess what? even more practice. There is no shortcut, sometimes you need to push through barriers.

why did you learn react? What problem does react solve? understanding why you use a certain technology is important.

nothing wrong with repeating a tutorial, there also other websites (udemy comes to mind, they have a lot free content as well)