When I do npm run serve in my project, I have some videos in
myVueProject
public
videos
hello.mp4
In my Vue template I have
let a = this.name
this.videoName = '/videos/'+a+'.mp4';
//produces /videos/hello.mp4
//I dynamically change the video src in template
<source :src="videoName" type="video/mp4"
This works fine, but when I do npm run build, I get the following structure
css
fonts
videos
hello.mp4
js
index.html
and I copy all the above to the public folder of a node server
server.js
public
contains the above structure
conections
setups
The app is now served via node server, everything works fine, but the videos are not found
What am I missing here? I am confused about the settings.
Feel free to ask me any details I did not include
Thanks
When generating a new project using Vue CLI v.4.0.0 everything is bootstrapped nicely with an index.html file, a couple of .vue files, several configuration files and finally a main.js file. But since the HTML-file does not reference main.js I wonder how Vue knows to look for main.js. Is it implicitly understood by Vue or is there a binding somewhere that tells Vue to look for a file named "main.js"?
Vue CLI runs on Webpack.
Webpack requires an entry file.
You can overwrite the entry file by creating a vue.config.js file at the root of your project and adding:
module.exports = {
configureWebpack: {
entry: {
main: './src/overwritten-main-file.js'
}
}
}
See the Vue.js Configuration Reference for more info
I have two repos:
A Vue client interface;
A NodeJS socket and web server.
I need to serve the built files of the Vue interface with the server and don't know how to proceed...
I have two ideas of how to solve this:
Create a script that would clone the Vue repo, build it and move the
builded files in a folder server by the server.
Declare the Vue repo as a dependency of the server and find a way to
build and access to the dependency files.
The second one seems cleaner but I don't know how to begin approaching this. Could someone please provide some thoughts on the better approach and how I might get started?
You've tagged git so I'm going to say use approach 2 but use git sub-modules. You could create some sort of webpack task to build your Vuejs project within the Vuejs repository. Then you can submodule your vuejs repository to the web server / socket project.
You can then use some sort of gulp or webpack script to call into the vuejs project to instruct it to build. Once that is built you can use the express.static function to serve up the build from your web server on whatever route you want (probably just the / route).
With submodules you can simply bump the submodule when you're ready to do a new release of the frontend and then re-deploy the web server with the new version of the dependency. This is how the Ghost project do their frontend deployments.
Git Submodules documentation - https://git-scm.com/book/en/v2/Git-Tools-Submodules.
Here's how I do it with Express:
const express = require("express"),
path = require("path"),
app = express()
const DIST_DIR = path.normalize(__dirname + "/../../VueOutputDir")
app.use(express.static(DIST_DIR))
This will automatically serve the index.html and the assets from the VueOutputDir directory.
I want to host my app outside of node JS, but I want to use .vue files and possible npm as build system (if it's needed). Is it's possible to do?
I do not need any backward compatibility and if it work on latest Chrome dev it's ok for me.
Is there any examples how it can be done?
I tried to build some webpack template, but it's work only inside NodeJS. On other server I am getting 404 when I am accessing to URLs that placed in .vue files. It's seems that they can't be handled by the other server.
VueJS app is not NodeJS app.
VueJS app is interpreted by the browser.
You just have to build your app on computer and host files as any static website, so any server can serve html and files.
To build your app use e.g. Webpack (https://github.com/vuejs-templates/webpack )
NodeJs only use to build *.js files in front-end, your WebApp dosen't have to run on Nodejs.
1, You can create a index.html file that requires *.js file when webpack built it.
2, Use Chrome to open your index.html file so you can see it works.
You don't need to use vue-cli or other servers if you only want a static page.
But you have to know how to set your webpack.config.js, you can look that doc https://webpack.js.org/guides/getting-started/
Your starting point is wrong. Vue + node.js can build a complete site. Vue is the front-end framework, node's server language. The two can be used in combination. But not vue must rely on node to use. The two of them can be perfect to achieve the front and back separation of the development model.
In projects that use vue, individuals do not recommend configuring webpack and vue-loader separately. You can directly use vue official scaffolding, vue-cli. Do not have to consider these configurations, automatically configured.
Vue-cli
If you just started learning Vue, here's an entry-level demo. Although it is only a small application, but it covers a lot of knowledge points (vue2.0 + vue-cli + vue-router + vuex + axios + mysql + express + pm2 + webpack), including front-end, back-end, database and other sites Some of the necessary elements, for me, learning great significance, would like to encourage each other!
Vue Demo
Best way to develop Vue app is run dev server, and after all just build static assets. You don't need use vuex files, even better is use static template because you can easily integrate it with some back-end (WordPress or whatever).
Helpfully will be use some starter, for ex. Vue.js starter
It's true that vue will create static html pages when you run the build script. However, you will need to serve the files from a small server for the site to work. If you notice, when you run npm run build, the terminal will print a notice...
Tip:
Built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.
You can create a simple http server in your /dist directory with express and then host your site somewhere like Heroku.
Take a look at this article https://medium.com/#sagarjauhari/quick-n-clean-way-to-deploy-vue-webpack-apps-on-heroku-b522d3904bc8#.4nbg2ssy0
TLDR;
write a super simple express server
var express = require('express');
var path = require('path');
var serveStatic = require('serve-static');
app = express();
app.use(serveStatic(__dirname));
var port = process.env.PORT || 5000;
app.listen(port);
console.log('server started '+ port);
add a postinstall script in a package.json within /dist
{
"name": "myApp",
"version": "1.0.0",
"description": "awesome stuff",
"author": "me oh my",
"private": true,
"scripts": {
"postinstall": "npm install express"
}
}
push only your /dist folder to heroku after you've compiled your site.
proof: I've followed these steps to host my vue.js project
using vue files without NodeJS (nor webpack) is possible with vue3-sfc-loader.
vue3-sfc-loader
Vue3/Vue2 Single File Component loader. Load .vue files dynamically at runtime from your html/js. No node.js
environment, no (webpack) build step needed.
vue3-sfc-loader will parse your .vue file at runtime and create a ready-to-use Vue component.
disclamer: author here
Could you try something as simple as an S3 bucket setup for web serving? How big is your project? How much traffic do you think you'll get? If it's very small, you may be able to host on S3 and use webpack, etc.
I'm currently trying to deploy a hapi.js app to heroku with this file structure:
.git
client
server
The hapi.js server is inside the server folder along with it's package.json file, node_modules and all that stuff.
Inside the client folder, I have all the front-end related things (small angular app with bower_components and a gulp script to inject everything). The server.js from /server is serving both the bower_components and the angular app related files.
My current problem is that, obviously, Heroku doesn't find a way to deploy my app because of its structure, since it needs to have the server and package.json on the root of the project (which i'm trying to avoid at all costs).
So far I tried to put on my Procfile the following:
web: node server/server.js
but unfortunately it didn't let me push because it didn't match any of its buildpacks.
Have you add .bowerrc file
.bowerrc file contains
{
"directory": "client/bower_components"
}
and add bower.json in root.