rails new --database=postgresql --api nuxt-rails-a-la-webpacker
yarn create nuxt-app frontend
Move package.json & nuxt.config.js to the root
mv frontend/package.json package.json
mv frontend/nuxt.config.js nuxt.config.js
And tell Nuxt the app is in frontend/
in nuxt.config.js :
srcDir: 'frontend/'
Set Nuxt to run on port 8080 : package.json
"config": {
"nuxt": {
"port": "8080"
}
},
We'll deploy an app for the backend and another for frontend to Heroku So we need 2 Procfiles and tell Heroku where the Procfile is located for each app
The Rails Procfile stay at the root :
touch Procfile
echo "web: bundle exec puma -C config/puma.rb" >> Procfile
The Nuxt Procfile is in frontend folder :
touch frontend/Procfile
echo "web: npm start" >> frontend/Procfile
Create frontend app on Heroku :
heroku apps:create nuxt-rails-client --region=eu
and rename the remote frontend :
git remote rename heroku frontend
heroku buildpacks:add -r frontend https://github.com/heroku/heroku-buildpack-multi-procfile
Set the Procfile path
heroku config:set PROCFILE=frontend/Procfile -r frontend
follow this guide to set Nuxt for production
Deploy the backend
heroku apps:create nuxt-rails-backend --region=eu
git remote rename heroku backend
heroku run rails db:seed -r backend
and add API_URL for @nuxtjs/axios
heroku config:set API_URL=nuxt-rails-backend.herokuapp.com -r frontend