Skip to content

Instantly share code, notes, and snippets.

@jyotendra

jyotendra/index.html

Last active March 23, 2018 11:58
Show Gist options
  • Save jyotendra/0595b1f202158fcf1c6ba1686e654752 to your computer and use it in GitHub Desktop.
Save jyotendra/0595b1f202158fcf1c6ba1686e654752 to your computer and use it in GitHub Desktop.
Download ZIP
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.
Raw
index.html
<!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>
Raw
server.js
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 •
edited
Loading

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/">

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