A way to visualize nginx config files
- Display nginx config files in a tree diagram
- Switching between multiple config files with no page reload
- Resolve include files recursively
- Fully-configurable using .rc file(s)
- Hover mouse over nodes to see associated source code
- Right-click on nodes to scroll to source code from graph
- Node.js - Server-side Javascript
- NPM - Node package manager
- ExpressJS - Node webserver
- NodeGit - Asynchronous native Node bindings to libgit2
- GoJS - Interactive diagrams in HTML
- Mustache on Express - Templating language
- Webpack v1.x - Javascript module bundler and hot-reloading for client-side code
- highlightjs - Syntax highlighting for source code
- markjs - Javascript keyword highlighting
- babel - Javascript compiler to support ES6 syntax
- Blue Bird - Feature-rich Promise library
- Lodash - JS Utility library
- funcy - Functional pattern-matching
- rc - The non-configurable configuration loader for lazy people
- nodemon - Monitor and reload server-side changes
GET /
- homepagesPOST /data
- json representation of graph objectsPOST /source
- source files of nginx config
- Use npm to install dependencies
- Use webpack to process module *.js files into one compiled and optimized js file
- Load nginx config file using the "readline" lib in node
- Parse nginx config sections into graph objects with properties
- Link graph objects to their parents during parsing
- Return graph objects as a json array
- Define diagram properties
- Make an ajax call to
/data
to get graph objects - Render diagram on callback
- Define code block in HTML
- Make an ajax call to
/source
and set the code block to the source - Use highlightjs to highlight the code block on callback
- Clone the repo
$ git clone https://github.com/hobo05/nginx-graph.git
$ cd nginx-graph
$ cp .env-example .env
- Open up .env
- Update all the various fields
- Open up .nginxGraphrc and configure the application
- Install the dependencies and start the app
npm install
npm run local-dev
- Go to https://localhost:3000 (or whatever port you set in .env) to see the rendered diagram
- Since we've set up webpack-dev-middleware and webpack-hot-middleware, the client-side JS should compile and the page should automatically reload during development
Note: The reason we're using local-dev is because we're using nodemon to run the server instead of directly using node
- After performing the local setup and seeing that everything works, sign up for Heroku on the free plan with the button above
- Follow the tutorial for Getting Started on Heroku with Node.js if you don't know how Heroku works
- Create a new Heroku app from your project root
- Install https://github.com/xavdid/heroku-config and push your .env settings to heroku
- Run
heroku buildpacks:add --index 1 https://github.com/heroku/heroku-buildpack-apt
. This will tell heroku to run the Aptfile in the root of the project which installs necessary libraries for NodeGit before starting the app. See this github issue for more details - Run
git push heroku master
and it should be up in running in the cloud!