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.
If anyone has any tips or tutorials I’d appreciate it.
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.
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
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
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