create-dynamic-server

A CLI tool for quickly setting up a new project with the Super Dynamic Server template. It clones the template from a GitHub repository, installs dependencies, and prepares the project for development with hot-reloading and SCSS support.

Create project with npx create-dynamic-server

You can use this tool directly with npx:

npx create-dynamic-server my-app

or cd into folder you want to use and run

npx create-dynamic-server .

• Installs dependencies automatically.
• Sets up a new project without Git history.
• untracks .env file

Features

• Express for serving the application.
• Webpack for bundling JavaScript and CSS.
• Gulp for defining tasks for automating development and build workflows
• Hot Module Replacement with Webpack for speedy development — live updates browser on edits to JS, SCSS, or CSS files in the /src directory without requiring a full page reload.
• Nodemon to automatically restart the Express server when changes are detected in the server.js file or anything in the /api directory — ensuring that the server stays up to date during development without manual restarts.
• Support for Vanilla JavaScript, React, and other preferred JS frameworks frameworks
• Easy Node module imports on the front end

Configure the environment you wish to run through the env by commenting out the one you wish to use — default is development

(note: if you cloned this repo directory w/o using npx, add your .env to the .gitignore

1# DEV CONFIG 
2NODE_ENV='development'
3PORT=3000
4HOST='localhost'
5
6# PROD CONFIG
7# NODE_ENV='production'
8# PORT=80
9# HOST='0.0.0.0'

To Start the Development Server

1npm start

or

1npm run start:dev 

To generate a production-ready build, run:

1npm run build

To build & run production you can uncomment prod configs and uncomment dev configs in your .env

1# DEV CONFIG 
2# NODE_ENV='development'
3# PORT=3000
4# HOST='localhost'
5
6# PROD CONFIG
7NODE_ENV='production'
8PORT=80
9HOST='0.0.0.0'

and run

1npm start

or

1npm start:prod

Folder Structure

1super-dynamic-server/ 
2	├── config/ # Webpack configurations │ 
3		├── dev.config.js # Development mode Webpack configuration 
4		│── prod.config.js # Production mode Webpack configuration 
5	├── dist/ # Build folder for production, do not delete files will be generated here in dev mode
6	├── public/ # Static assets (images, fonts, etc.) │ 
7	├── src/ # Application client side files 
8	  ├── index.js # Main JavaScript entry point │ 
9		├── App.js # Example React component (can be Vanilla JS) │ 
10		├── css/ 
11				├── main.css # compiled / minified of CSS from SCSS files
12		├── scss/ 
13				├── main.scss # File that gets compiled to main.css
14	│ └── index.html # HTML template used by HtmlWebpackPlugin 
15	├── gulpfile.js # Gulp tasks (SCSS compilation, clean, etc.) 
16	├── server.js # server entry file
17	└── package.json 

Customization

Changing Front-End Frameworks

You can easily swap out React for any other front-end framework (like Vue or Angular) by replacing the relevant dependencies and modifying src/index.js and webpack.config.js accordingly.

You can modify src/index.js for your preferred framework:

Using Vanilla JavaScript

import html from "./component.html";
document.body.innerHTML = html;

Using React

import React from 'react';
import ReactDOM from 'react-dom/client';
import './css/main.css';

const App = () => <h1>Hello, React!</h1>;

const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);

root.render(<App />);

Gulp Task Automation

The gulpfile.js includes several preconfigured tasks for SCSS compilation, cleaning the build directory, and more. Feel free to extend or modify it to suit your workflow.

---