Mise en ligne site web en Node JS sur Heroku
Alex Salicki
Bonjour à tous ;)
J'ai créer mon portoflio sous NodeJs avec Vue JS également. Je souhaite mettre mon portfolio en ligne et j'ai choisi " Heroku " qui me parait simple d'utilisation. Mon portoflio fonctionne parfaitement bien en local.
Mon problème
J'ai suivi tout le tutoriel de mise en ligne avec "Heroku " et j'ai bien push mon projet github vers Heroku. J'ai également bien ajouté le fichier "Procfile" que Heroku a besoin . Mais lorsque je lance mon app depuis ce lien : http://alexsalicki.herokuapp.com/ , j'obtiens l'erreur " Application error " .
J'ai également éssayé de mettre en ligne mon app avec Amazon Lightsails et ca ne marche pas non plus.
Voici mon code
index.js
'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: true
},
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}
Entourez votre code pour bien le mettre en formepackage.json
{
"name": "app",
"version": "1.0.0",
"description": "Portfolio",
"author": "Alex Salicki <salicki.alex@gmail.com>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
"dependencies": {
"ev-emitter": "^1.1.1",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"gsap": "^1.20.4",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"scrollmagic": "^2.0.5",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
Main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
//import the vue instance
import Vue from 'vue'
//import the App component
import App from './App'
//import the vue router
import VueRouter from 'vue-router'
//tell vue to use the router
Vue.use(VueRouter)
/* eslint-disable no-new */
//import the hello component
import Hello from './components/Hello'
//import the about component
import About from './components/About'
import Manners from './components/Manners'
import Tabloo from './components/Tabloo'
import Paul from './components/Paul'
import Euroservice from './components/Euroservice'
//define your routes
const routes = [
//route for the home route of the webpage
{ path: '/', component: Hello },
//route for the about route of the webpage
{ path: '/about', component: About },
//route for the about route of the webpage
{ path: '/projects/manners', component: Manners },
//route for the tabloo route of the webpage
{ path: '/projects/tabloo', component:Tabloo },
//route for the paul route of the webpage
{ path: '/projects/euroservice', component: Euroservice },
//route for the euroservice route of the webpage
{ path: '/projects/paul', component: Paul },
]
// Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = new VueRouter({
routes, // short for routes: routes
mode: 'history'
})
//instatinat the vue instance
new Vue({
//define the selector for the root component
el: '#app',
//pass the template to the root component
template: '<App/>',
//declare components that the root component can access
components: { App },
//pass in the router to the vue instance
router
}).$mount('#app')//mount the router on the app
//typical import
import {TweenMax, Power2, TimelineLite} from "gsap";Le code complet de mon App est disponible sur Github : https://github.com/Alexsalicki91/website/tree/master/portfolio-1/spa
Je suis débutant en code et je n'arrive pas comprendre d'ou peut venir le problème !
Y il y a t'il des erreurs suspectibles dans mon code que l'app ne fonctionne pas en ligne alors qu'elle marche en local ? Des élements que j'aurais oublier ? Me suggérez vous d'utiliser un autre hébergeur ? Que me conseillez vous de faire ?
Bonne soirée à tous ! :)
Alex Salicki
