So I've been at this for two days now and can't figure it out. I'm trying to deploy a Vue front end and express back end app to Heroku.
In my root folder I have a "public" folder which contains the front end and "server" folder for the back end.
In the root directory's package.json, the start script is
"start": "npm run pull && start npm run f && start npm run b",
"pull": "git pull",
"f": "cd ./public && npm run serve",
"b": "cd ./server && npm run dev"
This works perfectly fine for me to run locally, and even works with heroku locally as well using heroku local web but when I try to actually push to heroku using git push heroku main it doesn't even get past the git pull claiming:
fatal: not a git repository (or any parent up to mount point /)
I've tried simply getting rid of the git pull, but that just leads down a rabbit hole of other errors I've been trying to figure out for days and I'm hoping I'm just being dumb and missing something obvious. Any help would be greatly appreciated.
I'm going to try and list some things I've tried here:
Setting the heroku remote repository heroku git:remote -a heroku-name-here
Didn't change anything, pretty sure I already have this correct
Removing the git pull
Led to heroku not recognizing "start" sh: 1: start: not found
Removing the 'start' after git pull
Led to vue-cli-service not being found
Literally separating the back and front end into 2 separate repositories and 2 separate heroku things
This seemed to get the back end functioning, but the front end didn't seem to work. Unfortunately I don't remember exactly why but can try again if it would be helpful
All 3 comments from here: How to solve vue-cli-service: not found proplem on heroku?
I kind of fixed it kind of. Here's what I did
So I went back to the approach of kind of keeping them separate. I started by getting the server up and running.
In Heroku, I added the buildpack: https://github.com/timanovsky/subdir-heroku-buildpack.git BEFORE the heroku/nodejs buildpack to allow me to use a subdirectory rather than the whole repo
In Heroku settings, I added the config var PROJECT_PATH with the value server - In this case, server was the sub-directory immediately under my root
In vue.config.js of my front end, I changed the outputted build path to go INTO my server folder, using outputDir: path.resolve(__dirname, "../server/front-end")
In mongodb, under "Security" in "Network Access" which can be found towards the left in the navigation, I added the IP address 0.0.0.0/0 which I believe basically lets anyone access it. This might not be the most secure but it works.
Finally, this basically merged all my routes together which causes chaos because if I had a front end route /test-route and a back-end route /test-route it would like break which made sense. So I simply changed my index.js back end routes to go to /api/ instead of / so kind of like this
const mutators = require("./routes/mutators");
app.use(router.use("/api/", mutators));
Then at the end of my index.js file, I added
app.route("/*").get(function(req, res) {
res.sendFile(path.join(__dirname + "/front-end/index.html"));
});
so that front end routes like /test-route would then actually go to the site.
Related
When go to the url given, something like this: https://master.xyz.amplifyapp.com/, I get 404 page not found. I don't need my own domain for this proof of concept. I also tried https://master.xyz.amplifyapp.com/poc (see my directory structure below). Same result.
Previous steps taken:
The directory was originally created by doing a clone of an empty AWSCodeCommit repository.
I ran create-react-app poc, and when I do npm start in the "poc" directory, it shows fine in the browser with this url: http://localhost:3000/ (Note at bottom of this post, I did the same thing with a NodeJS RESTAPI and got the same result).
This is my directory structure, and from there I did:
git add -all
git commit -m"first checking"
git push
In AWSCodeCommit I can browse the repository and see the code there.
This is the result of connecting CodeCommit to Amplify:
I'm expecting to see the same thing from the provided URL (https://master.xyz.amplifyapp.com/) as I do on my local machine (localhost:3000).
I had one idea. I copied the poc directory up to the main directory, committed, pushed, saw it rebuild/deploy, and tried again, but same result.
NOTE: I have gone through the same exercise with a simple NodeJS REST API. It also gets the "page not found".
Local: http://localhost:8080/api/books
returns: [{"title":"Harry Potter","id":1},{"title":"Twilight","id":2},{"title":"Lorien Legacies","id":3}]
With Amplify:
https://master.xyz.amplifyapp.com/api/books
gives "404 page not found".
I was thinking the problem with the React was that it was a regular React app, and not a Native-React application. But now I'm getting same issue with a simpler nodeJS application, and no idea what to try next.
This is the video that gave me the ideas to get it working, even though I'm not using Cognito. https://www.youtube.com/watch?v=g4qKydnd0vU
The first videos made no mention of installing and running amplify locally.
So I installed amplify on my Windows laptop. Then basically had to run these commands from the windows command prompt:
npm install -g #aws-amplify/cli
amplify configure
amplify init
When I ran the second command, it created another amplify app in AWS. Fortunately, my first project had dashes in it, and this one did not, so they didn't conflict. (I will go back and either delete my originals or try to get them working later).
Many of the videos demonstrate with GitHub, but I was using CodeCommit.
If you get an error in the Build phase that says "The requested URL returned error: 403", that means there is an access issue to your code library. I solved that by changing the "Service role" of my Amplify app to one that I created previously. If you respond with comments to this answer, there's a good chance that I won't have any answers.
amplify configure:
(I used an existing username that I had already created for the first attempts. If you haven't done that, I think you would need to do it so you have the data to paste in for user, access code, and secret.
amplify init:
So this is what I did to get it up and working (for both React and my NodeJS api backend). I have much more reading or watching videos and experimenting ahead to learn more about it. There were many videos that created the apps in the AWS web console, without using the command line "amplify config" and "amplify init" commands. Nobody answered this question for about 4 days, so it seems like maybe it's still new and not so popular yet.
I'm still having a minor issue on the NodeJS api/backend that I will figure out next. For this url: https://master.xyz.amplifyapp.com/api/books/ it returns:
<Error>
<script/>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>1Z3T564T3SSGXJQE</RequestId>
<HostId>mx8RKnqMS1MDe0oOiZ0it3A1sL0bRXHsdZrL5IBuin9S2llrwLFNI+y=</HostId>
</Error>
This is possibly indicative of a "page not found", and needs redirects to solve as discussed in this StackOverflow. The NodeJS code is a simple example that does this:
app.get('/api/books', (req,res)=> {
res.send(books);
});
I did the following which caused another build/deploy, but access denied error is still happening:
git status (I see new Amplify folder)
git add --all
git commit -am"after amplify config/init"
git push
My package.json contains this, among other settings:
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "node index.js",
"prod": "node index.js"
},
I made a website with Vue.js and included Snipcart API for a buy button. I've been trying to deploy it to heroku for 2 days now.
When I enter $ npm run dev it works fine and will display my web app. But for some reason if I do $ node server.js it shows the default Vue welcome page for its webpack ("Welcome to Your Vue App").
I've tried entering "start":"npm run dev" in my package.json but that just results in a forever loading web page. If I enter "start":"node server.js" It results in the same thing as the previous paragraph, it just shows the default Vue welcome page.
I found someone with basically the same issue (How to set up vue(2)-cli app to run with nodejs server) and even tried the same tutorial post but I don't know what that comment/answer is talking about. I am also unsure of how to deploy a static website with a Snipcart API (as a previous user mentioned to me in a previous post).
I am really at a loss as to what to do. Thanks for your time.
Edit: Here is the repo for my app: https://github.com/Taikon/MaroonRiver0
Exactly what I suspected in the comment: You are not building your assets.
Run
npm run build
node server.js
And it should work as expected.
thanks for taking time to help me
im deploying a nodejs express js project
these are the steps that i have done:
1- change the port to: process.env.PORT
code:
const PORT = process.env.PORT || 9000;
app.listen(PORT , function() {
console.log('Application is listening on 9000');
});
2- create Procfile with: web: node server.js
3- make sure in package json the npm start command points to "node path/server.js"
the server works locally
4- important note: I am sending an AJAX request from my front end to the server to get data
I have read on you documentation that i should add 0.0.0.0
$.ajax({
url: "0.0.0.0/hotels",
cache: false,
type: 'GET',
success: function(result) {
bla bla ....
}
});
also i have tried to add the url of heroku the one i get after creating
thanks in advance
have a great day
did not solve it yet but i organized some helpful heroku commands
useful commands
git remote -v
git remote rm heroku
heroku create
git push heroku master
heroku ps:scale web=1
heroku open
heroku logs --tail
heroku run bash
Your code there looks fine (except 0.0.0.0 -- just use a relative path like /). I would ensure you've actually pushed the changes you have there. If you run heroku run bash, do you see your Procfile? When you run node server.js in that environment, does it run successfully?
I've seen Heroku customers get stuck on an issue like this, when the reality is that the code they have locally wasn't properly sent to Heroku.
Hello #jmccartie thank you for replying but it still does not work
could it be the static __dirname? im starting to question every part of the code :D
I changed the path and just to make sure i understood correctly
it used to be : "http://localhost:9000/data/hotels"
now is: "/data/hotels"
would you mind taking a look at my code?
just double check the parts i mentioned
https://github.com/hibaAkroush/herokuNode
i will name the files to make it easier for you
1- Procfile in the root
2- server in server/index.js line 24
3- the front end (where im sending an ajax get request) client/home.js line 6
4- packagejson line 10: "start": "node server/index.js"
thanks
ok i fixed it ...
wohoo!
not sure which thing i made fixed it
but what i did was:
1- I moved the server to the root and of course changed the code a bit so it would still work than i tested it locally to make sure
2- pushed on github
3- added ./ to procfile so it became
web: node ./index.js
instead of web: node index.js
thanks everyone !
I'm trying to deploy my Django app on Heroku, that makes use of the Blockchain.info API V2 (https://github.com/blockchain/service-my-wallet-v3) and thus needs to run blockchain-wallet-service in the background, which in turn needs Node.js and npm installed.
On localhost, I have used this API successfully by running the service on my own machine, but I'm having trouble deploying to Heroku. Firstly, I assume I will need to run the service on a separate dyno, and that I will need node and npm installed on my instance.
Can someone tell me how to achieve this? I'm new to more advanced features of Heroku, I've tried to use the nodejs buildpack but I doubt this is the correct way. There is also this: https://elements.heroku.com/buttons/kmhouk/service-my-wallet-v3 which I've deployed as a separate app but I've failed to merge it in some way to my Django app.
Any help is much appreciated!
I had this exact same issue, bro, and i finally got some light in the end of the tunnel.
I've cloned the https://github.com/blockchain/service-my-wallet-v3 repository and deployed it to heroku and made some changes on "package.json" file. The problem is that (in heroku) you need to declare the dependencies on package file. I've added these lines:
"dependencies": {
"blockchain-wallet-service": "~0.22.4",
}
and a script to test in the deploy:
"scripts": {
"postinstall": "blockchain-wallet-service -V"
}
Also, by cloning this repository, i needed to add this line too:
"license" : "(ISC OR GPL-3.0)",
hope it works for you
I'm reasonably new to node, git, github and Heroku and I'm struggling to work out the best way of sending my application to Heroku without cluttering up the repo with my compiled, minified app and without doing too much in Heroku.
My node.js project looks a bit like this:
- client
... code
- server
... code
- node_modules
- package.json
- gulpfile.js
- dist
- client
- server
Everything apart from node_modules and dist goes into github.
The gulpfile compiles, minifies and concatenates everything ready for release in dist.
How do I push just the dist folder to Heroku, without also putting it into github? What is best practice? I'd rather not send my gulpfile to Heroku as it means moving the devDependencies in package.json and using a post update script, as it ties the project to Heroku more than I'd like.
Reasons for not using post hook are summed up well in these two posts: https://stackoverflow.com/a/15050864/344022 & https://stackoverflow.com/a/21056644/344022, unfortunately they don't provide an easy to understand alternative.
Heroku now has a static buildpack in development to handle this (see https://github.com/heroku/heroku-buildpack-static)
Create a static.json file to use the files from dist/ with .html suffix and to re-route all calls back to the SPA
{
"root": "dist/",
"clean_urls": true,
"routes": {
"/**": "index.html"
}
}
Extend package.json scripts to ensure dist/ directory is built, for example
"scripts": {
...
"heroku-postbuild": "gulp"
}
So that dev dependencies from package.json get installed
heroku config:set NPM_CONFIG_PRODUCTION=false --app
Multiple build packs so you can build and deploy
heroku buildpacks:add heroku/nodejs --app <app_name>
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static.git --app <app_name>
Your procfile can be empty in this case.
I had the same problem of pushing only the dist folder to heroku app, Right now I am using a different approach, not sure the idle one, but it works for me. I created a deploy file and added the below code
import {spawnSync} from 'child_process';
function deploy(){
options = {
cwd: path.resolve(__dirname, './dist')
};
//push dist folder to deploy repo
console.log('Initialising Repository');
spawnSync('git',['init'],options);
console.log('Adding remote url');
spawnSync('git',['remote','add', remote.name, remote.gitPath],options)
console.log('Add all files');
spawnSync('git',['add','.','--all'],options)
console.log(`Commit with v${version}`);
spawnSync('git', ['commit','-m',`v${version}`], options)
console.log('Push the changes to repo');
spawnSync('git', ['push', '-f', remote.name, 'master'],options)
}
kept repo iformation in package.json and read here, I am running this after a webpack build task. So this will push my new build to heroku. Even if the .git inside dist gets deleted it will take care of it.
Go on, set up a post hook on heroku which builds you app and copies the files to where they'll be served. This is fairly normal practice, and once it's set up all you need to do is a git push to deploy your app, which is really rather handy. The alternative is to have a separate repository which you manually copy the files to and push from, but that doesn't seem as slick to me, greater chance of human error by messing up the dependencies, or forgetting to delete generated files which are no longer needed etc.