Created a new project, did not change anything. I started ng build, took the dist folder (only it) and ran it on the local server. In the end, nothing. What's wrong?
I think your question miss some precisions.
You are trying to run your angular app on a local server. Which ?
When you build your app with ng build you build a static app. (And when you use the option --prod you app will be optimized for production)
Try simply with the npm library http-server AND note that currently there is a bug in the latest version of this library ! So try the version #0.9 for example.
Maybe this is it you already try with the latest version and you see nothing so..
Hope this helps.
So i followed your link and used the view source to see what your base href is. Currently, your base href in your index.html is set to:
<base href="/my-dream-app">
if you change this to:
<base href="https://artartem.000webhostapp.com/my-dream-app/index.html">
your application should run as intended.
I didn't understand your point. When you use the build command, you are compiling to production, I mean, you are transpiling from typescript to javascript vanilla, in less words, you are preparing your angular application to speak the same browser language.
Sorry, but I answer you as I understand your problem.
Related
I have a laravel application deployed on a shared hosting server. I managed to deploy the app, install all the composer/node dependencies and it all runs with no error. I'm trying to make some minor changes on one of my components, but for some reason after the npm run dev(production) everything seems to be compilled with no error, but the actual application in the browser does not reflect the changes. I tried to clear all the caches in the app and in the browsers I'm using. I tried also to run 'npm run watch'. I replaced files, also I replaced the whole folder. If I remove something npm does display the error about the missing files, but the changes are not compiled. I've been googling now for 2 hours,but I cannot find anything useful . Any idea is welcomed. Thanks in advance.
Using Laravel Mix's .version() could help in cache busting. Don't forget to use mix('path') instead of asset('path') in your blade files
I am having a problem with the deployment of an angular app. It does not occur on another machine if deployed. My app is not running and it shows the following error on Chrome:
Not allowed to load local resource
and in Mozilla:
'src' attribute of element is not a valid URI
The thing is, it is working completely fine if deployed from other machines. So I am guessing the issue is with the versions of node or typescript or ng or whatsoever. I am new to server deployment and this kind of issue is new to me.
I am using following command to generate the deployment folder:
ng build --prod --base-href /candidate/
Following is my version details:
Node version: v10.16.3
Application typescirpt version: Version 2.9.2
Globally installed typescript version on the machine: Version 3.6.3
I deleted node modules and package-lock.json file and run npm install before production build. I got no error and was successfully able to generate dist folder.
The deployment folder works perfectly if it is deployed from machines which have upgraded or downgraded node version installed.
I have found many suggestions regarding the error shown on the browser, tried upgrading the node global versions but there is no way around. I am quite unsure about what I am missing here. Any kind of heads up would be great in this situation.
After digging into deep I found out that the problem is not with the version rather with the base URL it is generating in index.html file after build.
This issue occurs when using git-bash on Windows.
The git-bash sees the last argument of the command- ng build --prod --base-href /candidate/ as a path relative to its binary folder and prepends the argument with that (it converts the "seems-to-be" relative path into an absolute path).
So, I used PowerShell instead of Git-Bash and the issue was gone. The base-href parameter is handled fine there.
To resolve the issue with git-bash go through this link, which actually helped me to resolved my particular issue.
You should control base tag in index.html in dist folder.
<base href="/">
I am working on a React.js website that uses webpack and some shared code in a module to which I also have the source code. I'd like to make some tweaks to the shared library but currently it's installed from npm via a node_module. How can I set up my development environment to be able to work on the shared module but still be able to see my changes to the module live with hot reloading?
Use a local dependency, pointing to the local copy of your package:
{
"dependencies": {
"bar": "file:../foo"
}
Then build foo in watch mode.
The main app will recognize that something has changed and will hot-reload the relevant parts.
Update: Here is a more descriptive answer of how to use yarn link: https://stackoverflow.com/a/48688156/2748017
It looks like there is a built in solution to handle this with yarn.
docs: https://yarnpkg.com/cli/link
$> yarn link <destination>
I believe npm might handle this, too, just with a bit more lifting.
As far as hot reloading, I think that more-so depends on the app consuming the local dependency, but npm-watch seems like a decent solution.
I made project with vue-cli(node.js+vue.js), now i need to deploy it. How to run server with already installed and configured(by vue-cli) webpack? What should i do?
UPD: I want to deploy a whole server, not only static js. Because i have back-end with API and some stuff.
Idk what template you used, but most provide a npm build command. Just make sure you didn't set anything only for development that you need in production.
I used Daftmonk's Yeoman Full-stack generator as scaffolding for an app I'm making. I'd like to run it using Nodejitsu's nodejs service. But when I deploy, I get a cascading series of errors, and even once the errors stop in jitsu's cli, the app fails to deploy and gives a file not found.
I'm guessing the errors are coming because on my localhost Grunt is boxing up my app into a dist/ folder where it's being served. And I don't think Nodejitsu is able to account for that.
Has anyone had success deploying on nodejitsu a nodejs app that uses Grunt in this way? Sorry if this question is vague, I'd be happy to elaborate more, but I'm lost!
I also use yeoman with Angular Fullstack. It's almost funny how these tools come so close to working but leave you, the developer stuck when it comes to deploying. This isn't actually an answer. It's more of a supportive post acknowledging the problem. Here is what I've discovered.
Yeoman likes you to run grunt serve:dist to get a peek at what the minified build will look like. This puts all your production code into /dist/public
Nodejitsu will run node server/app.js when it runs
Unfortunately, this leaves nodejitsu looking in dist instead of dist/public so it can't find the files
------SEE BELOW FOR A BETTER ANSWER------
I've been playing with this more and as it turns out, the answer is almost too easy, especially with nodejitsu. I'm going to assume that you've already installed the nodejitsu tools with:
[sudo] npm install jitsu -g
I'll also assume you've registered as described here:
https://www.nodejitsu.com/documentation/jitsu/
Now, it's really easy.
Run grunt. This will minify and uglify your code. I had some problems with uglify (as many people seem to have) and so I added this to Gruntfile.js to fix the issue. Apparently the js is larger as a result but the headache factor is worth it for me:
Add it within the initConfig section (only take this step if you are getting an error related to loading modules from the console of your browser).
// Uglify Exceptions
uglify: {
options: {
mangle: false
}
},
Running grunt puts everything into /dist/public.
Now
cd /dist
jitsu deploy
Everything worked perfectly for me. The key here is being inside the dist dir when you run jitsu deploy. This way, it will only deploy the production compiled code.