We are working on developing a website using different APIs naming Firebase, Filepicker etc. Technologies used are Node.js and AngularJS. The project is based on a tool called yeoman, which is a scaffolding tool for web apps. We keep our modules updated through bower and NPM. The website is developed and running fine locally. We are inclined to host the app on Heroku's server and whenever we push the production code the application breaks without any message and the server crashes. I believe there are some issues with Gruntfile.js or minification issues with angular when used with grunt. Please connect me with someone who could guide me to setup the website on Heroku's server. We use heroku toolbelt for windows to push the changes.
There are some known issues with minifying AngularJS app, some of the declarations need to be written in particular way. See this SO answer.
Also, read the docs, scroll down to the part "A note on minification".
I've found this when looking for Heroku + AngularJS issues.
Please also verify compression server settings you are using.
Related
Generally, when writing vue.js front-end projects, node.js is used. For example, npm installs some node.js three-party packages to node_modules/.
Excuse me, node.js is generally the code running on the server side; what role does it play in front-end project development? Is it just npm run dev to run the webserver like this?
Or can Node.js also write some front-end code? But Node.js is a program running on the server, how can you write front-end code?
First of all, Node.js is a runtime environment that can run JavaScript, which is similar to the JavaScript runtime environment embedded in the browser. In fact, Node.js is ported from Chorme's built-in V8 JavaScript runtime environment;
Then, Node.js can be used as a server, running the server. It can also be used as a scripting tool. Now the front-end package management and packaging tools are all Node.js scripts;
To sum up, the difference between front-end code and back-end code is: where does it run? The client (front-end) runs client-side code, and the server-side runs server (back-end) code.
Node.js is a runtime environment. There is no such thing as writing front-end or back-end code. It can be said that it runs front-end packaging scripts, and runs JavaScript server-side code. The JavaScript server can serve the front-end, such as server-side rendering.
I am currently using angular to issue API call to an API server running ASP.NET. However, I have a cross-origin issue as for angular development, I am using localhost. While in the production version they will all run under the same domain using IIS.
Is there a way to run the angular app on the same port with ASP.NET?
P.S.: I am also open for other alternatives on solving this issue.
I've encountered the same problem, then I've found this post on medium, hope this works for you.
Edit:
Actually the solution that I've used is from that article.
The idea is that you can't "publish" the API and the Angular app on the same port, but you can use a proxy to connect from the Angular app to the API on the other port.
Update: sorry for not answering this long time ago.
To deal with the cors issue (in this case) you can use a proxy with the ng serve command.
For example, in my case I have used a proxy.conf.json file like this:
{
"/api/*": {
"target": "http://localhost:3000",
"secure": false,
"pathRewrite": {"^/api" : ""}
}
}
This code rewrite the url on every request to /api/* to the http://localhost:3000 where your api is listening.
So, to illustrate, if in angular you make a request like http://localhost:4200/api/users it will be redirected/rewrited to http://localhost:3000/api/users solving the cors issue.
Now, the way you have to run your angular application is different.
ng serve --proxy-config proxy.conf.json
I was able to achieve that with IIS successfully! I know the post is old but hopefully, it will save time for solution seekers :)
First (just a reminder) ensure that you have .NET Core Hosting Bundle installed on IIS machine (link could be found here). Bear in mind that it will require at least WinSrvr2012R2 to run.
Now copy published .net core API solution folder to the server. The same for Angular - next reminder here: execute ng build --prod then copy dist folder to the server.
Then configure IIS - create a new web site that points to the Angular app folder. Your Angular app should run at this point (but obviously there is no API yet).
Go to application pools - you will see the pool created for your application. Open basic settings and change CLR version to 'No managed code'.
And finally, click on your Web Site and 'Add application' under it. Point to dotnet core API folder and name it using some short alias. Now you should have a website structure with the application included.
If your angular app URL is:
https://myiissrvr/
your API is under:
https://myiissrvr/[ALIAS]/
DONE
Final remarks:
Usually, web API using URL structure like
https://myiissrvr/api/[controller]/[action]
So after bundling it together, it will look like:
https://myiissrvr/[ALIAS]/api/[controller]/[action]
With that approach, you should be able to attach multiple web API services under statically served Angular website - each one under its own alias. Potentially it might be useful in many scenarios.
I'm developing a very simple website in ASP.Net Core 1.1, and all of the changes that I had made to the CSS settings are loaded correctly when I run the site in IIS Express. So I decided I needed a hosting environment so that I can show my client the site, and purchased an Azure account. Now, after publishing the site to Azure, the site looks like this. It's apparent that the CSS styles are not loading and I cannot figure out why.
I've tried the suggestions from here, and here and haven't had any success. Deleting the _.min.css files hasn't helped and my project doesn't even have a BundleConfig.cs file so I'm not sure where to put the BundleTable.EnableOptimizations code. Any help would be appreciated.
P.S.: The Azure hosting was primarily for me to send the link to my client for him to see the site and also for a few other test purposes. It will not be the production environment. Is this an issue specific to Azure? If so, then is it safe to say that I won't have this issue with another web host?
So, I was told that Azure and IISE were referencing two different things. Sure enough, Azure was pulling from site.min.css while IISE was pulling from site.css. After searching for the reason behind this I stumbled upon this article on bundling and Minification, and followed the instructions starting at “using bundling and minification in a project.
After the build, I redeployed to Azure and the site worked fine. Azure is still pulling from site.min.css, so I’m still not sure whether or not that’s part of the problem. But the bundling extension seemed to fix everything up.
I'm working with a frontend developer on a Mac ATM.
We do have a working setup where he can commit changes to CSS / cshtml files and so on to github and its automatically deployed to a deployment slot on Azure.
The major issue we are having is that everything is so slow. I could of course setup so that my frontend guy could upload files via FTP but the issue i have then is that my gulp task aren't running if he would make any changes to a CSS / LESS file or a JS file.
Is there any smart setup for this? For example that gulp could behave like it does locally and compile stuff when a file is changed. Or that you could do some sort of custom deployment where we do not build the project if there are only changes to none compiled files or something. Can i for example execute gulp task manually in Azure? I only find loads of articles on how to do it during deployment.
Or is there any ways to speed up the local -> github -> azure deployment process in general?
Sorry for so may questions in one post :)
I am new to meteor. I developed mobile application from meteor. Now I wish to build that app from build.phonegap.com site. I feel build.phonegap is easy instead of meteor build
To put it short its not possible to build an app using the phonegap build service.
The reason for this is meteor build does not exclusively build the apk. meteor build also takes your project and builds it up into what would be the /www directory in your phonegap project.
Secondly Meteor doesn't use the original phonegap/cordova build. There is a modification to phonegap so the files in /www are served using an on-device HTTP server at http://meteor.local. This is one of the reasons its not available on WP8, Blackberry, etc. The local webserver sorts out some issues related to routing.
So you would need to use meteor build to build your app.