I'm trying to get my app and server hosted on Heroku to work when deployed, but it's not. Client and server seem appear to be running, but the api calls are returning 404s. I'm guessing the configs are messed up somewhere.
Here is my repo: https://github.com/kpermenter/test-deploy and my Heroku settings are attached.
Any insight would be much appreciated!
This is because you haven't made the client files available publicly, you can do this by using:
app.use(express.static('../client/build'));
in the server.js file
if this doesn't work you can try creating a 'public' folder inside the server folder then copy the contents of the build inside the server/public folder and then use app.use(express.static('/public'));
and just deploy the server folder itself
Related
I want to deploy my project using the Heroku service.
My project contain client and server folders.
On localhost everything is working fine but when I followed the Heroku instructions, I still couldn't deploy my project correctly. I followed this instructions only for the server (I added only the server files), but when I open the given URL of my
Heroku project I receive the wild card (*) msg: Page not found
I couldn't understand what im doing wrong.
client script in package.json:
server script in package.json:
Axios file in client folder:
index.js in server folder:
updated - procfile:
I added the .env variables into the Heroku config vars.
This is the first time I'm trying to deploy my project and I will appreciate your help :)
This is my file tree containing a folder for my Vue app (client folder) and my NodeJS server (server folder).
When I try uploading to Heroku, I get an error saying that no matching buildpacks could be found, and that's I believe due to my source folder not having a package.js and that being because I have one in the client and server folders.
So how can I accomplish deploying both my client and server-side in one Heroku app, or would I need to split my whole app in one Heroku Front-End App and one Heroku Back-End App?
I'm sorry for such a stupid question, but I am really confused on how to put my app live, since it's finally finished after a month of work.
No Buildpack found while deploying to Heroku .. When I try uploading to Heroku, I get an error saying that no matching buildpacks could be found, and that's I believe due to my source folder not having a package.js
Correct, this error "no buildpack found" happens because Heroku looks at (only) your root directory and cannot determine what language/framework you are using.
The package.json file defines the dependencies that should be installed with your application. To create a package.json file for your app, run the command npm init in the root directory of your app.
https://devcenter.heroku.com/articles/deploying-nodejs#declare-app-dependencies
I'd recommend reading the heroku node docs and deploying a "hello world" application first, as a learning experience. You'll also want to read about the Procfile.
Deploying a client-server application to Heroku is quite common, all rails apps work this way (a single deploy). But, for node apps, there are many different ways to deploy, and there is no official (documented) way to organize your code, AFAIK.
I have created my project with Create React App and for a server using nodeJs but when deploying to production, the file index.html is missing in build folder. I've checked the public folder and the template of index.html is still there.
Refer to react-create-app documentation. Creating a production build
When running in development mode, create-react-app spins up a server that serves everything from the public folder.
Thus, in production, your express app also needs to serve everything from the public folder.
server.use(express.static("public"));
I am trying to deploy an application I am building with the MEAN stack to Heroku and am having some trouble. I think the issue is with the structure of my application. I have all my server code in a folder called server, which has its own package.json and src folder that contains the actual server code.
Right now I am simply trying to get Heroku to deploy the client side of the application. I am only getting an error... I know that the database and server are not running but I cannot even get past the initial displaying of the app. I have one web dyno set up to run ng serve (npm start) on the app.
If someone would be willing to look at the structure of my application and sees why I am unable to deploy to Heroku without really digging into the code, that would be much appreciated.
Here is the code
Please note that it is on the deploy branch, and this is on purpose. I do not want to push anything to the master until I am sure it is working.
The Angular web server targets localhost:4200 by default. That can be changed with a couple command-line options. --port accepts a port and --host accepts a host IP address.
So you could modify the ng serve script as follows: ng serve --host [host-ip] --port [port-number] --disableHostCheck. That last flag (--disableHostCheck) tells the dev server to bypass host checking when normally ng serve fails on anything except localhost. Terrible idea if meant for anything except private development/testing.
Another issue: Heroku runs off web dynos and from what I understand about them, they use a random port and IP each time. While the random port is stored under the variable $PORT, the IP does not seem to have a similar variable. Web dynos keep that information to themselves.
Heroku does offer this command: heroku local web. It runs your application on localhost:5000. That means ng serve --port 5000 works perfectly with this command. This should tell you how your front-end will run on Heroku. Your angular dev server will function as expected too.
For actual deployment to Heroku, use that express server of yours. Run ng build from your file system and it will spit out an index.html in the dist folder. This file holds your entire front-end application. You can then upload that file into your browser from the server.
For express that usually breaks down into:
app.get('*', function(req, res) {
res.sendFile('path/to/index.html');
});
Hopefully this helps! Let me know if I missed the mark anywhere.
I have created Angular-universal app with reference to this Angular GitHub Repository. I have used node express for server-side rendering.
I have built using this command
npm run build:prod:ngc
now I got the client and the server folder in the dist folder. No other files there like index.html.
Previously I developed the angular2 app using CLI, on building that it create a dist folder with bundle.js, index.html, and CSS files. I used to upload that particular thing to shared hosting. The app was working fine. But in angular universal I am confused. I am stuck on how to proceed further for production. I have the shared hosting, Please help me how to host the project in shared hosting.
With universal you have to set up the server first and then start the server to listen at some port(80 normally :P)..
normally.. once you setup the node server on the hosting area, you can just go to your source code and start the server using cmd:-
sudo PORT = 80 npm run server (if ubuntu)
to listen at port 80 and then you can access the site then using IP/domain name.