Skip to content

Instantly share code, notes, and snippets.

@rib3ye
Last active September 24, 2024 18:58
Show Gist options
  • Save rib3ye/f94678778d47b73c888e1632b722bd3b to your computer and use it in GitHub Desktop.
Save rib3ye/f94678778d47b73c888e1632b722bd3b to your computer and use it in GitHub Desktop.
Start a new npm project with nodemon and open sublime and chrome on a mac
#!/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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment