Skip to content

Instantly share code, notes, and snippets.

@jyotendra
Last active Mar 23, 2018
Embed
What would you like to do?
This gist explains how to setup express to serve multiple angular apps from its public folder while also serving apis and other functions. It demonstrates how routing conflict between angular and express can be resolved.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NgApp</title>
<!-- Need to change this base href to proper folder hierarchy -->
<base href="/ng/">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="styles.ac89bfdd6de82636b768.bundle.css" rel="stylesheet" />
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="inline.318b50c57b4eba3d437b.bundle.js"></script>
<script type="text/javascript" src="polyfills.bf95165a1d5098766b92.bundle.js"></script>
<script type="text/javascript" src="main.2ed4448a22a867e8a468.bundle.js"></script>
</body>
</html>
import "babel-polyfill";
import Express from "express";
import * as bodyParser from "body-parser";
// import db from "./db/models/index.model";
import routes from "./routes/index.route";
import Logger from "./utils/logger.utils";
const path = require("path");
const cors = require("cors");
const port = 3000;
const app = Express();
export const logger = Logger;
// Enable CORS for getting requests from angular
app.use(cors())
app.use(bodyParser.json());
app.use(Express.static(path.join(__dirname, "public")));
/**
* Angular app serve route
* All routes starting with "ng" are routed to serve angular's "index.html"
*/
app.get("/ng/*", (req, res) => {
return res.sendFile(path.join(__dirname, "public", "ng", "index.html"));
});
app.use("/", routes);
app.listen(port, () => {
logger.info(`App is running on port: ${port}`);
});
process.on("exit", () => {
const date = new Date();
logger.info(`App closed on: ${date.toUTCString()}`);
process.exit();
});
process.on("SIGINT", () => {
const date = new Date();
logger.info(`App closed by user on: ${date.toUTCString()}`);
process.exit();
});
process.on("uncaughtException", err => {
const date = new Date();
logger.error(`App crashed on: ${date.toUTCString()}`, err);
process.exit();
});
process.on("unhandledRejection", err => {
const date = new Date();
logger.error(`App crashed on: ${date.toUTCString()}`, err);
process.exit();
});
@jyotendra
Copy link
Author

jyotendra commented Mar 23, 2018

Below is the folder structure for app:

image

The angular resides in "/public/ng". Have to setup "public" folder to serve static files, using:
app.use(Express.static(path.join(__dirname, "public")));

Next, Add a route (by the name of directory in which angular project is kept. In our case "ng"):

app.get("/ng/*", (req, res) => {
  return res.sendFile(path.join(__dirname, "public", "ng", "index.html"));
});

Finally, in angular's "index.html", change base to the folder name in which its kept:

<base href="/ng/">

Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment