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

# DEV CONFIG 
NODE_ENV='development'
PORT=3000
HOST='localhost'

# PROD CONFIG
# NODE_ENV='production'
# PORT=80
# HOST='0.0.0.0'

To Start the Development Server

npm start

or

npm run start:dev 

To generate a production-ready build, run:

npm run build

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

# DEV CONFIG 
# NODE_ENV='development'
# PORT=3000
# HOST='localhost'

# PROD CONFIG
NODE_ENV='production'
PORT=80
HOST='0.0.0.0'

and run

npm start

or

npm start:prod

Folder Structure

super-dynamic-server/ 
	├── config/ # Webpack configurations │ 
		├── dev.config.js # Development mode Webpack configuration 
		│── prod.config.js # Production mode Webpack configuration 
	├── dist/ # Build folder for production, do not delete files will be generated here in dev mode
	├── public/ # Static assets (images, fonts, etc.) │ 
	├── src/ # Application client side files 
	  ├── index.js # Main JavaScript entry point │ 
		├── App.js # Example React component (can be Vanilla JS) │ 
		├── css/ 
				├── main.css # compiled / minified of CSS from SCSS files
		├── scss/ 
				├── main.scss # File that gets compiled to main.css
	│ └── index.html # HTML template used by HtmlWebpackPlugin 
	├── gulpfile.js # Gulp tasks (SCSS compilation, clean, etc.) 
	├── server.js # server entry file
	└── 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.