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.
Related
i'm new in npm and i'm trying to migrate from an old logic like:
<head>
<script src="./assets/jquery-countdown/jquery.countdown.min.js?v=2.1"></script>
<script src="./assets/lazyload/jquery.lazy.min.js?v=1.7.9"></script>
<script src="./assets/jquery-blockui/jquery.blockUI.min.js?v=2.70.0"></script>
<script src="./assets/geonames/jeoquery_custom.js?v=0.5.1"></script>
...
</head>
<body>
....
To a logic using a unique file.js than can include all my modules inside "node_modules" folder created by npm.
But i don't understand how do this.
My server only support PHP. doesn't support node.js for example.
Node.js only installed on a local dev PC.
Any suggest or tutorial?
I have Vue v2 SPA. This is standard application as it can be. Let it be hello-world from the documentation. Let's make it and build:
vue create hello-world
cd hello-world
yarn install
yarn build
But I got a requirement: the application must be embedded (by URL rewriting, not deployed) into another site:
Before the requirement: https://site1.come/
After the requirement: https://site2.come/path-toapp/ <- reverse proxy here rewrites the url site1.com
But application's build contains absolute paths for all assets:
$ cat dist/index.html
<!DOCTYPE html>
<html lang=en>
<head>
...
<title>hello-world</title>
<link href=/css/app.fb0c6e1c.css rel=preload as=style>
<link href=/js/app.042151d6.js rel=preload as=script>
<link href=/js/chunk-vendors.f0b6743d.js rel=preload as=script>
<link href=/css/app.fb0c6e1c.css rel=stylesheet>
....
It breaks third-party site's rewrites. Resource app.fb0c6e1c.css will be got from:
https://site2.come/css/app.fb0c6e1c.css
Instead of:
https://site2.come/path-toapp/css/app.fb0c6e1c.css
How can I solve the problem? I didn't find any relevant configuration in vue's documentation.
Of course I have a solution. I can rewrite URL's in CI's script with bash:
sed -i "s/\(src\|href\)=\//\1=/g" dist/index.html
But the solution above is a hack and cannot be supported by web developers. Because of this I'm looking for more significant (webpack-based for example) solution.
You need to create a vue.config.js file in your project root, and set the publicPath option:
module.exports = {
publicPath: '/path-toapp/'
}
I want to add this above tag in index.html for SIT/sandbox environment, how can I do this?
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
I can't have an access process.env variables in index.html file, so that's why I am unable to do this.
EDIT FOR CLARIFICATION:
Is there any way to adapt the vue-cli (webpack) build process to add one specific <meta> tag to the index.html conditionally depending on the build profile? The <meta> tag should be appended during the build process, not on runtime with browser JavaScript.
Use a combination of:
Webpack and Vue-Cli environment variables
Lodash in the public/index.html which vue-cli uses as a template
So your public/index.html would have a lodash instruction where the robots content is:
<meta name="robots" content="<%= process.env.ROBOTS_META%>"/>
Then make a new file in the root of your project called .env which contains the text:
NODE_ENV=production
ROBOTS_META=
Then make a second file in the root of your project called .env.dev containing:
NODE_ENV=production
ROBOTS_META=noindex,nofollow
If you want your production build, run: vue-cli-service build and the .env is used
For your dev/test/staging environments, run: vue-cli-service build --mode dev and the .env.dev is used.
To read more about VueCli environment variables see here:
https://cli.vuejs.org/guide/mode-and-env.html#environment-variables
I am pretty new to Symfony and NPM, Composer etc. I set up my symfony project and installed Bootstrap 4 via NPM
npm install bootstrap
Now the bootstrap files are located in the "node_modules/bootstrap" folder.
How can I include this sources correctly in my base.html.twig?
<link href="{{ asset('node_modules/bootstrap/dist/css/bootstrap.min.css') }}" rel="stylesheet">
I don't know if that is the correct way. As I said, I am new to this.
You can use "import" in your js file to import css.
import 'bootstrap/dist/css/bootstrap.min.css';
https://reactstrap.github.io/
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