I was trying to deploy my MERN based E-commerce website on render.com, after the render terminal shows the build was successful the the webpage shows the error as,
{“message”:“ENOENT: no such file or directory, stat ‘/opt/render/project/src/frontend/build/index.html’”,“stack”:null}
I’m a complete beginner to render and MERN too,
I have no bulid folder in my local
then I tried to create another test app by npx create-react-app test to check if build folder is actually present in there or not, But it is not there, I’m totally in Confused now…
I’m Giving my repo here → stunning spark
I just want to have clear answers for my questions(Please!!!)
Things I want to change in my directory to deploy and host my app Successfully.
Things Need to be configured in the render’s settings
Thanks in Advance!!!
I just want to deploy and host my application on render.com
Just run npm run build into your frontend folder and do check you have removed the "build" keyword from the .gitignore file because it won't let you push the build folder to GitHub and you are good to go.
Related
We have just a single webpage with some links on clicking them it will redirect to different sources. As of now we are using "npm run build" to create the production package.
But because of the build files having dependencies with node, i cannot host it in a particular server.
Is there a way to create the Reactjs production build without using node ?
I suggest using Netlify to host your react app easily .
Below are some resources that can help you along the way.
https://www.netlify.com/with/react/
https://www.youtube.com/watch?v=sGBdp9r2GSg
You can have a build and upload it manually to your Netlify account,
You can use the CLI (netlify-cli) or you can your account to git .
Similar approach can be followed with git pages for example.
What packages do you have in your package.json file? Did you use a React project template that uses Node server-side features? It seems like you want to host your React project statically, not necessarily get rid of Node and npm.
For example, I've worked on lots of React projects using npm and create-react-app that we were able to host with a .NET backend and Microsoft IIS (instead of Node). The output is .html, .js, and other static files that you can host anywhere.
When you build a react app, the files at folder build contains everything it needs to run
If your hosting server hasn't integration with CI/CD, then you must deploy manually only the build folder, not the root folder (the folder that contains package.json).
I believe your issue is just a confusion/misunderstanding on how react works, how to deploy it, and how to run it.
React needs to be built on an environment where node, npm, and other tools are available. It can be on a build server or in your local machine.
After built, react app is just a folder with a bunch of html, css, js files which will run on the client browser, so, there's no dependency on NODE anymore.
These static files must be served with a simple static file server (apache, nginx, iis, etc),
I recommend you build the app locally on your machine and then deploy manually to your host through ftp, ssh or web interface.
If react is overkill to your needs, then don't use it.
The best approach is to host it in a cloud service that can do the full CI/CD integrated with git, all automated (Google GCP, AWS, Azure, Netlify, etc)
I've deployed sites on Netlify before so I know how to use the website. The only difference is that those sites were created via React.js. The website I'm trying to deploy is an old project of mine but I didn't use React at the time so it couldn't be opened using "npm start" "npm build" etc.
So how do you deploy a site that doesn't use React into Netlify? I tried looking for answers online but I couldn't find the specific answer that relates to mine.
Netlify has nothing to do with React, it can build and host many different types of site with various frameworks.
When configuring your Netlify site, you can set the following options:
Base directory: Optional field to set the directory that the buildbot changes to before starting a build. If not set, the base directory defaults to the root of the repository.
Build command: If you are using a static site generator or other build tool, this is where you should specify the command to run to build your site. For example, npm run build.
Publish directory: Directory that contains the deploy-ready HTML files and assets, either generated by the build step or pre-built.
I have been trying and failing for over three days now to get this working, and am growing increasingly frustrated with my own lack of understanding on the topic - so this is my search for an answer that I've not yet found.
I am using Angular 9.x and Angular Universal 9.x and am unable to work out how to deploy this to Elastic Beanstalk on a server running node. There are zero tutorials that explain how this should be done, as they are all aimed at those wanting to use Lambda on AWS. If someone could please point me in the right direction that would be great. I run npm run build:ssr --prod, and get the following in my dist folder:
[
I have tried deploying this folder by uploading it zipped, as well as tried eb deploy with my whole app - but all of these result in errors like the following (for eb deploy method)
> blush-front-end#0.0.0 start /var/app/current
> ng serve
sh: ng: command not found
Could someone please point me in the correct direction?
I struggled for months too because of the lack of tutorials online on how to deploy Angular Universal to AWS Elastic Beanstalk. And you will now be very happy to know how easy it is.
First, run the command npm run build:ssr to build for production.
Inside the dist folder, you will probably find a folder with your project name. Inside this folder you will find a "browser" folder and a "server" folder. Inside the "server" folder it is the main.js file.
Your setup might be slightly different, but you will be able to adjust this explanation to your situation after you read my entire answer.
Zip the dist folder.
Let's now configure the environment in AWS Elastic Beanstalk.
1) When you create an environment in Elastic Beanstalk, choose "Web server environment", and then on Platform branch config, choose the last option: "Node.js running on 64bit Amazon Linux". This is a very important step, since this is the only option that will enable you to configure the Container Options.
2) On the Application code, choose "Upload your code" and upload your zip file.
3) Click on Configure more options
4) Click on the Edit button on the Software box.
5) On the Node command field,type node dist/yourProjectFolderName/server/main.js
That's it!! Save and create your environment. Your app will work now. :-)
Currently I made a simple app with react, it works perfectly and I use react-scripts. I installed React by following the Facebook github page, and it written that "When you're ready to deploy to production, running npm run build will create an optimized build of your app in the build folder. ". After I press npm run build, a folder build created, but I do not know what to do with this folder. I tried some method like, move all folders except build and npm run, but it did not work. Anyone can explain me what is this folder "build" ? Thank you
npm run build builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
npm run build creates a build directory with a production build of your app. Set up your favourite HTTP server so that a visitor to your site is served index.html, and requests to static paths like /static/js/main..js are served with the contents of the /static/js/main..js file.
I have a Node project with some front end that results in a ./build directory. How do I setup Heroku to understand that build is what it needs to operate and not my whole project?
Heroku gets all informations of the node.js app using the package.json that needs to be on the main path.Just configure your paths correctly in package.json and it should work fine.