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.
Related
I deployed my nodejs app to Heroku
My project folder structure is as below
folder structure
Server.js
Server.js code
After deployment I am getting above error as no such file or directory /app/index.html
I tried running run bash command to check folder structure on Heroku but it doesnt show me app folder at root path
Heroku run bash output
wondering why I can't see app folder above where it is coming from?
Appreciate your help.
Your index.html has a caps, you called it Index.html.
If you are using windows just notice you might have to delete Index.html, then push your project without it, then push it again with your file correctly named (index.html).
You are not seeing app/ because you are inside of it.
I’m experiencing problems deploying a Vue JS app built using the Webpack CLi to work.
If uploaded in a root directory everything renders fine, but inside a subfolder, all the links break.
I want deploy VueJS App to this url :
https://event.domain.net/webinar
I have added publicPath in vue.config.js :
var path = require(‘path’)
module.exports = {
publicPath: ‘./’
}
But only the css and js folders point to the path /webinar.
For assets, fonts and others still point to the subdomain https://event.domain.net.
CSS and JS point to path /webinar
Asset, fonts still point to subdomain https://event.domain.net/
Console
use value of publicPath as /webinar that should work.
More details are here https://cli.vuejs.org/config/#publicpath
you can configure publicPath even based on environment.
Sagar Rabadiya pointed you to the right link:
create a file called vue.config.js in the project root (where your package.json is located).
prompt the following code snippet inside:
module.exports = {
publicPath: process.env.NODE_ENV === 'production'? '/your-sub-directory/' : '/'
}
and save the file.
Open a terminal and navigate to your project, then run npm run build to generate a production build from it.
As soon as the production build has been generated, copy the contents from it and paste it in the sub-directory you created in the root folder. For example, if you use Apache, the default root directory is the htdocs folder. I've also created a virtual host on the server, maybe you also need to do this.
Open the browser and type the address where your sub-directory lives. For example: http://your-server-url:your-port/your-sub-directory/ Your should see your app now.
Goal: I have created the start of a React project and wish to test it on my server (hosted by goDaddy, uploading via cPanel). My app works fine in Development Mode.
Question: I have ran npm build which has created a build folder, but what files am I supposed to upload to my server? I tried putting the entire contents of the build folder on, but it still says the site is not launched. Is this because there is no index.html file generated? Currently my build folder contains: assets.json, LICENSE.txt, package.json, server.js, yarn.lock, chunks/ and public/. Is there supposed to be an html file generated? Or should these files be sufficient to deploy the website given that it works in development mode?
Thanks for bearing with me, this is the first time I have tried to deploy a React App and likely have several fundamental misunderstandings of how it works. Also if anyone is willing to chat for several minutes so I can ask a few questions about my project and react let me know - much appreciated!
Hello
Dear,
If you can try to change your package.json file and add ("homepage": "http://yourDomain/",) like this
"version": "0.1.0",
"homepage": "yourDominUrl",
Like
"homepage": "http://yourDomain/",
and
build again
npm run build
and the build folder is only should be uploaded file
Your answer is much more simple than appears: Just run npm run build, then just upload that whole folder to your GODADDY server. Importantly, you must place your index.html (or app-name.html) directly on the / public path defined by your URL's DNS. So, Top-level has your single entry point index.html that points to folder build/ to get your xyx.main.js and the xyz.main.css ...
and that's it! easy as pie
I'm very new to Polymer. i read this official polymer documentation and downloaded a code sample and ran it using polyserve without modifying the code.I followed instructions given in polymer-project website. I installed every required components but after running polyserve command, it shows a page with 'Not found' text. Please help me.
I've installed npm 3.3.6,node v5.0.0.,gulp 3.9.0 and bower 1.7.7. All the commands are running fine without any error. I can't understand what exactly is going wrong.Am i missing something?
Polyserve output
Start server and try: http://localhost:8080/components/icon-toggle/demo/
Your folder structure should look like this:
[folder-path]/polymer-first-elements
README.md
bower.json
bower_components
demo -> contents: icon-toggle-demo.html & index.html
icon-toggle-finished
icon-toggle.html
Make sure the default port used by polyserve (3000) is not busy,you can use polyserve -p 8000 to try other port
You don't say what URL you are trying to access in the browser, but the sample code doesn't have any index.html file at its root, so accessing it there will fail.
There is an index.html in the demo directory, so you might have to add that to the url to access it.
I found I needed to add the following line to the <head> element of /demo/index.html:
<link rel="import" href="/bower_components/polymer/polymer.html">
Then view http://localhost:8080/demo (note the trailing "demo").
I'm trying NodeJS for the first time.
I'm following the hello world instructions at https://github.com/angular/angular-seed and https://github.com/thedigitalself/angular-sprout (which has the same hello world instructions for a slightly modified fork of the first one).
In both cases, I'm supposed to just run a web-server.js file that is included in the repo using Node and then navigate to http://localhost:<port>/app/index.html
This gives me a 404 error page (which is written in the web-server.js file), as does just /app/.
But if I navigate to http://localhost:<port> I get a directory listing for the filesystem directory where the web-server.js script is, which is also written in web-server.js.
Any idea why web-server.js cannot find /app/ or /app/index.html?
Make sure you run the server from your root directory.
~/angular-seed/
In here you do node scripts/web-server.js
Then you can visit
http://localhost:<PORT>/app/index.html