how to deploy a vanilla js web application - javascript

, i am creating a the front end part of a project that i am doing and i have some questions about deploying a vanilla js app.
i am using webcomponentes with the shadow dom to create componentes for my project but since i am only using vanilla js - html -css without frameworks i wanna know if is possible to configure a image with docker and then upload that image to a custom server and deploy it then ? i dont know if you could give me some tips or some documentation on how to do the deploy process of a vanilla app, or how to do the deploy using docker with kubernetes.
Also wanna know if using webpack with babel loader can be of any help in terms of performance if i am using only vanilla js with webcomponents.
thanks in advance

Related

Deploying React JS Projects

Is it possible to use a build version of React JS project within a JavaScript project, if it is, then can it be done?

Include KRPano in Webpack project

I'm using Webpack as core for all my front-end js project since more than a year. I'm starting to work with KRPano to create customized virtual tour. My goal is to be able to continue using my module style developement with Webpack, and include KRPano to this kind of project.
Actually the framework is a JS file with several functions to embed the viewer etc... And several js files that contains all krpano plugins.
I tried to just export the krpano file functions and include that in my project, but i got several errors and impossible de compile.
Wanted to know if someone ever done something like that, or if is there an alternative to webpack that will allow me to solve that issue ?
Thanks,
Navalex.
There are many similar frameworks. And each for their own purposes. Frameworks like Electron, Cordova may suit you. On Cordova, I created APK from Krpano tour and worked fine on my phone
Maybe your problem is that krpano is already "webpacked" and depending on which framework are you working you need the builded version and a server running.
What i have done is:
create react app
import vtour folder inisde src (for example)
navigate with a single button into vtour/index.html
build js app (react in my case)
add vtour files in the same route in builded app
sumbit to githubpages or glitch.me or something to test
Result Example:
https://imaciap.github.io/Manresa360Deploy/

After changing file extension from js to ts, ionic cannot find module any more

I am using ionic to create a mobile app following the link at http://ionicframework.com/docs/v2/getting-started/tutorial/.
ionic start my-mobileapp sidemenu --v2
Then I start my app in a browser as follows.
ionic serve
All of this worked until I changed my file extensions from *.js to *.ts.
Error: Cannot find module './pages/getting-started/getting-started'
from '/Users/jwayne/git/my-mobileapp/app'
If I simply toggle/change the file extensions back to js then things work.
My question is how does ionic know that code stored in a js file is actually TypeScript and not JavaScript if TypeScript code is stored in a js file?
I think you should be typing that...
ionic start my-mobileapp sidemenu --v2 --ts
If you want to work with Typescript, you should start a project with the --ts flag, as suggested above. Then, you should go about changing parts of your code to make them Typescript compliant.
See here for a good short overview of Javascript (ECMA6) VS Typescript:
http://www.joshmorony.com/converting-ecmascript-6-to-typescript-in-ionic-2/
As a side note, if your project is not too complex yet, I highly suggest you follow the guide and move to Typescript.

how to hide the js files in the header in meteor

This is my first time develop an app using meteor, I find out there are many js files included in , like files from the default/installed packages and the clients files.
However when I view the in the live sites that created by meteor, there are very little or no js files in there at all. How can do this?
I can't find the information about this topic. Is it because the meteor will hide these js files once the app is deployed?
Yes, when your application will be deployed you'll not see them anymore. Like said by zero298, they will be minified and bundled.

Building a angular JS web project

I am trying to build an angular js web project. The project will be such that, on UI side, I will have html with angular to handle presentation. Data on/from UI will be obtained/posted using ajax.
These ajax calls will take us to one of the methods in spring controller. These method will connect to another Rest WS application to obtain data / save data.
I have been able to understand the Angular JS framework and I feel comfortable to an extent working on it now. However I have no experience in designing an application structure from scratch. I have read http://scotch.io/tutorials/javascript/angularjs-best-practices-directory-structure to understand the directory structure's best practices.
I have integrated angular with my eclipse IDE.
Now, my question is, how should I go ahead with designing my application. Will it be the way we normally use js in a J2EE application? Or it is to be done in some other better/advisable way?
Any help is appreciated.
PS: Is it advisable to build an angular JS as static Web Project? I read this somewhere, I cant find the link now.
Thanks
Here are some tips:
Separate your javascript files and organize them so that they are functionally together.
Setup multiple SPAs if necessary, and organize your files/folders in the same way for each SPA:
home\index.html
home\index.js
home\index-controller.js
home\module.js // contains the Angular module definition
home\templates\user-control1.html
admin\index.html
admin\index.js
admin\index-controller.js
admin\module.js
admin\templates\user-control2.html
Create Angular UI modules specific to your application so that they can be re-used
shared\your-ui.js // this angular module contains UI directives
shared\your-ui\directives\table.js
shared\your-ui\directives\table-controller.js
shared\your-ui\directives\templates\user-control.html
shared\your-ui\services\test-service.js
Use Grunt or Gulp to build your JS files, minify them, run automated tests, and deploy them to where they need to be. Deploy your Angular UI modules and deploy your App.js module.
Use a javascript module loader (RequireJS, Webpack) so that dependent files can remain separate.

Categories