I have created an Angular2 app as specified in quick start guide but by using angular-cli. I created a production build using ng build --prod
Then I created a folder by the name heroes in Apache htdocs folder where I placed all the build files. So when accessing the app through http://localhost/heroes, the browser console is displaying 404 error for the js and css files
Any help would be great.
PS - I have a route in the app by the same name as the app folder name in apache i.e. heroes
In your index.html
You can change
<base href="/">
To
<base href="/heroes/">
and change
<script src="/js/shims.js?1484291198182"></script>
<script src="/js/app.js?1484291198184"></script>
To
<script src="js/shims.js?1484291198182"></script>
<script src="js/app.js?1484291198184"></script>
It's working for me
Related
My application structure is -
folder -> frontend - folder with the applications
folder -> html -> spa - and this is where I put my app that was built
There are 2 folder in 'spa' - assets and static. In static folder there are files from 'frontend -> public'.
Here is the problem
I need to add an external script, so i put in head of index.html
<script src="<%= BASE_URL %>static/js/advert.js"></script>
When I have built my app everything is fine, but locally(npm run serve) it has the wrong URL.
I tried to play with publicPath in vue.config.js and even set it up correctly by ternary process.env.NODE_ENV === 'production'. On local and built mode the file was fount, but it also has changed all of the routes(links, menu, etc).
Please help me with a work around
So, here is the solution that I figured out.
In my index.html
<script src="<%= BASE_URL %><%= NODE_ENV === 'production' ? 'spa/' : ''%>static/js/advert.js"></script>
I found this example vue project in github.
How do i deploy it in my localhost ?
https://github.com/vuejs-example-apps/tic-tac-toe
No installation required. Vue is used as a CDN in that project and all you need are
corssCircle.html
crossCircle.js and
crossCircle.css
If you are going to deploy it on your localhost, simply rename the corssCircle.html into index.html for xampp, etc. or you can just open the file in browser and it will start running.
If you open crossCircle.html you'll see that Vue is included via this line:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
If you would like to install Vue locally you can check this guide for options.
I would like to deploy my app to a virtual directory. I have been unable to figure out the correct configuration needed to run the app locally with a similar structure. For example, I'd like to run it from:
http://localhost:8080/demos
I have tried every combination of adding "demos" to publicPath and contentBase in my webpack config. The errors just between 404's on static assets and router errors from Aurelia.
It is documented by Aurelia router, you can add base tag to index.html header, <base href="/demos">, and set router root config.options.root = "/demos"; in configureRouter().
In addition, if your bundled js files are indeed served from directory, you need to modified baseDir in 2 places of aurelia.json: platform.baseDir and build.targets[0].baseDir.
I'm using vue-router in story mode.
When I run the npm run build command, I get the dist folder, and I'm using XAMMP to serve the files in local, I added the settings suggested by the site for the apache server, but the images do not load, the console appears (404 Not Found) for each image I am serving.
Route where the images are:
dist / static / images / image.png
I do not know what to change so that the images can be seen.
How can i solve this?
you can add base tag in your index.html eg:
<base href="/" />
better solution:
you can add base tag in your index.html eg:
<base href="<%= BASE_URL %>" />
the default BASE_URL is '/' but you can change baseUrl in vue.config.js or webpack.config file , if you need to.
In your dist/index.html edit the path of your css and js files. Remove the first slash
I copied my Angular 2 app on the Apache HTTP Server 2.4 in the htdocs folder, but it doesn't work.
index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Angular 2 app</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
If I try to open the index.html page in the browser, I see only the text "Loading...." in my browser.
The Angular 2 App is not displayed.
How can I fix this?
It works on my local environment right, where I am using Angular CLI. I need to find a way to make it work on the Apache HTTP Server 2.4.
The only thing I have to do locally is to run npm start.
you just need to add a point in the base href <base href="./">
You will need to create a Build if you are planning to run your app on a remote server. Use the 'ng build' command (stop npm start first). ng build will create a distributable build in the 'dist' folder in your project. You can copy the contents of this folder to your remote server.
First, install Angular CLI in your dev environnement (if not done already)
npm install -g angular-cli
Run this command to build a dist version of your project
ng build -prod
copy/paste the content of dist folder into the root of your local (or online) apache server
if you are using angular-cli follow this steps:
you need build your app for production run (this generate a folder with the name of your app) :
ng build -prod --output-path=[appname]-bh /appname/
copy your app folder into root apache server path : /var/www/html/
That's all
Regards,
Fernando.