npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

gen3-express

v1.1.3

Published

A gen3 tool to generate express app boilerplate.

Downloads

268

Readme

Gen3 Express

A gen3 tool to generate express app.

Acknowledgements

You need to know atleast basics about these things.

Installation

You can install and generate an express app using this tool in two approaches. Here I'm generating an app with name my-app, you can name to it anything you like.

1. node package extecutor

This method is highly recommended to generate an express app.

npx gen3-express my-app

2. node package manager

Generation of an express app is not recommended through npm.

npm install -g gen3-express
gen3-express my-app

Tailwind CSS

To get tailwind css boilerplate, you can add -t or --tailwindcss switches or flags while generating a site.

npx gen3-express my-app --tailwindcss

Usage

To add tailwindcss to your EJS page, use css/tailwind.css into a link tag.

<link href="css/tailwind.css" rel="stylesheet">

Because of tailwind updates css file according your needs, We need to run a tailwind sever with command below.

npm run tailwind
  • If you choosed tailwind css boilerplate then this server will run with dev keyword server.

Documentation

To install all dependencies goto the folder and execute npm install command.

cd my-app
npm install

To start a dev server to preview page use server keyword.

  • Keep in mind that the below command does not provide live reloading in EJS and public files.
npm run server

To get live reloading in EJS and public folder, create another server with sync keyword.

npm run sync

If you want to run all these servers together then you should to use this below command, this command will provide you hot reloadings in every place.

npm run dev

File Tree

To know about the project structure read about files included in this code block.

.
├── app.js
├── package.json
├── public
│   ├── css
│   │   └── style.css
│   └── fonts
│       └── sans.woff
├── sync.js # configuration for hot reloadings in ejs and static files.
├── utils
│   └── netface.js # contains functions to show available ipv4 addresses.
└── views
    └── home.ejs

Roadmap

  • Custom name in package.json file ✅
  • Excellent terminal user interface ✅
  • Post this project to npmjs website. ✅
  • Add Tailwind CSS support. ✅
  • Use a lightweight server for EJS live reloading. ⏩
  • Prompt package.json file's details from user. ⏩
  • Custom local template feature ⏩

Authors

Contributing

Contributions are always welcome!