I am new to Angular2 and have a bit of confusion with the node.js and the angular2 framework functioning and relationship.
I can run my app with the lite-server on localhost, but my problem is uploading the app to the hosting service.
There are not any tutorials or guides of what to do when the app is ready, so I have been trying to make a bundle with webpack, but I am not successful.
I know it is a BAD practice to upload all node_modules installed by npm but am I correct trying to make such bundle?
Another clarification would be if my app can run my app just by uploading the html, css and js files (including those in the node_modules)? or do I need to configure a host that allows Node.js to run my application?
In Angular2 if you use Typescript you need transpile the webapp, this transpile put the files in /dist folder.
If you use ES6, you use the app in the root folder of you develop.
I you open the "index.html" in your browser of you /dist folder, the app in angular2 work.
In the index.html you have this code
System.import('system-config.js').then(function () {
System.import('main');
}).catch(console.error.bind(console));
In your main.js of the /dist you have this code
var _1 = require('./app/');
In this folder require you have this (for example)
var ng_fire_component_1 = require('./ng-fire.component');
this require call to your principal component of the webbapp... In this logic your app run with only open the index.html when ng-fire.component is your root component.
In node you only need create a web-server, this webserver (if use express js ) you need call the index.html
router.get('/', function(req, res){
res.sendfile('yourAPPfolder/index.html');
});
and your webApp its run again when you open the www.yourweb.com/ or localhost:yourPort/
For the last question, if use the server, you have import the folder /dist in this folder you have all file who need.
I recomend the angular ci (https://cli.angular.io) for work with angular2 ... if you need other vendor file or vendor folder you can add in the file angular-cli-build.js
for example:
/* global require, module */
var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'zone.js/dist/*.js',
'es6-shim/es6-shim.js',
'reflect-metadata/*.js',
'rxjs/**/*.js',
'#angular/**/*.js'
]
});
};
Related
I am now using angular and spring boot to build website project. When we deploy, we will ng build --output-path=../spring-boot-project/src/main/resources/static", angular and generate a static folder in spring boot, like /resource/static. Then we build and deploy a .jar file to our prod(or lab) environment.
so when we run the .jar file, how can we pass some environment varibles to angular part(the static files in spring boot project).
More specifically, I want to set angular environment in spring boot application.yml:
spring:
profiles:
active: dev
main:
banner-mode: "off"
---
spring:
profiles: dev
angular.v1: "something1_dev"
angular.v2: "something2_dev"
---
spring:
profiles: prod
angular.v1: "something1_prod"
angular.v2: "something2_prod"
how can I pass these values(different values because of different profiles) to angular side?
The issue with what you are asking is that , once you place the angular generated files under the static folder, springboot will treat the files as static assets and will not use any templating engine for us to bind any furthur data to the files. It will receive the request and if it matched the asset it will serve it directly.
For your use-case to work, you will have to set the angular environment in the angular build itself. What you could maybe do is, have the angular build parameterized like using maven profiles so that you could control the angular build using maven command itself. You might probably be using the front-end-builder plugin to trigger the angular build right. So , in that case when you provide the npm run-script command you could provide which customized command you want to run by providing different commands in your package.json. For buid setup read : How to integrate an Angular 4 app with a Spring Boot stack?
Externalize configuration to separate file
Create a file settings.js in assets that shall hold your env variables:
const GlobalSettings = {
... your settings values
}
Add this file to your index.html so it will automatically be loaded during startup (but not packaged by Webpack).
<script src="assets/settings.js" type="application/javascript"></script>
In your code GlobalSettings would then be available - well - globally.
Inject content of settings.js into environment
If you prefer to work with the environment inside of your Angular app you could overwrite the specific properties of environment in main.ts:
environment.someProperty = GlobalSettings.someProperty;
... bootstrap Angular
Now you can change your settings by replacing settings.js instead of having to rebuild the whole app.
Edit file using environment variables
Use envsubst to replace variables in your settings.js
// settings.template.js
const GlobalSettings = {
someProperty: "${SOME_PROPERTY}"
}
// command that starts your server, e.g. docker command
envsubst < settings.template.js > settings.js && <command to start webserver>
This will obviously not work if you ship your Angular app inside a Java jar.
Provide settings.js via Spring backend
Do not copy the file to the static directory (and thus not into the jar).
Instead create an endpoint in your Java app that listens on /assets/settings.js.
Here you can use all the Java/Spring magic (including reading env variables) to assemble settings.js with the desired content.
I want to bundle a vue app with the styles and everything into a single UMD javascript module using vue-cli-service so that I can import it into another Vue app via my component distribution server. I am able to do this with one component on the serve, but I don't know how I'll be able to bundle an entire app and load it remotely into a separate app. I use this article as a guide https://markus.oberlehner.net/blog/distributed-vue-applications-loading-components-via-http/
This is where I am importing it:
{
path: '/games',
component: GamesHome,
children: [
{
path: 'fun',
component: () =>
externalComponent(
'http://localhost:8200/game/Game.cd590421a6d6835e7ae2.umd.min.js'
),
name: 'Fun Game'
}
] }
So basically how do I create a Vue app then bundle it entirely with CSS and all using vue-cli-service
This is the problem which I have been trying to solve from day 1 ever since I started using VueJS. I will not consider a client side JS framework if it does not provide a solution for this problem.
I recently did a PoC in this and able to consume a VueJS application as module in another VueJS application. In my case I have a suite of VueJs applications where each of these applications is running in its own dedicated docker container. These applications have a lot of functionality which is common across all the applications. So I decided to move this common code (page layout, css frameworks etc) to a separate VueJS application and consume all existing VueJS applications as modules in this global application. I call this micro-app based architecture to differentiate it from micro-frontends based architecture because it does not use multiple client side JS frameworks and does not require another framework to achieve this. This is how the deployment architecture looks like in my case (you can ignore kubernetes specific stuff if your are not aware about it) -
Coming back to implementation part, you need to take a step wise approach to convert a VueJS application to a micro-app.
Lets say you project structure look as following (it shows only few files which require changes and NOT all the files) -
app-1
public
index.html
src
main.js
App.vue
router
index.js
store
index.js
Split your vuex state and routes files into global and application specific files -
app-1
public
index.html
src
main.js
App.vue
router
app1
index.js
index.js
store
app1
index.js
index.js
Make a copy of this project (global-app), remove global-app specific files from app-1 and app-1 from specific files from global-app. Also remove index.html and App.vue from app-1 project -
Add ROUTES and STORE_MODULES variables to index.html file of global-app -
<head>
....
....
<script type="text/javascript">
const ROUTES = []
const STORE_MODULES = {}
</script>
</head>
<body>
....
....
<div id="app"></div>
<script type="text/javascript" src="/app1/micro-app.umd.min.js"></script>
<!-- built files will be auto injected -->
</body>
Update router\index.js file of global-app for ROUTES variable -
const routes = [
....
....
]
routes.push(...ROUTES)
const router = new VueRouter({
Update store\index.js file of global-app for STORE_MODULES variable -
export default new Vuex.Store({
....
....
modules: STORE_MODULES
})
Clear content of app-1\src\main.js file and replace it with following content -
import routes from '#/router/app1'
import app1 from '#/store/app1'
ROUTES.push(...routes)
STORE_MODULES['app1'] = app1
Define build-app command under scripts block of package.json file of app-1 -
....
"scripts": {
"build-app": "vue-cli-service build --target lib --formats umd-min --no-clean --name micro-app src/main.js"
},
....
Now build and deploy these two applications in their dedicated containers and update nginx conf file of proxy container to forward requests to these containers as following -
location / {
proxy_pass http://global-app:80;
}
location /app1/ {
proxy_pass http://app1:80/;
}
You can access global app by using IP address and port of nginx container.
I hope I have included all the steps which are required to implement micro-app based architecture. You can refer following git repositories which were created as part of this PoC -
https://github.com/mechcloud/large-app-docker
https://github.com/mechcloud/large-app
https://github.com/mechcloud/large-app-plugin1
While I am not an expert in the internals of client side JS frameworks, I believe this approach will work for other JS frameworks (Angular, React etc) as well.
How can we integrate Vue JS with MVC Project that is existing and using with Nuget Package.
Tried with below approach.
<h3>VueJS 2 in ASP.NET MVC 5</h3>
<div id="aboutPage">
{ { message }}
</div>
<script>
var aboutPage = new Vue({
el: '#aboutPage',
data: {
message: 'Hello Vue! in About Page'
}
});
</script>
Question:
Is there need for any additional package like - webpack or gulp, we already have bundle config of MVC?
2.
How can we create separate files or design for each view like:
To separate the service call (to call web api from client side)
separate out the template file.
methods or logic to write in JS.
any example for MVC with VueJS like - controller, view,service, vue JS file is great..
Thanks a lot !
You can use vuejs buy adding it to your layout.
#Scripts.Render("~/node_modules/vue/dist/vue.min.js")
You need to install Nodejs on your machine to use NPM and ES6 features.
For integrate Vue.js in .NET MVC you need module bundler (webpack, gulp),can choose one of this options, the popular is webpack:
1:(Gulp, Browserify), which has some limitations such as supporting only require syntax handling assets. and the setup is kind of complicated.
2:(Webpack), which has a lot of cool things you can do with it, Hot Reload. check this repo
by using webpack, you config it to handle just js files and it will handle js files for build too , upon build each entry will be copied inside Scripts/bundle, also you need some loaders such ass (vue, scss, css and js) for webpack. check this
Webpack uses webpack-dev-server for development which is basically a node.js based server which serves assets (javascript, css etc) that our browsers can interpret. Usually these assets include some development friendly features like Hot Reload. These assets are not minified and are quite different from the ones generated when building for production.
devServer: {
proxy: {
'*': {
target: 'http://localhost:5001',
changeOrigin: true
}
}
},
webpack-dev-server has a feature which can proxy requests from one url to another. In this case, every request from "webpack dev server " will be proxied to your "asp.mvc server". So, if we run our MVC app on http://localhost:5001 and run npm run dev , on port 8086 you should see the same output as from our MVC app.
Answers:
1: yes you have to setup Webpack or Gulp.
2. by using webpack you can all thing for file structuer that you want
check this tree
-app
--libs
----utils
----components
---------commons
---------.......
-----pages
---------.....
check this articles
https://medium.com/corebuild-software/vue-js-and-net-mvc-b5cede228626
http://www.lambdatwist.com/dot-net-vuejs/
If you want to keep the .cshtml files and use MVC as a multipage application, you can take a look at this template as an example or starting point. https://github.com/danijelh/aspnetcore-vue-typescript-template
You can create modules of pages which you want to enhance with Vue and import that bundle.
I was just going through the ngx-admin code on github and came across the following code in the header.ts file:
See here
import { NbMenuService, NbSidebarService } from '#nebular/theme';
Now when i run this project locally and run npm install after all dependencies have been installed and i move to the folder #nebular/theme i don't see any service files also #nebular/theme seems a path to a directory vs a path to a service , how does angular pickup on these services ?
The intention is to access a library of images outside the meteor application directory. This is the case since the application will not be the only component using the said lib. The meteor app, images lib and other components will reside on the same machine.
How can I do this? And is there such a thing called a local content delivery network?
You need two different things at the same time.
For the first part, to read/write access your files outside the meteor directory, take a look at https://stackoverflow.com/a/20330021/1064151 and http://shiggyenterprises.wordpress.com/2013/05/16/accessing-the-file-system-in-meteor/ which basically tells you to use fs from npm
#fs = Npm.require 'fs'
#path = Npm.require 'path'
readSomeFile = () ->
p = path.resolve './server/somefile.csv'
data = fs.readFileSync p, 'UTF-8'
#...
The second part is to serve those images from an alternative web server which you can do with any web server module from node or apache/nginx that uses the target directory as its docbase.
You can even do that from within meteor but meteor is not the best web server to serve static assets.