0

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?).

Tom
  • 59
  • 7
  • Why did you split those 3? What do they actually contain? If it's just routes, you could have keep it in the same directory. Deploying all of those 3 seems difficult indeed. – kissu Dec 01 '21 at 14:34
  • This was part of a udemy course however the lecturer has not responded for some time. Admin contains all services for admin users to update products. Client contains all client side functionality i.e. pages, components, static etc. Server contains all routes, API calls, middleware etc. – Tom Dec 01 '21 at 14:50

1 Answers1

1

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.

kissu
  • 40,416
  • 14
  • 65
  • 133
  • I thought this might have been the case... disappointing it was taught on the course but its a lesson learnt! Thanks for the course suggestions, really appreciate it! – Tom Dec 01 '21 at 17:56
  • 1
    @Tom I mean, maybe the course itself was pretty advanced or idk, but to start: rather keep it to usual common conventions and use it by default rather than messing too much with it from the beginning. – kissu Dec 01 '21 at 18:20