So I have a website and I want to deploy some of my projects on my portfolio website like mywebsite.com/first-project.html
I already ran npm run build so I have a build version with the static files and I put it on my website but the react index.html isn't return anything the div id of root is empty.
I have seen tutorial of deploying them through surge and github pages. I don't want to do that, I want it on my own website. How can I achieve this?
Edit:- I forgot to mention the projects I created are through the npm create-react-app method and I have run the static build through serve -s build on my local computer. I just want to do the same on my website.
Edit2:- In the future if I am creating a react based website with the intention of hosting on my own domain, what kind of groundwork should I lay to make it easier? Any node packages or routing or set up? Also would you recommend create-react-app for this purpose if not what method would you recommend?
Related
I want to ask on how can I host my react app. It is a 3d product configurator.
I tried to host it on AWS Amplify but the 3d models doesnt load
If you want to host an application on aws amplify you have to create a build version of your app (assuming that it works already without any start issues meaning that you have a functional react app created with the command npx create-react-app).
Usually your react app runs on local host and it's basically like a test/development version of your app. When you take it into aws it really wants a build version of your app. The build command will generate everything you need for this. Navigate to your react application folder and
Run the command
npm run build
This will create a folder that you can send to aws amplify.
When you go to the aws amplify site it'll ask you if you would like to build a website or host a website.
Select host and then it'll ask if you would like to push it from a repository like github. For now lets just skip it and keep the deployment as simple as possible. Deploy without git for now.
Next, we want to click on drag and drop so that you can manually select the file build folder that your npm run build command generated.
Look for the build folder that was generated and drag that folder into the aws area. You don't actually have to click the 'choose files button'. Sometimes the box glitches and won't let you drag anything outside of the box. So what you can do is just open up your directories and manually find that build file in your folders. Drag it from there to the aws zone at the bottom of the screen.
Give your AWS app a name and env name.
From there you can deploy. Once you deploy it'll give you a site address. Also before you make your build, be sure that all of the packages you need are installed. I had an issue where my axiom commands were not working because I had not installed it prior to pushing my build.
So if your project depends on a certain npm package to run your .gltf files make sure that it is installed on your application. You should see it inside the node modules folder (in your apps local directory not the aws one).
I think AWS uses the node modules folder to generate everything your project needs (But I am not 100% sure of this). But it didn't work prior to me installing the package and pushing the build folder again to aws via drag and drop.
There are better ways to do this but this is what worked for me! Hope this helps to at least get your site up and running. Also hope it helps with any package issues that might have been happening with your 3d models. This is about as far as I can take you. Good luck!
I am trying to host a pre-existing react website on 101domains.com using wordpress and reactpress, but I am currently stuck in Manual Mode for reactpress. I have uploaded my build folder to wordpress, but I cannot start the server to host the react app. Here is the error:
Currently you are in Manual Mode, (this means, you can create React apps only in your command line) because:
Your WordPress installation needs access to "npm 6" or higher to create React apps from the admin interface. However you can go to the app directory and use create-react-app from there.
I am trying to figure out how to give WordPress access to npm, but I am new to WP, so I am quite lost. Any advice would be nice!
To use ReactPress with an existing create-react-app. You need to build it with ReactPress on a local WordPress system. I recommend localWP.
Install ReactPress there, copy your whole create-react-app into the apps directory, add a page slug from the WP admin and update the dev environment.
Then build your React app from the command line. Now you can push that build to your live website. There you must choose the identical page slug for your React app. Then it should show under your chosen page slug.
I have a simple create-react-app app that I want to deploy to heroku but I'm not sure about the right wat to deplay or what files exactly. Do I need to npm run build as in the case of a mern fullstack app? I repeat, this is only react, no server. Thank you.
Instead of using Heroku to deploy just the React part, no server, you can use other easier solutions like:
Netlify and Vercel.
What you need need to do that, is just have a GitHub/GitLab repository, register on the platform, choose your repository and wait :)
It will automatically build and serve your React application.
Another cool thing is: Any new commit will generate a new build, so your app will be always updated.
Hello I have read many docs online on connecting gh-pages with create-react-app. But most guides either assume that one does not already have a github pages set up, and that the react app is to be hosted as a directory (ie. username.github.io/react-app) instead of the homepage/root (username.github.io). I am hoping someone can help me out:
I have an existing repo for a github pages custom domain. It is currently hosting an older site I built with gulp and static html/css/js, and a CNAME file for custom url.
I built a new website redesign with create-react-app in a separate repo (It uses react-router for multiple pages).
I want to overwrite the contents of my old github pages site with my new create-react-app website as the root homepage.
Is this possible? If so, what is the best way to achieve this? Thanks
In the existing Github Pages app, remove the CNAME and/or delete master branch. Deleting master branch will remove the site, while deleting CNAME will clear up the custom domain back to default [username].github.io.
In create-react-app, add CNAME to /public folder.
In create-react-app, add line "homepage":"./" to package.json.
In create-react-app, run npm run build then run gh-pages -d build build process, then run npm run deploy
I have two things:
a React app running locally (using npm run start)
a Jekyll site hosted on github pages
How do I put my React app onto my Jekyll site?
#streetturtle means just copy all the generated files on your ...my-react-app/build/ folder after executing the command npm build, and place them into the branch of your username.github.io where your GitHub Pages site is currently being built, without using Jekyll to generate a static site, at all!
Instruction for creating GitHub Pages.