I’m trying to deploy a very basic angular app to elastic beanstalk. The project was created using the angular cli. I have not made any changes to the files in this project.
Here are the steps I took to deploy the app
Executed ’ng build’ inside the root folder of my project
Moved the #angular/cli dependency from devDependencies to dependencies in package.json
Zipped the contents of the dist folder along with package.json
Deployed zip folder to AWS EB configured with the node.js platform, node version 8.11.3, the same as my local environment.
I always end up with a ‘npm install failed’ error when I check eb-activity.log.
Am I missing something trivial here? Would really appreciate any help with deploying angular apps to EB.
While this does not specifically answer your question, I don't think Elastic Beanstalk is the right tool for the job. I strongly suggest hosting on a Static Website on S3, and if you want https and a custom domain name, put a CloudFront distribution in front of it.
Create an S3 bucket, e.g. www.mydomainname.com
Enable Static Website Hosting
Set the Bucket Policy to public read
{
"Version": "2008-10-17",
"Statement": [
{
"Sid": "PublicReadForGetBucketObjects",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::www.mydomainname.com/*"
}
]
}
Build the angular app locally, into a dist folder.
Push the files to the website using the aws-cli
aws s3 sync dist s3://www.mydomainname.com/
This solution will cost pennies, much lower than an Elastic Beanstalk solution (EC2, EBS, ELBs). Elastic Beanstalk is great for Monolithic apps, but their existence is numbered, and the wrong paradigm when you are talking SPA, IMO.
I know I'm pushing my luck now, but I would also strongly recommend using the Serverless Framework to build and deploy NodeJS API endpoints for your Angular App to interact with.
Follow the steps:
-- Angular app
Create your Angular App
Build your Angular App using ng build --prod command
This will create a dist folder like 'dist/app-folder' with HTML, js, and CSS
The angular app you just built won’t work as a static website, it has to run on top of a Node.js server
-- Node.js App
Created a new folder and create a Node.js project by running: npm init and follow the instructions
Name entry point: (index.js) js to 'server.js'
Install Express and Path using npm install express path --save command
Create a file named 'server.js' into the project folder
Now check the package.json file for a configuration named “main” the value should be 'server.js'
Copy the Angular dist folder to Node.js app folder
Open 'server.js' file paste below code
var path = require('path');
const port = process.env.PORT ||3000;
const app = express();
//Set the base path to the angular-test dist folder
app.use(express.static(path.join(__dirname, 'dist/yourappfolder')));
//Any routes will be redirected to the angular app
app.get('*', function(req, res) {
res.sendFile(path.join(__dirname, 'dist/yourappfolder/index.html'));
});
//Starting server on port 8081
app.listen(port, () => {
console.log('Server started!');
console.log(port);
});
Run Node.js project locally using 'node server.js' command
The app should work on localhost:3000 port
Take the dist folder, the server.js file, and the package.json file (of the server project) and compress them as a zip. DO NOT include the “node_modules” folder.
Upload the zip to your AWS Elastic Beanstalk environment
Browse your site
Hope this is useful!
Got the deployment issue resolved! I used express to create a server and serve my angular app. I needed to add server.js to my dist/ folder. My server.js file looked like so
const express = require('express');
const http = require('http');
const app = express();
const port = process.env.PORT || 3001;
app.use(express.static(__dirname));
const server = http.createServer(app);
server.listen(port, ()=> console.log("Running..."));
Related
I have an Angular 6 application and an existing nodejs api application.
So far I have used
ng serve
to run and build the angular application.
I now want to serve my angular application from the existing node js server.
How do I do that ? I can't find any documentation.
Steps:
Do ng build, It will create a dist folder which you can easily serve from node webserver framework like express, Hapi or Koa
if you are using express.js you can server angular app.use(express.static(path.join(__dirname, 'dist')));
Now use node server URL to serve angular like http://localhost:nodeport
If you are using Hapi: check this out https://hapi.dev/tutorials/servingfiles/?lang=en_US
================================basic express server================
const express = require('express');
const app = express();
const path = require("path");
const fs = require("fs");
//const bodyParser = require('body-parser');
app.use(express.static(path.join(__dirname, 'dist')));
//app.use(bodyParser.json());
//app.use('/api/v1/', require('./api/routes'));
app.listen(8080,function(err){
if(!err){
console.log("server is running at port:8080);
}
})
You have two ways of serving an Angular SPA:
Usually dev: the Webpack-run server, which is ng serve. Dynamic in the sense that any modification to a file starts a rebuild and updates the output.
Usually prod: you build all the html/js files (with ng build [...]) for the SPA to be statically served by a node server.
In your case, if you'd like to use an existing node server, it means you'll have to build the files (with ng build) and then hook up the usual node static files serving snippet in your node app.
Beware though: you'll have to do a full build each time you want to update the display. So it's ok if it's not that often, but not ok for a dev environment I guess.
I'm wondering how to deploy vue-express full stack application to local Ubuntu server.
I couldn't find proper info from google. Can someone please explain the process?
If you build your vue project with vue-cli 3 (which I strongly recommend), using its npm run build script will create a /dist folder with all the minified stuff you need.
Then, you just serve this folder with you express app, something like this:
const express = require('express')
const app = express()
app.use(express.static('dist'))
I have a vuejs frontend and an express nodejs backend. But I don't know how I can deploy both of them to the same Amazon EC2 instance with the same domain name pointing to them. Please can anyone help me with this? Or suggest a better way of doing this?
You can merge two repos and deploy both backend and frontend as follows
Inside your nodejs app, open a folder named client and put all the Vue project inside it.
If you are using Vue CLI, change your vue.config.js as follows to create a dist folder inside the root of the nodejs project like
const path = require('path');
module.exports = {
outputDir: path.resolve(__dirname, '../dist'),
};
Make all the get/post endpoints of nodejs application start with /api/ to not get conflict with the path that redirects all the requests to vue client app other than /api/ paths.
Run npm run build to create a dist folder inside nodejs root backend folder
If you are using express.js, serve dist folder with nodejs express backend like;
index.js
const express = require('express');
const app = express();
// Serve Vue Dist Folder
app.use(express.static(__dirname + '/dist'));
app.get('*', (req, res) => res.sendFile(__dirname + '/dist/index.html'));
nodejs with e.g. express can also serve static content. Just put your vuejs files in a static folder.
I am new to NodeJS and come from Java world, but in last 3 month I have done quite good development.
I use ExpressJS and ReactJSin my first project, Now during development we use 2 http server 1 for ExpressJS back-end application and another for ReactJS front-end application.
Now is this the way we have to deploy on production or we can combine it as 1 application and deploy on 1 http server listening on port 80.
regards
Deploy a production React app to Heroku
1. Create a React App
npm create-react-app heroku-deploy-test
cd heroku-deploy-test
2. Create an Express JS server to serve your production build
//server.js
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(__dirname));
app.use(express.static(path.join(__dirname, 'build')));
app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
const port = process.env.PORT || 8080;
app.listen(port);
In your package.json file, change the start script to the following: start:
"node server.js"
3. Deploy to Heroku
If you don’t already have a Heroku account, create one here: https://signup.heroku.com/
In your command line, run the following: heroku login
You will need to type in your heroku credentials to the terminal. Once you have successfully entered your heroku credentials, run the following in your terminal to create a new deployed app:
heroku create heroku-deploy-test
(Replace heroku-deploy-test with your own app name.)
Then push your app build to heroku with the following git in your terminal:
git init
git add .
git commit -m "initial commit"
heroku git:remote -a heroku-deploy-test
git push heroku master
These commands install your dependencies, initialize git, and connect your repo to the remote repository hosted by Heroku.
Note: if you already initialized your git before running heroku create [app-name], then you don’t need to run heroku git:remote -a [app-name].
run heroku open and your development app will open in your default browser. If you want a production build, I think you already know what to do. - > Create a production build of your React app. Create a proper .gitignore file so only the relevant files will be deployed.
IMPORTANT: If you already had a .gitignore file, make sure that this line isn't in it /build :)
May I also suggest reading this blog! Have a good one!
I'm trying to set up a Node.js project that uses Express to provide a few backend APIs and serve a SPA built with Vue.js.
When I use the Vue cli to initialize a project, I get e.g. src/main.ts main file and commands npm run serve to run a dev server and watch for changes and npm run build to build a production release.
When I use the Express application generator to create a project, I get ./app.js main file and npm start to start the server and watch for changes.
How can I combine these into a single project, both served by the same Express server? Preferably so that a single command would watch + update changes to both server and client? I want to use Vue single file components and TypeScript, which (probably?) require a build step.
(I don't need dynamic server-side rendering of Vue templates, just the static SPA app provided. I prefer TypeScript, but JavaScript answers are fine as well.)
These will be different for your dev and prod environments...
For development look into concurrently - it basically allows you to create a single script in your package.json to start both the client and server concurrently and will watch for changes etc...
For production, you would need something like this in your app.js:
if (process.env.NODE_ENV === 'production') {
app.use(express.static('client/build'));
const path = require('path');
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
});
}
(The code above assumes that your directory structure has a client folder with a build folder after having run npm run build I'm more familiar with React than Vue... but the logic should be the same...)