Gen3 Express

A gen3 tool to generate express app.

Acknowledgements

You need to know atleast basics of these technologies.

• NodeJS
• ExpressJS
• Embedded JS

Installation

You can 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 switch or flag while generating a site.

npx gen3-express my-app --tailwindcss

Usage

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

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

We have to run a tailwind sever with the below command, because tailwindcss regularly update css file according to your needs.

npm run tailwind

• You can run frontend, backend and tailwind servers parallelly using dev keyword.

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.

• The below command does also provide live reloading in frontend and public files.

npm run server

If you want to run all servers together (especially tailwindcss) then you should to use the below command, this command provides multiple servers parallelly.

npm run dev

File Tree

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

• In case of tailwindcss, the boilerplate contains additional files like tailwind.config.js for tailwindcss configs.

.
├── app.js
├── package.json
├── public
│   ├── css
│   │   └── style.css
│   └── fonts
│       └── sans.woff
├── nodemon.json # configs for hot reloadings in frontend and backend.
├── 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

• @OurCodeBase

Contributing

Contributions are always welcome!