Deploying to vercel - node.js

Hello i'm having issues deploying my website/app to vercel. It's a node/express backend and a create-react-app front end.
I should start by saying that localy everything works perfectly.
As for deployment, when vercel builds it, in its build logs appears this line "Warning: Due to builds existing in your configuration file, the Build and Development Settings defined in your Project Settings will not apply. Learn More: https://vercel.link/unused-build-settings".
Not only that, when visiting the vercel it appeears 404 not found. (https://note-keeper-node-backend-2gbi1g75b-orlandovsilva.vercel.app/)
Also followed this tutorial (https://dev.to/andrewbaisden/how-to-deploy-a-node-express-app-to-vercel-2aa).
What could the issue be?

For 404 not found in vercel try to put in Settings->Project Settings->Environment Variables->Add New
Name field => CI
VALUE field => false
This works for me. Resolve 404 problem in vercel deployment.
Verify if you put Root Directory of your project correctly.

Related

Hi, having problem to deploy my project - Netlify and Vercel or other free suggestion?

I can't deploy my node/express project with Netlify or Vercel.
I did on Heroku but it is finishing the free plan so I want to move my project to other free host.
The path of app.js(index.js) is /src/app.js
And the path of index.ejs is /src/views/pages/index.ejs (I use EJS template engine)
On Heroku I don't need to do any config to deploy with success.
I did some research and tried to created config files vercel.json and netlify.toml but don't help and honestly I don't understand all that these config files are doing.
I know that is a route path files problem, any config that I have to do to deploy.
Are there any better free host like netlify and vercel?
Thank you.

First attempt at AWS Amplify with NodeJS gives 404 page not found

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"
},

buildpack error deploying node.js app to heroku - files seem to be at the correct level>?

I am getting an error in the screen shot bellow deploying a node.js app on heroku saying that the buildpack was unable to detect a node.js codebase
I set the build pack, the package.json is at the root level as is the app.js file
https://www.dropbox.com/s/y1bg6eir2w93m8a/Screenshot%202020-05-29%2013.44.36.png?dl=0
Not sure what I am doing wrong - thanks!!
The error is clear:
A Node.js app on Heroku requires a package.json.
In the files listed below, you can see that the package.json file is missing. You have to commit it and repush your code to Heroku.

Vuejs and Nodejs deploying to heroku: $ npm run dev works but not $ node server.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.

"Failed to load resource: net::ERR_CONNECTION_REFUSED" for assets, css, app.js and vendor.js in production (react, babel, webpack)

I am setting up a copy of steemit cllient from https://github.com/steemit/steemit.com.
everything works in development environment but when I try to run same in production following steps provided in github repo, it gives error in console : "Failed to load resource: net::ERR_CONNECTION_REFUSED"
I am unable to relate this issue to anything. I am relatively new to webpack. Any help will be appreciated.
fixed it by removing "content="upgrade-insecure-requests" from server-html.jsx so that i can test production on local. it's useful for production. if anyone wants to look into it, i found details here: https://googlechrome.github.io/samples/csp-upgrade-insecure-requests/

Resources