I’m trying to deploy my ecommerce nuxt app to heroku. Here’s exactly what I did
heroku create myapplok heroku buildpacks:set heroku/nodejs -a myapplok heroku config:set HOST=0.0.0.0 -a myapplok /// everything works fine
then
$ git init $ heroku git:remote -a myapplok $ git add . $ git commit -am "make it better" $ git push heroku master
I followed exactly what the heroku website did list. Everything works
remote: -----> Caching build remote: - node_modules remote: remote: -----> Pruning devDependencies remote: removed 61 packages and audited 1552 packages in 10.915s remote: remote: 80 packages are looking for funding remote: run `npm fund` for details remote: remote: found 991 vulnerabilities (2 low, 294 moderate, 694 high, 1 critical) remote: run `npm audit fix` to fix them, or `npm audit` for details remote: remote: -----> Build succeeded! remote: -----> Discovering process types remote: Procfile declares types -> web remote: remote: -----> Compressing... remote: Done: 305.4M remote: -----> Launching... remote: ! Warning: Your slug size (305 MB) exceeds our soft limit (300 MB) which may affect boot time. remote: Released v6 remote: https://myapplok.herokuapp.com/ deployed to Heroku remote: remote: Verifying deploy... done. To https://git.heroku.com/myapplok.git 9cca5b7d..2e1cd57d master -> master
Once I visit the link, however, I get an error:
After following the heroku tail command, the app keeps crashing with the following error
2021-09-06T09:39:31.000000+00:00 app[api]: Build succeeded 2021-09-06T09:39:33.604061+00:00 heroku[web.1]: Starting process with command `: nuxt start` 2021-09-06T09:39:35.640203+00:00 heroku[web.1]: Process exited with status 0 2021-09-06T09:39:35.707305+00:00 heroku[web.1]: State changed from starting to crashed 2021-09-06T09:39:35.716203+00:00 heroku[web.1]: State changed from crashed to starting 2021-09-06T09:39:48.890905+00:00 heroku[web.1]: Starting process with command `: nuxt start` 2021-09-06T09:39:51.075210+00:00 heroku[web.1]: Process exited with status 0 2021-09-06T09:39:51.245879+00:00 heroku[web.1]: State changed from starting to crashed 2021-09-06T09:39:52.472722+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=myapplok.herokuapp.com request_id=b15eba30-cc5b-4d9c-9bf1-293ae69e017d fwd="197.115.205.238" dyno= connect= service= status=503 bytes= protocol=https
Now i know that this problem has already been solved with this command in my nuxt config app
server: {
port: process.env.PORT || 4002,
},
I did add the process.env.port command but I’m still getting this error.
my nuxt config file
export default {
ssr: false,
head: {
titleTemplate: 'Lokazz',
title: 'Lokazz',
meta: [
{ charset: 'utf-8' },
{
name: 'viewport',
content: 'width=device-width, initial-scale=1'
},
{
hid: 'description',
name: 'description',
content:
'Lokazz'
}
],
link: [
{
rel: 'stylesheet',
href:
'https://fonts.googleapis.com/css?family=Work+Sans:300,400,500,600,700&subset=latin-ext'
}
]
},
css: [
'swiper/dist/css/swiper.css',
'~/static/fonts/Linearicons/Font/demo-files/demo.css',
'~/static/fonts/font-awesome/css/font-awesome.css',
'~/static/css/bootstrap.min.css',
'~/assets/scss/style.scss'
],
plugins: [
{ src: '~plugins/vueliate.js', ssr: false },
{ src: '~/plugins/swiper-plugin.js', ssr: false },
{ src: '~/plugins/vue-notification.js', ssr: false },
{ src: '~/plugins/axios.js'},
{ src: '~/plugins/lazyLoad.js', ssr: false },
{ src: '~/plugins/mask.js', ssr: false },
{ src: '~/plugins/toastr.js', ssr: false },
],
buildModules: [
'@nuxtjs/vuetify',
'@nuxtjs/style-resources',
'cookie-universal-nuxt'
],
styleResources: {
scss: './assets/scss/env.scss'
},
modules: ['@nuxtjs/axios', 'nuxt-i18n','vue-sweetalert2/nuxt', '@nuxtjs/auth-next', "bootstrap-vue/nuxt"],
bootstrapVue: {
bootstrapCSS: false, // here you can disable automatic bootstrapCSS in case you are loading it yourself using sass
bootstrapVueCSS: false, // CSS that is specific to bootstrapVue components can also be disabled. That way you won't load css for modules that you don't use
},
i18n: {
locales: [
{ code: 'en', file: 'en.json' },
{ code: 'fr', file: 'fr.json' }
],
strategy: 'no_prefix',
fallbackLocale: 'en',
lazy: true,
defaultLocale: 'en',
langDir: 'lang/locales/'
},
router: {
linkActiveClass: '',
linkExactActiveClass: 'active',
},
server: {
port: process.env.PORT || 4002,
},
auth: {
strategies: {
local: {
token: {
property: "token",
global: true,
},
redirect: {
"login": "/account/login",
"logout": "/",
"home": "/page/ajouter-produit",
"callback": false
},
endpoints: {
login: { url: "http://localhost:5000/login", method: "post" },
logout: false, // we don't have an endpoint for our logout in our API and we just remove the token from localstorage
user:false
}
}
}
},
};
my package.json file
{
"name": "martfury_vue",
"version": "1.3.0",
"description": "Martfury - Multi-purpose Ecomerce template with vuejs",
"author": "nouthemes",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"heroku-postbuild" : " npm run build"
},
}
Advertisement
Answer
Remove heroku config:set HOST=0.0.0.0 -a myapplok
because your nuxt app runs in configured to run on localhost