dev-server-details v1.3.1

Dev-Server-Details

A small library to provide information of your development setup inside the console.

Note: This is the default theme with the the 'Gruvbox Material Dark' VS-Code theme.

Installing

You can install the library via npm:

npm i dev-server-details

Overview

The presentDetails method will log your current environment, your local address, the ip address and the hostname to the console. You can configure the theme as well as the actual text of the message using the inbuilt configuration API.

Usage

Import the presentDetails method into your main.js file.

import { presentDetails } from 'dev-server-details';

// when creating your https server, you can pass in the
// presentDetails method as the callback
// and pass the chosen Port to it
// The example below does this with a simple express server,
// but any kind of HTTP Server will work.

import Express from 'express';
const App = Express();

const PORT = process.env.PORT || 31415;

// create the server, and pass the presentDetail method as callback.

App.listen(PORT, presentDetails({ PORT }));

Once your file runs and the server is created, you should see the details logged to your console.

API Reference

The following section describes all objects and methods exported by dev-server-details, the most important one being the presentDetails method, which is used to generate the Detailed report.

presentDetails()

The presentDetails method takes a single object as argument. The object is used to pass the PORT to the method as well as customize theming and the text output. It's properties are:

Note: The PORT property is all uppercase per convention, as unchangeable constants should be all uppercase.

The Method's output will be logged to the console and contain the type of environment, as well as the local, ipv4 and hostname address of your server. The environment will default to "Development" unless process.env.production is set to true.

colours {}

The colours object contains the escape codes to style the output of the console. This can be used to create a custom Theme. A reference to all codes and their property names is below:

colours.pallete()

A simple method to log all available colours to the console, to get a better understanding of what the colours look like.

import { colours } from 'dev-server-details';

colours.pallete();
// Thus will log all available colours to the console.

themes {}

The themes object contains the default theme as well as a collection of different themes inspired by the seasons. You can use these predefined themes to style your output.

You can pass a prebuilt or custom theme like below:

import { presentDetails, themes } from 'dev-server-details';

// this will use the spring theme for the output
App.listen(PORT, presentDetails({ PORT, userTheme: themes.spring }));

Theming

Instead of relying on a prebuilt theme, you can create your own theme. To do this, you simply create a theme object and pass it to the presentDetails method as the userTheme property.

The theme object can contain four different properties that will style different sections of the output.

Omitting one of the properties is fine, in that case the default style will be used as a fallback.

Texting

You can also change the text of the output via the userText property of the presentDetails method. Certain values are exposed to the text and can be included using a double curly braces syntax. You can see the default text as an example below.

// the object containing the default text

const defaultText = {
	heading: 'Dev-Server-Details:',
	main: `{{environment}} Environment served to:`,
	text: [
		'Local:    {{local}}',
		'On your network:  {{ip}}',
		'Or via hostname:  {{hostname}}',
	],
	notice: 'To follow the links, double-click or [Cmd]-click on MacOs.',
};

Note: The text property has to be an array, even if it only contains one string.

The properties used to describe the different text elements are heading, main, text & notice. Omitting one of the properties is fine, the method will use the default text as fallback. To enable printing values inside the strings, see the list of exposed values below:

You can use these values with the curly braces syntax demonstrated above.

Note: You can also use template literals to inject styles directly into the provided Strings.

License

dev-server-details is licensed under the MIT License