I have a simple vuejs project, which does not need to communicate with server. I need to pass this project to someone does not know software engineering, so I cannot have him install nodejs and run npm run dev to run this project. Is there any way to compile this project to a single html file, so he can just open this file in chrome and run it?
If you just want to show him the project (and don't let him edit it), the obvious solution is to create a build (running npm run build), put it on a test server and give him the domain name. Another possibility is to send him (e.g. via mail, zipped) the content of the dist folder after a build (the index.html and the static folder).
Related
I have VueJS project published on Netlify, what i want to do is to make modifications to this project and see my changes locally before i update the repo on GitHub and publish the changes on Netlify. So simply i'm trying to find a way to serve the project locally but this doesn't work anymore after the project got published on Netlify.
Whenever i run npm run serve i get the below error:
PS F:\Projects\reaction-timer-testing> npm run serve
> reaction-timer-testing#0.1.0 serve
> vue-cli-service serve
'vue-cli-service' is not recognized as an internal or external command,
operable program or batch file.
I assume this is because that project is in build mode and i did that by running npm run build while i was publishing it to Netlify.
I've read someone recommends to run serve -s dist and this got me no where because each time i visit the local link http://localhost:3000 it gets 404: the requested path could not be found.
Another one advised to download and install xampp but i don't know what to do next i think i've tried everything.
Here is a view of my project files (it's a very simple project that i made for learning)
Pic of project files
Link to the project on Netlify: https://reaction-timer-testing.netlify.app/
Is there a good and easy to understand tutorial on hosting vue.js SPA application. I have currently uploaded the complete project to the server through Filezilla. And I hadn't run npm run build prior to hosting the system. Can I run npm run build locally and then upload the dist folder to the already hosted application. Any help will be much appreciated. Thanks
Yes, just run npm run build on the client and then upload the dist folder to the server. That's the normal use case, there's usually no reason to move the whole project with all the dependencies to the server.
You should run npm run build next upload files from folder dist to server. In dist folder there will be all files which are required to SPA correct working.
Environment: Ubuntu 16.04, .NET Core 1.10 (1.0.0-preview2-1-003177), Visual Studio Code 1.8.1
I just generated a new ASP.NET Core app. When I run the app from a terminal window, the start up web page gets displayed as expected.
$ cd MyApp
$ dotnet run
However, the web page is slightly different when I load MyApp folder from VSC and press F5 to debug it. Specifically, the default top toolbar is missing. Toolbar items such as Home, About, Contact, etc. line up in a single column.
I have compared the generated html between the two. When run from the command line, the stylesheet links are:
href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css"
href="/css/site.min.css"
When run from VCS, the links are:
href="/lib/bootstrap/dist/css/bootstrap.css"
href="/css/site.css"
On examining local file structure, I see file css/site.css is present under folder wwwroot. However, I don't see any lib folder at all.
More information. Turns out _Layout.cshtml adds links based on environment names. When the names are Staging and Production, the generated bootstrap link is for ajax.aspnetcdn.com. For "Development," the link is "/lib/xxx."
Wondering how I force VCS to automatically populate bootstrap.css into lib directory.
Problem solved. When the website is generated, a file, bower.json, is created. This file has information about the bootstrap package. However, for some reason, this package is not automatically downloaded. You need to do the following:
From VSC, install the bower plugin by running "ext install bower."
Press F1 and type Bower. Next type, "Bower Update."
This is it. The plugin will download the bootstrap package and populate it in wwwroot/lib directory. Now, the website would work as expected from within VSC.
Hope the next version of VSC will have bower integrated.
It seems like when your app runs from VS Code, it is not serving the CSS files.
To troubleshoot further, looking at the launch.json, project.json, and Startup.cs files is necessary. My guess is that your launch.json is setup to run under a slightly different configuration than your dotnet run command is from the terminal. That is resulting in...
not serving static files at all, or
not including CSS files in the app's build output.
From your question update, the problem is that your launch.json is running under in the Development environment and your terminal is running under the Staging or Production environment. The former serves bootstrap locally; the latter serves it from a content delivery network.
When running in the "Development" environment, you need to install bootstrap locally and ensure it's in the /lib directory at runtime. That means installing the client-side packages. How to do that depends on the ASP.NET Core application template your using. For instance, if you generated your app with Yeoman, then you need to restore with Bower. Check for a gulpfile.js, a bower.json file, or a package.json that downloads, installs, and builds client-side dependencies, which likely include bootstrap.
I have developed an Angular 2 application using npm, As a fresher,I don't know some ways like below.
When I publish I used npm publish so that it publish the application in npm account in the web.
So here, is there any way to publish our app in the localhost,because I don't want to use npm account and I just need to avoid node_modules folder on publishing ?
If any other way,that can be used to publish the Angular2 Application in local other than npm, let me know.I try that.
If it is not possible to publish the application without npm web account, Kindly let me know please .
Excuse mistakes,If any.Thanks in adv :)
npm publish is to make a library package available to other for free use.
That's not what you use for making a web application available. This is called deployment.
For deployment you usually execute a build step that transpiles TS to JS, and combines them into a single file to reduce the number of requests the browser needs to make in order to get all source files of your application. It may also inline component HTML and CSS. This build step can also minify and mangle to JS code to reduce the resulting file size even more.
The resulting output can just be copied to any directory that any web server is able to serve to a browser either on your local machine or at some machine of a web hosting provider.
There are different ways to build your application depending on your setup.
See for example How to deploy Angular 2 application developed in Typescript to production?
You need browserify, that's all
browsers need references to all js files to be put in the html, they don't understand node's require() method that forms modules dependencies
what browserify does is traversing the entire dependency graph of your project, recursively bundling up all the required modules starting at the given root into a single js file
install it by node package manager
npm install -g browserify
use it to bundle all needed modules staring at main.js
browserify main.js -o bundle.js
now put a single script tag into your html
<script src="bundle.js"></script>
as far as i know, node_modules contains dependencies for typescript transpilers and few others. so it will not be possible to publish an app without using node_modules.
perhaps you can try using Plnkr or jsFiddle
where you can make imports online using cdn links for node_modules and publish your app.
it will be easy compared to other alternatives.
hope this helps.
I read about npm and bower, differences, usage, how it works, purpose as well. All explanation says that to work in NodeJs. But when I searched for AngularJS2, the tutorial says use npm. I have some basic questions based upon the understanding that npm basically for dependency management or packages to be installed.
How my Java/Eclipse workspace knows that npm installed the particular JS library/file, what path should be given in the html/web page for including those files/libraries?
If I move the web application to production, how will the server gets those dependent libraries? Even if server gets it, it might be installed in different folder. Basically how it can be managed with a web applications in different environments for just AngularJS app?
Can anyone please help me to have better understanding?
Finally found the answer. NPM is node package manager which helps basically to download the dependencies (almost like maven, gradle in java).
npm software needs to be installed in developer's machine.
Add the required dependencies in the package.json in the root folder of AngularJS application.
Open the DOS command line and navigate to project root folder(workspace/project in eclipse), then type npm install which will download all the dependencies mentioned in the package.json to a folder called npm_modules inside project folder.
The other and important advantage is npm can be used to install browser agent as well. So npm start command will open the browser and will load the application automatically in browser. Developer does not need to be aware about NodeJs. One more benefit of using this approach is the browser will get refreshed automatically when any update in the JS file gets saved.