Following a course on Nuxt, I have chosen the SSR route when creating this application, separating admin, client and server into their individual files. This is the file structure:
- amazon-clone
- admin
- client
- server
The course material does not cover pushing to git or deploying to Heroku.
I have followed the steps as per Nuxt & Heroku docs, however because each file will have its own package.json and nuxt.config.js I am under the impression this will not work. As Heroku will expect a package.json in the root folder?
What is the best practise for deploying an app to heroku when client, server and admin are seperated?
The repository: https://github.com/TomBell95/amazon-clone
Heroku deployment steps:
Procfile: web: npm start
package.json: "heroku-postbuild":"npm run build"
"engines": {"node": "14.x"}
heroku buildpacks:set heroku/nodejs
heroku config:set HOST=0.0.0.0
heroku config:set NPM_CONFIG_PRODUCTION=true
I have found similar questions however nothing Nuxt specific (e.g. How to push both the client side and server side project folders together as a one project (api + front end) on github?).
I really don't see the purpose of having all of those 3 separate.
Never saw this kind of project structure and tbh, I don't even know how to host it properly.
At the end, there is a backend on this. So, you could probably split the backend (host it on Heroku) and the frontend (split it on the frontend). If you're learning Nuxt, this is probably not the way to go because it's not using a common structure from the start.
I can recommend:
Nuxt.js - Vue.js on Steroids, I took this one a while ago, it's done by Max, he is a great teacher and does a lot of great content
Mastering Nuxt is done by a Nuxt Ambassador and his team. It's very complete and plenty of good practices
Those are good resources that you can follow, which are well-known and good.
Related
I'm running a MEAN stack webapp on Heroku. I have two folders at root level, "frontend" and "backend". Each folder has their own package.json. I have built the Angular app and put it in the "backend/public" folder. I can serve the Angular app from Express and deploy it to Heroku, no problem.
And here is my doubt: the Angular code in the frontend folder has its own dependencies, but when I build the app, run it on Express, or deploy it to Heroku, is it still using those dependencies from the node_modules folder in the frontend folder? Or are these dependencies somehow injected into the built Angular app's minimized code sent to the backend/public folder, for example?
I'm having trouble finding any info on this specific doubt.
I'm trying to deploy a node application with aws via Elastic Beanstalk. The deployment is showing as successful, but when opening the webpage I receive the error message Cannot GET /.
My general project structure looks like this:
client/
server.js
Where client/ is a react application built using create-react-app and server.js is where express app.listen is defined.
I connected the frontend to the backend in the development environment using "proxy": "http://localhost:5000" in the react app's package.json.
I also added "homepage": "my-aws-url.com/client" to the react package.json since it isn't stored at the root level of the project.
Do I need to do something with the proxy in production similar to what was done in the development environment, or are there other things I'm missing?
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.
I'm new to vue and kind of confuse here.
I'm using vue-cli to build a vue app, I understand I can run a development server with npm run serve which is referenced as a script in my package.json for vue-cli-service serve
But my app need some data coming from a local node.js server. I cannot request this server from development mode because it's running on a different server.
To make my app work I'm obligated to build for production with
npm run build
Then to ask my node server to render by default the produced index.html file.
How could I combine development mode and my node server?
What would be the best way to make this work?
Thanks a lot
I stumbled across this, and found the answer buried at the bottom of the comments list, so I thought I'd highlight it.
This answer is taken from #Frank Provost comment, which really should be the accepted answer. As mentioned in his link https://cli.vuejs.org/config/#devserver-proxy all you need to do is create/edit vue.config.js file in your (client) project root to include this:
module.exports = {
devServer: {
proxy: 'http://localhost:3000' // enter dev server url here
}
}
Then start your dev server as usual from your server project:
[server-root]$ npm run dev
And run your client project from vue-cli project
[client-root]$ npm run serve
Then when you visit the client url (usually localhost:8080) all api requests will be forwarded to your dev server. All hot module replacement still works on both client and server.
I am trying to deploy a Rails 5 api with an Angular 2 front end, with the Angular code living an frontend folder inside of the main Rails project.
I was able to deploy using this tutorial (https://www.angularonrails.com/deploy-angular-2rails-5-app-heroku/), and specifically this custom Heroku buildpack (https://github.com/jasonswett/heroku-buildpack-nodejs/stargazers).
While this buildpack is absolutely awesome for existing, I am a little uncomfortable depending on the custom implementation in the long run. It also means I have to rename my frontend folder to client.
Is there a way to use the main Heroku Node buildpack, and somehow pass the path of my Angular frontend folder as an ENV variable? How would I go about doing this?
I've read through the Github conversations here (https://github.com/heroku/heroku-buildpack-nodejs/pull/192) and here (https://github.com/heroku/heroku-buildpack-nodejs/pull/203) but can't make heads or tails of it.
Please help!
the trick is to place a package.json at root with the following:
{
"scripts": {
"postinstall": "cd frontend && npm install"
}
}
substitute "frontend" with whatever folder the angular / node app is in.
See github issues discussion here: https://github.com/heroku/heroku-buildpack-nodejs/issues/323#issuecomment-227520485