Host a create-react-app on my digitalocean website

Host a create-react-app on my digitalocean website
0.0 0

#1

I’m going through the beta react projects and trying to host them on my website in a projects/ subdirectory.

After building my first react app I npm build and uploaded it to mywebsite.com/projects/ but I get an error when looking for the js and css along the lines

GET https://www.mywebsite.com.com/static/css/main.c9e033a3.css net::ERR_ABORTED
GET https://www.mywebsite.com/static/js/main.49f526a1.js net::ERR_ABORTED

I can get around this by uploading the static directory from my build directory to my websites home directory but it seems like a hacky workaround. I know with the naming structure I probably wont run into naming collisions but I also know there has got to be a better way to do this!

I’m hosting using a digitalocean droplet, I believe my answer lies in routing but I have no idea how to set it all up. From the information I could find I think I need to edit the sites-available and/or sites-enabled files but the tinkering I did took down my site until I reverted it. :anguished:

If anyone has any tips or tutorials I’d appreciate it.


#2

Although this isn’t a direct answer to your question, I’d recommend ignoring the hassle altogether and using Heroku to host your projects. It’s a free, simple way to host your projects.


#3

I think the “hacky workaround” you describe is the thing you should be doing. React serves a static index.html file that runs a big script. I think if you put copy your app directory onto your droplet, run the build script, and configure your server to serve that index.html it should work.

I also second Heroku! Way easier. = )


#4

Oh okay thanks, just to be clear right now I have my project at

www.kevintreynolds.com/projects/quote_generator/

But in order for me to get it to load I need to move my JS and CSS folders from

www.kevintreynolds.com/projects/quote_generator/static/

to

www.kevintreynolds.com/static/

So if I host multiple apps I’ll have several CSS and JS files in the same folders away from my project directory and index.html files. I was basically just hoping there was an easy way to point my index.html file at the CSS and JS directory relative to each project instead of like a master folder.

I’ll definitely look into heroku, I figured I’m already paying for this thing it’d probably be easier to keep all my projects in one place but that’s proving to be untrue :confused:


#5

If anyone comes across a similar problem I finally figured out the fix and if I would have just scrolled up a couple of lines in my terminal I wouldn’t have had this issue in the first place :flushed:

The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

so yeah, just add "homepage" : <path to project root>, to your package.json and everything will work perfectly. I knew I was missing something simple


#6

First you should always “build” your React app and host the built React App for a production environment. Second DigitalOcean made a nice tutorial on deploying Node.js apps see,


#7

Not really sure how any of this addresses the issues I was having but as I said I figured out a solution by pointing to the project directory in package.json.


#8

It gave you DigitalOceans recommended way of deploying Node.js apps.