rib3ye · September 24, 2024 18:58
diff --git a/new-node-site.sh b/new-node-site.sh
 #!/bin/bash

 # Permissions issue?
 # MAKE SURE YOU chmod +x new-node-site.sh

 # Step 1: Check if the project name is provided as an argument
 if [ -z "$1" ]
 then
  echo "Error: No project name provided."
  echo "Usage: ./setup-node-project.sh <project_name>"
  exit 1
 fi

 # Step 2: Use the first argument as the project name
 project_name=$1
 mkdir $project_name
 cd $project_name

 # Step 3: Initialize npm and create package.json
 npm init -y

 # Step 4: Install Express, nodemon, and browser-sync
 npm install express
 npm install --save-dev nodemon browser-sync

 # Step 5: Create app.js and configure it to serve static files
 cat <<EOL > app.js
 const express = require('express');
 const path = require('path');
 const app = express();

 // Serve static files from the 'public' directory
 app.use(express.static(path.join(__dirname, 'public')));

 // Set up a route for the homepage to serve the index.html file
 app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
 });

 // Set the server to listen on port 3000
 const port = 3000;
 app.listen(port, '0.0.0.0', () => {
  console.log(\`Server is running on http://localhost:\${port}\`);

  // Set up BrowserSync
  if (process.env.NODE_ENV !== 'production') {
    const browserSync = require('browser-sync').create();
    browserSync.init({
      proxy: \`localhost:\${port}\`,
      files: ['public/**/*.*'],
      open: false,
      notify: false
    });
  }
 });
 EOL

 # Step 6: Create the public directory, images, css, and fonts directories
 mkdir -p public/images public/css public/fonts public/favicons

 # Step 7: Create reset.css in the css directory with Eric Meyer's CSS reset
 cat <<EOL > public/css/reset.css
 /* Eric Meyer's CSS Reset v2.0 */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, embed, 
 figure, figcaption, footer, header, hgroup, 
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, 
 footer, header, hgroup, menu, nav, section {
  display: block;
 }
 body {
  line-height: 1;
 }
 ol, ul {
  list-style: none;
 }
 blockquote, q {
  quotes: none;
 }
 blockquote:before, blockquote:after,
 q:before, q:after {
  content: '';
  content: none;
 }
 table {
  border-collapse: collapse;
  border-spacing: 0;
 }
 EOL

 # Step 8: Create styles.css in the css directory with media queries for common screen sizes
 cat <<EOL > public/css/styles.css
 /* Custom styles for the Node.js app */
 body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    color: #333;
    padding: 20px;
 }

 /* Media Queries for common screen sizes */

 /* Mobile devices (max-width: 600px) */
 @media (max-width: 600px) {
    body {
        background-color: #e0f7fa;
    }

    h1 {
        font-size: 1.5em;
    }
 }

 /* Tablet devices (min-width: 601px and max-width: 1024px) */
 @media (min-width: 601px) and (max-width: 1024px) {
    body {
        background-color: #fff59d;
    }

    h1 {
        font-size: 2em;
    }
 }

 /* Desktop devices (min-width: 1025px) */
 @media (min-width: 1025px) {
    body {
        background-color: #f0f0f0;
    }

    h1 {
        font-size: 2.5em;
    }
 }
 EOL

 # Step 9: Create index.html and link reset.css and styles.css, with "hiya :)" as the title
 cat <<EOL > public/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hiya :)</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/styles.css">
 </head>
 <body>
    <h1>hiya :)</h1>
 </body>
 </html>
 EOL

 # Step 10: Add nodemon script in package.json
 jq '.scripts.start = "nodemon app.js"' package.json > tmp.json && mv tmp.json package.json

 # Step 11: Open the project directory and a specific file in Sublime Text
 subl . public/index.html public/css/styles.css --command "new_pane"
 open ./public

 # Step 12: CD into the project directory with a static path
 project_path=$(pwd)
 echo "Changing to project directory: $project_path"
 cd "$project_path" || exit

 # Step 13: Open Google Chrome to localhost:3000
 echo "Opening Google Chrome to http://localhost:3000"
 open -a "Google Chrome" http://localhost:3000

 # Step 14: Output success message
 echo "Project setup complete! The server is running at http://localhost:3000"

 # Step 15: Run npm start
 npm start
	#!/bin/bash

	# Permissions issue?
	# MAKE SURE YOU chmod +x new-node-site.sh

	# Step 1: Check if the project name is provided as an argument
	if [ -z "$1" ]
	then
	echo "Error: No project name provided."
	echo "Usage: ./setup-node-project.sh <project_name>"
	exit 1
	fi

	# Step 2: Use the first argument as the project name
	project_name=$1
	mkdir $project_name
	cd $project_name

	# Step 3: Initialize npm and create package.json
	npm init -y

	# Step 4: Install Express, nodemon, and browser-sync
	npm install express
	npm install --save-dev nodemon browser-sync

	# Step 5: Create app.js and configure it to serve static files
	cat <<EOL > app.js
	const express = require('express');
	const path = require('path');
	const app = express();

	// Serve static files from the 'public' directory
	app.use(express.static(path.join(__dirname, 'public')));

	// Set up a route for the homepage to serve the index.html file
	app.get('/', (req, res) => {
	res.sendFile(path.join(__dirname, 'public', 'index.html'));
	});

	// Set the server to listen on port 3000
	const port = 3000;
	app.listen(port, '0.0.0.0', () => {
	console.log(\`Server is running on http://localhost:\${port}\`);

	// Set up BrowserSync
	if (process.env.NODE_ENV !== 'production') {
	const browserSync = require('browser-sync').create();
	browserSync.init({
	proxy: \`localhost:\${port}\`,
	files: ['public/*/.*'],
	open: false,
	notify: false
	});
	}
	});
	EOL

	# Step 6: Create the public directory, images, css, and fonts directories
	mkdir -p public/images public/css public/fonts public/favicons

	# Step 7: Create reset.css in the css directory with Eric Meyer's CSS reset
	cat <<EOL > public/css/reset.css
	/* Eric Meyer's CSS Reset v2.0 */
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed,
	figure, figcaption, footer, header, hgroup,
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	}
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure,
	footer, header, hgroup, menu, nav, section {
	display: block;
	}
	body {
	line-height: 1;
	}
	ol, ul {
	list-style: none;
	}
	blockquote, q {
	quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
	content: '';
	content: none;
	}
	table {
	border-collapse: collapse;
	border-spacing: 0;
	}
	EOL

	# Step 8: Create styles.css in the css directory with media queries for common screen sizes
	cat <<EOL > public/css/styles.css
	/* Custom styles for the Node.js app */
	body {
	font-family: Arial, sans-serif;
	background-color: #f0f0f0;
	color: #333;
	padding: 20px;
	}

	/* Media Queries for common screen sizes */

	/* Mobile devices (max-width: 600px) */
	@media (max-width: 600px) {
	body {
	background-color: #e0f7fa;
	}

	h1 {
	font-size: 1.5em;
	}
	}

	/* Tablet devices (min-width: 601px and max-width: 1024px) */
	@media (min-width: 601px) and (max-width: 1024px) {
	body {
	background-color: #fff59d;
	}

	h1 {
	font-size: 2em;
	}
	}

	/* Desktop devices (min-width: 1025px) */
	@media (min-width: 1025px) {
	body {
	background-color: #f0f0f0;
	}

	h1 {
	font-size: 2.5em;
	}
	}
	EOL

	# Step 9: Create index.html and link reset.css and styles.css, with "hiya :)" as the title
	cat <<EOL > public/index.html
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>hiya :)</title>
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/styles.css">
	</head>
	<body>
	<h1>hiya :)</h1>
	</body>
	</html>
	EOL

	# Step 10: Add nodemon script in package.json
	jq '.scripts.start = "nodemon app.js"' package.json > tmp.json && mv tmp.json package.json

	# Step 11: Open the project directory and a specific file in Sublime Text
	subl . public/index.html public/css/styles.css --command "new_pane"
	open ./public

	# Step 12: CD into the project directory with a static path
	project_path=$(pwd)
	echo "Changing to project directory: $project_path"
	cd "$project_path" \|\| exit

	# Step 13: Open Google Chrome to localhost:3000
	echo "Opening Google Chrome to http://localhost:3000"
	open -a "Google Chrome" http://localhost:3000

	# Step 14: Output success message
	echo "Project setup complete! The server is running at http://localhost:3000"

	# Step 15: Run npm start
	npm start