I'm trying to create an app in Angular 7, following the tutorial that gives you the default page
ng new my-app
I already reviewed it with ng serve --o and it works, but I have no idea now how to pass it to an environment outside of Angular. I've done
ng --build --aot = true
This has created a folder / dist / my-app and 3 JS files come in: main.js, polyfills.js and runtime.js I opened the index.html but nothing is shown, I expected to see the same thing I was doing in development.
I tried to run them with node, doing for example node main.js but it has not worked, in the 3 options it says
window is not defined
Has anyone already done these deploys to see how it would be in production?
What am I doing wrong....
Apps built with Angular or similar frameworks such as React or VueJs needs to be deployed in a weserver. Simply opening the index.html file in the browser will not work.
Now there are several ways of doing this -
Development
You can use http-server
npm install http-server -g
http-server -p 8080 ./dist
You can visit http://localhost:8080 to view your server
Production
There can be several options for production deployment depending upon a variety of factors such as your cloud provider, web server etc. The following two are an example -
Firebase Hosting
Firebase has a very simple deployment step - do firebase init once and firebase deploy to deploy your newly built webapp.
You can use Nginx running in docker
Dockerfile:
FROM nginx:alpine
COPY config/nginx.conf /etc/nginx/nginx.conf
COPY build/ /var/www
what you must do is mount your dist folder, which is the result of the ng-build you made on any http server.
apache: copies the dist folder in the www/html path of your apache
Related
I am trying to serve my node.js and react application with pm2 including loading data from mongoDB.
So far I can serve the build with serve -s build -l 3001 i am using port 3001 for the front end.
And pm2 start server.js for the backend which runs on port 3000. This runs and loads data successfully.
However, instead of using pm2 start server.js I want to be able to run pm2 serve build/ 3000 with my app name however when I do this my web page turns blank, all responses are 200 and there is nothing in the logs.
I have also checked online and searched many resources all result back to exactly what i am currently doing.
I am using npm run build to create my build folder.
Does anyone know a way to successfully serve your react build directory with pm2 ?
Thank you!
I have a nextjs and nodejs app in client and server directories respectively, and I know that heroku needs package.json in the root folder to deploy the node app but, it is in the server directory, how can I deploy this, I tried everything I found in other StackOverflow questions but they have ancient solutions, that doesn't seem to work now, is there any workaround?
/myProject
-- client
-- server
It's possible to specify your start script by adding a file Procfile in the root directory.
You may need a Procfile like this:
web: cd client && npm start
worker: cd server && npm start
Next, Enable both web and worker in Heroku App > Resources Tab.
See the official doc also: https://devcenter.heroku.com/articles/deploying-nodejs#specifying-a-start-script
I'm trying to deploy an Angular CLI app to Azure App Service on Linux OS, using Azure Dev Ops - but no success. I get Image 1. No error in the server or application logs.
This is what I done so far:
Built the Angular CLI app using DevOps Build and placed the resulted "dist" folder to the "drop" folder. See below (Image 2) the tasks that compose my build. This is working fine and creating the expected files.
Created a release in DevOps, deploying all the dist files in the wwwroot folder in the Azure App Service in Linux. Shown below are both, the wwwroot folder (left) and my local dist folder (right) after I run a ng build --prod.
I have the suspicion that I need to kickstart the angular by feeding some time of command when doing the deployment. I have tried running "ng serve --host 0.0.0.0" but that didn't work.
Check the Azure App Service > Linux section on this page. Essentially, you have to serve the app. You can configure this with a ecoysystem.config.js PM2 file in the root directory, with this inside.
module.exports = {
apps: [
{
script: "npx serve -s"
}
]
};
I also added npx serve -s in the App Service Configuration > General Settings > Startup Command
See also: https://burkeholland.github.io/posts/static-site-azure
I had to give the npx serve -s as the startup command
Then set the Runtime Stack with node framework 10.16 (NODE|10.16). See below
Then everything started working.
If you still want to use App Service - Web App you can just the Windows OS instead of Linux.
Here are the parameters I Used:
Since the output of building angular is a static web app, IIS will serve the site right away.
When using Linux App Service container, you may also select PHP stack containing Apache2 Server. Since, Angular files are static ones (JS, CSS, HTML), so you just need some web server to serve this content.
Example configuration:
If you look at the default 'Deploy Node.js App to Azure App Service' release template, it uses the 'Deploy Azure App Service' task and adds the following commands to the task. this might help you out.
There is a subtle and big difference between the Linux and Windows App service: IIS - which in Windows is actively looking to serve any app, whereas in Linux you have to spin up something on your own to serve it - Express for example.
After some research I discovered that I don't need a full App service dedicated to run a static app (such as Angular or React). It can be done just as efficiently and much cheaper with something like Storage. -> https://code.visualstudio.com/tutorials/static-website/getting-started
I had the same problem on Azure App Service with Linux and Node, solved it using below startup command
pm2 serve /home/site/wwwroot --no-daemon --spa
I currently a web app involving a Vue.js frontend with a Flask backend acting as a REST API. They are divided into the client and server folders in my repo, respectively. I am looking to deploy it to Heroku via the Github deployment feature but am running into some errors and questions I need clarified.
All code can be found in this Github Repo: https://github.com/justintranjt/thrive-test
In development, I have been running the application like so:
In one terminal run thriveApp.py. In another terminal run npm run dev. Navigate to localhost:8080 which is the local server running
the Vue.js application.
Is this how the application will be run on Heroku? Or is the Vue application run using npm run build? In that case I would have to take the produced build folder and serve it in the Flask application, correct?
In addition, some of my links between the frontend and backend specify localhost:8080 and localhost:5000 (8080 is Vue and 5000 is Flask) which work locally. But will this work when deployed to Heroku?
<b-form>
<b-button variant="primary" href="http://localhost:5000/loginPage">Login via CAS</b-button>
</b-form>
As you can see here, I have a button in my Vue application that links to a login page routed by my Flask application. Will I have to change the portion of the URL that says localhost:5000 when running on Heroku?
Finally, When I currently try to build the application on Heroku only the Python portion of the code is recognized as modules from the Vue app specified by package.json are not installed while plugins for Python specified by requirements.txt ARE installed by Heroku.
I have a feeling all of these questions are generally related to each other. Any other advice or tips regarding Heroku deployment would also be helpful as I'm quite confused about deployment at the moment.
Is this how the application will be run on Heroku?
No! npm run dev spins up an entire development server with vue in dev mode and hot reloading. That's a lot of overhead, especially when it comes to file sizes.
Or is the Vue application run using npm run build?
Kind of. Vue doesn't need to run on your server at all, it's all client-side. npm run build bundles and minifies your files to a dist folder, you'll be left with only html, css and javascript - this is all of the frontend code that needs to be on your production environment - no need to deploy any of the source files. All you need to do is serve those static files from any server. This could be done by your flask, or just any apache, nginx etc.
But will this work when deployed to Heroku?
That will be very tricky to setup. It's one of the reasons why I would not deploy front- and backend on the same (virtual) server.
modules from the Vue app specified by package.json are not installed
If you deploy your bundled frontend instead of the source code this wont be an issue anymore. I still recommend serving the frontend from a different environment.
I am writing a number of VueJS apps that take part in a larger Microservices environment. My current workflow seems long winded but I can't find anything better and would like advice on how I could do it better. Here is my current work flow.
Write VueJS development version (testapp)
Push testapp to git server
npm rum build to get a dist folder
Create a nodejs/express app (testapp_server)
Copy testapp dist folder to the testapp_server html folder
Push testapp_server to git server
On production server clone testapp_server from git
pm2 start app.js --name testapp_server
If I make changes to my VueJS test app in dev, I have to go through this whole process again to get it into production.
I am on a closed secure network, so I don't have the luxury of using Heroku etc.
Is there a better way?
Update: I have just found out about git sparse-checkout which allows the checking out of specific folders from a repo. I am thinking I could include my dist folder in my development git repo and then just check out the dist folder using sparse-checkout directly into a node/express app on my production server.