Last active
September 24, 2024 18:58
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#!/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