Static Files

Lesson Objectives

  1. Create a static files folder for CSS/JS

Create a static files folder for CSS/JS

  • CSS/JS code doesn't change with server-side data

  • We can toss any static files into a 'public' directory

    • static means unchanging
    • dynamic means changing depending on data

Let's set up a directory for our static code:

  1. Create a directory called public
  2. Inside the public directory create a directory called css
  3. Inside the css directory, create an app.css file
  4. Put some CSS in the app.css file
  5. Inside server.js place the following near the top:

CSS

@import url('https://fonts.googleapis.com/css?family=Comfortaa|Righteous');

body {
  background: url(https://images.clipartlogo.com/files/istock/previews/8741/87414357-apple-seamless-pastel-colors-pattern-fruits-texture-background.jpg);
  margin: 0;
  font-family: 'Comfortaa', cursive;
}

h1 {
  font-family: 'Righteous', cursive;
  background: antiquewhite;
  margin:0;
  margin-bottom: .5em;
  padding: 1em;
  text-align: center;
}

a {
  color: orange;
  text-decoration: none;
  text-shadow: 1px 1px 1px black;
  font-size: 1.5em;
  background: rgba(193, 235, 187, .9);
}

a:hover {
  color: ghostwhite;
}

li {
  list-style: none;
}

li a {
  color: mediumseagreen;
}

input[type=text] {
  padding: .3em;
}

input[type=submit] {
  padding: .3em;
  color: orange;
  background: mediumseagreen;
  font-size: 1em;
  border-radius: 10%;
}
```javascript
app.use(express.static('public')); //tells express to try to match requests with files in the directory called 'public'
```

  1. In your views/layout/Default.jsx, you can now call that css file

    <link rel="stylesheet" href="/css/app.css">

Section 2

Deployment

Roadmap

  1. Make a new github repository.
  2. set up environmental variables.
  3. Remove node_modules.
  4. Get started with deployment services.
  5. Create app.
  6. Attach MongoDB Atlas.
  7. Update code.
  8. Push git to deployment.

New Github Repository But verify you have a valid .gitignore file


Choose

  • a repository name
  • public (let your instructors help you if you get stuck, you can always change this later)
  • don't initialize with a README
  • don't Add .gitignore
  • dont add license - optional

Press the Create Repository button when you're ready!

In Terminal type git remote add origin and then paste the URL that you copied from github

Set the Node Engine

You should always specify a Node.js version that matches the runtime you're developing and testing with. Without setting this, your deployment service will 'guess' a version Node.js for you. One big gotcha is that some newer/updated npm packages just won't run on an older version of Node.js and vice versa.

So let's set the correct version:

In Terminal

node --version

The line returned is the version, currently, I have v14.17.0, but you should set it to whatever your version is.

In package.json, you can add engines anywhere, just make sure you don't break the JSON format. In this example we are putting it between the auto-generated version and description fields. Don't forget double quotes and a ,

  "version": "1.0.0",
  "engines": {
    "node": "14.17.0"
  },
  "description": "",

Test your app

  • If your express app doesn't run locally it definitely won't run in deployment!
  • test it out and fix any bugs

git add/git commit

  • git add .
  • git commit -m 'Some Message'
  • git branch -M main <- only do this the first time you push to github
  • git push -u origin main <--- only add -u the first time you push to github

Check this step carefully! Make sure node_modules are NOT on github!! If they made it to github, that means they are not being ignored by .gitignore. If you don't properly ignore them now you'll have massive headaches with deployment later!

If You Need to Remove node_modules

In order for deployment to work, you can't have node_modules in your repo. Instead, your deployment service will add this dir itself!

  1. go to local repo dir
  2. rm -rf node_modules
  3. use git to: add, then commit, push
  4. touch .gitignore
  5. code .gitignore
  6. add a line that says just node_modules to .gitignore
  7. save .gitignore
  8. git: add, commit, push
  9. to get it working locally again: npm install

Verify you Attached MongoDB Atlas

Just use your connection string as your DATABSE_URL.

Make sure you added .env and a .gitignore to exclude your .env file from your git repository.

In your server.js

// in your code
const PORT = process.env.PORT || 8000

// at the bottom
app.listen(PORT, () => {
  console.log('We in the building', PORT)
})

Push Git

  • First update your remote repo so you're code is up to date.

    • git add -A
    • git commit -m "updating code for deployment"
    • git push origin main
  • Now also push to deployment

Wait 1 minute, then you should be able to have your deployed app open up in your browser.

  • If thing's don't work out, relax and try to find out the error.

Troubleshooting

Having weird errors?

Deployment Can't Figure Out Your Language

  • the hidden folder .git and package.json MUST be on the same level in your directory (the root)

Check that your have ignored node modules

Your node modules should NOT appear on github

no node modules

If you have not ignored your node modules, follow the steps listed above to remove and ignore them

Check that your config variables match

In your deployment service, under your app and its settings, Reveal Config Vars

In your own app, make sure you have your databse url equal to process.env and then .DATABSE_URL

and in your .env fileDATABASE_URL=thecorrectmongostring

It won't work if you make it a different variable name (lowercase, no underscore) - do not change it in your deployment! If you change it there you'll have to hunt how to update more things. Just set it in your own app.

Note: your the variable for the port is not listed, but it must be PORT all caps. It is accessed by process.env.PORT

Copyright © Per Scholas 2023