I’m trying to deploy my ecommerce nuxt app to heroku. Here’s exactly what I did
JavaScript
x
5
1
heroku create myapplok
2
heroku buildpacks:set heroku/nodejs -a myapplok
3
heroku config:set HOST=0.0.0.0 -a myapplok
4
/// everything works fine
5
then
JavaScript
1
6
1
$ git init
2
$ heroku git:remote -a myapplok
3
$ git add .
4
$ git commit -am "make it better"
5
$ git push heroku master
6
I followed exactly what the heroku website did list. Everything works
JavaScript
1
28
28
1
remote: -----> Caching build
2
remote: - node_modules
3
remote:
4
remote: -----> Pruning devDependencies
5
remote: removed 61 packages and audited 1552 packages in 10.915s
6
remote:
7
remote: 80 packages are looking for funding
8
remote: run `npm fund` for details
9
remote:
10
remote: found 991 vulnerabilities (2 low, 294 moderate, 694 high, 1 critical)
11
remote: run `npm audit fix` to fix them, or `npm audit` for details
12
remote:
13
remote: -----> Build succeeded!
14
remote: -----> Discovering process types
15
remote: Procfile declares types -> web
16
remote:
17
remote: -----> Compressing
18
remote: Done: 305.4M
19
remote: -----> Launching
20
remote: ! Warning: Your slug size (305 MB) exceeds our soft limit (300 MB) which may affect boot time.
21
remote: Released v6
22
remote: https://myapplok.herokuapp.com/ deployed to Heroku
23
remote:
24
remote: Verifying deploy done.
25
To https://git.heroku.com/myapplok.git
26
9cca5b7d..2e1cd57d master -> master
27
28
Once I visit the link, however, I get an error:
After following the heroku tail command, the app keeps crashing with the following error
JavaScript
1
11
11
1
2021-09-06T09:39:31.000000+00:00 app[api]: Build succeeded
2
2021-09-06T09:39:33.604061+00:00 heroku[web.1]: Starting process with command `: nuxt start`
3
2021-09-06T09:39:35.640203+00:00 heroku[web.1]: Process exited with status 0
4
2021-09-06T09:39:35.707305+00:00 heroku[web.1]: State changed from starting to crashed
5
2021-09-06T09:39:35.716203+00:00 heroku[web.1]: State changed from crashed to starting
6
2021-09-06T09:39:48.890905+00:00 heroku[web.1]: Starting process with command `: nuxt start`
7
2021-09-06T09:39:51.075210+00:00 heroku[web.1]: Process exited with status 0
8
2021-09-06T09:39:51.245879+00:00 heroku[web.1]: State changed from starting to crashed
9
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
10
11
Now i know that this problem has already been solved with this command in my nuxt config app
JavaScript
1
4
1
server: {
2
port: process.env.PORT || 4002,
3
},
4
I did add the process.env.port command but I’m still getting this error.
my nuxt config file
JavaScript
1
106
106
1
export default {
2
ssr: false,
3
head: {
4
titleTemplate: 'Lokazz',
5
title: 'Lokazz',
6
meta: [
7
{ charset: 'utf-8' },
8
{
9
name: 'viewport',
10
content: 'width=device-width, initial-scale=1'
11
},
12
{
13
hid: 'description',
14
name: 'description',
15
content:
16
'Lokazz'
17
}
18
],
19
link: [
20
{
21
rel: 'stylesheet',
22
href:
23
'https://fonts.googleapis.com/css?family=Work+Sans:300,400,500,600,700&subset=latin-ext'
24
}
25
]
26
},
27
28
css: [
29
'swiper/dist/css/swiper.css',
30
'~/static/fonts/Linearicons/Font/demo-files/demo.css',
31
'~/static/fonts/font-awesome/css/font-awesome.css',
32
'~/static/css/bootstrap.min.css',
33
'~/assets/scss/style.scss'
34
],
35
36
plugins: [
37
{ src: '~plugins/vueliate.js', ssr: false },
38
{ src: '~/plugins/swiper-plugin.js', ssr: false },
39
{ src: '~/plugins/vue-notification.js', ssr: false },
40
{ src: '~/plugins/axios.js'},
41
{ src: '~/plugins/lazyLoad.js', ssr: false },
42
{ src: '~/plugins/mask.js', ssr: false },
43
{ src: '~/plugins/toastr.js', ssr: false },
44
],
45
46
47
buildModules: [
48
'@nuxtjs/vuetify',
49
'@nuxtjs/style-resources',
50
'cookie-universal-nuxt'
51
],
52
53
styleResources: {
54
scss: './assets/scss/env.scss'
55
},
56
57
modules: ['@nuxtjs/axios', 'nuxt-i18n','vue-sweetalert2/nuxt', '@nuxtjs/auth-next', "bootstrap-vue/nuxt"],
58
bootstrapVue: {
59
bootstrapCSS: false, // here you can disable automatic bootstrapCSS in case you are loading it yourself using sass
60
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
61
62
},
63
64
i18n: {
65
locales: [
66
{ code: 'en', file: 'en.json' },
67
{ code: 'fr', file: 'fr.json' }
68
],
69
strategy: 'no_prefix',
70
fallbackLocale: 'en',
71
lazy: true,
72
defaultLocale: 'en',
73
langDir: 'lang/locales/'
74
},
75
76
router: {
77
linkActiveClass: '',
78
linkExactActiveClass: 'active',
79
},
80
81
server: {
82
port: process.env.PORT || 4002,
83
},
84
auth: {
85
strategies: {
86
local: {
87
token: {
88
property: "token",
89
global: true,
90
},
91
redirect: {
92
"login": "/account/login",
93
"logout": "/",
94
"home": "/page/ajouter-produit",
95
"callback": false
96
},
97
endpoints: {
98
login: { url: "http://localhost:5000/login", method: "post" },
99
logout: false, // we don't have an endpoint for our logout in our API and we just remove the token from localstorage
100
user:false
101
}
102
}
103
}
104
},
105
};
106
my package.json file
JavaScript
1
15
15
1
{
2
"name": "martfury_vue",
3
"version": "1.3.0",
4
"description": "Martfury - Multi-purpose Ecomerce template with vuejs",
5
"author": "nouthemes",
6
"private": true,
7
"scripts": {
8
"dev": "nuxt",
9
"build": "nuxt build",
10
"start": "nuxt start",
11
"generate": "nuxt generate",
12
"heroku-postbuild" : " npm run build"
13
},
14
}
15
Advertisement
Answer
Remove heroku config:set HOST=0.0.0.0 -a myapplok
because your nuxt app runs in configured to run on localhost