I am using static middleware function to access HTML file with my express HTTP server. It works fine when I deliberately run the server.js file through node.js command line runnning in the same directory. However after using npm scripts it's not able to locate my assets whether its a HTML or any other media files.
Let me know what you think on these screenshots attached-
<https://i.stack.imgur.com/NxsfW.png>
<https://i.stack.imgur.com/xjbsx.png>
<https://i.stack.imgur.com/O2au5.png>
<https://i.stack.imgur.com/w8zIj.png>
<https://i.stack.imgur.com/po4vY.png>
<https://i.stack.imgur.com/hmB8A.png>
I am using node 10.16.0 and vue 2.6.11 and I want to have a config.js file in the node root folder, pointing to a folder that is outside the node structure
hello
hi.txt
node-project //node project
server.js
config.js
public //contains build vue
vue-project //contains not build vue
config.js should contain something like
let txtFile= '../hello/hi.txt';
exports.txtFile = txtFile;
I want to be able to keep the config.js file in node, not blended in vue, but have build vue (inside public folder) also able to read it
Ideally I would like to read config.js from vue-project and when I do npm run build , I can also read config.js from public (where I put the builded vue project)
Here is my failed, over-complicated attempt
Since everything you put in the public folder of a vue project it gets passed to the build, and the path changes automatically during build, I did this
hello
hi.txt
node-project //node project
server.js
vue-project //contains not build vue
public
configs
config.js //contains ../../../../hello/hi.txt
src
views
Home.vue //imports configs/config.js
and when I did npm run build the above becomes
hello
hi.txt
node-project //node project
server.js
public //contains build vue
css
js
fonts
configs
config.js
index.html
So the config.js automatically transfered to the build vue, the path to config.js is automatically changed and the config.js is in the node, easily accessible, only one sub-folder away, not blended in the vue js.
The problem is that now config.js changed position, so I have to manually change its content to
let txtFile= '../../hello/hi.txt';
I thought that its alright, small price to pay, its just a single manual change.
But the problem is that Vue does not read the changed value. Its still reads ../../../../hello/hi.txt and not '../../hello/hi.txt . Restarting node does not help. I guess vue caches the value?
Please advice. I hope my example helped you understand what I want to do. Feel free to ask me anything that will help you clarify
Thanks
Neutralinojs is really good thing. I trying write app using vue and neutralino. Vue without router working good. But if I add vue-router and httpVueLoader to project my app is not working.
I do following: write vue app and locate it in app folder of neutralino project. All files exclude index.html located in app/assets
Next I run http-server app/ and view my app in browser. All right, no errors in console. Next I run ./neutralino They open the browser, show my app page without a router-vue components and I see error in console:
It's look like neutralino client can't receive vue component c1.vue from server
You can download my neutralino project for reproduce this error
Ok, learning here. Installed the default vue-cli app on AWS. I do a npm run build. When I launch the default index.html I'm served a blank page. If I go into dist, there is another index.html, that serves links to js files, but still a blank page.
I'm guessing webpack wants me to launch an index.html, but don't see how I can hit that with a browser. No errors anywhere. But no Hello World either. thanks for help.
What I'm seeing in the browser:
<!DOCTYPE html><html><head><meta charset=utf-8><title>hello-world</title><link href=/static/css/app.87e65e7c83fb67c04e58d4461a7fd8e8.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/static/js/manifest.fa7eecfb52900d1cfb0a.js></script><script type=text/javascript src=/static/js/vendor.9baeef453ba99a70f46a.js></script><script type=text/javascript src=/static/js/app.cdfbb21001bbc43de4bc.js></script></body></html>
When you npm run build Webpack should produce an index.html file along with a static/ directory that contains all of your javascript and css. The link to static/ is an absolute link (i.e. http://example.org/static). When you try to open index.html as a file, the browser will look for the /static/ folder on the root of your file system, which of course it won't find.
To run it locally you need to fire up an http server locally. One option is to cd into the directory with a terminal app and run python -m http.server. Then go to http://localhost:8000/. That should work because the root of the directory tree will be the folder from where you are serving it.
Getting it running on AWS S3 will be a matter of making sure you get the static directory in the right place and get the links pointing to it. Hard to say exactly how without knowing details of how you are organizing the site in your bucket.
You can change how the static folder is saved in the webpack config if you need to: https://vuejs-templates.github.io/webpack/static.html
You will find a folder named /dist in your project directory.Just point the index.html file within the /dist directory and rest will work fine I think. I have just done that and it's working fine.
Hope it will work.
Thanks.
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.