Express + Bootstrap 개발

• Bootstrap 을 하나 다운로드한다. 
  • Google 에 아래와 같이 "free bootstrap templates" 라고 검색하면 다양한 site 들이 나온다. 
  • Site 에 들어가서 자신의 porject 에 적당한 template 를 선택하여 download 받는다. 

 

• 예를 들어 "alien-1.0.0.zip" 를 다운로드 받았다면, 앞출을 푼다. 
• 그안에 보면 다음과 같은 디렉토리 들이 있다. 

 

• "css" , "images" 그리고 "js"  디렉토리를 복사해여, 내 express 디렉토리 내부의 "public" 폴더에 붙여놓기 한다.  
  

  

  
  
  
• html 파일들을 복하여, 내 express 디렉토리 내부의 "views" 폴더에 붙여놓기 한다. 
• .html 을 .ejs 로 변경한다. 
• web.js 에서 다음과 같이 /views 와 /public 폴더를 설정해 둔다. 

const express    = require('express')
const mysql      = require('mysql')
const dbconfig   = require('./config/database.js')
const connection = mysql.createConnection(dbconfig)  //mysql object
const app        = express()                         //express object
const path       = require('path')
const ejs        = require('ejs')                    //ejs object 
const bodyParser = require('body-parser') 

//set port #
app.set('port',process.env.PORT || 8001) 

//set ejs engien 
app.set('view engine','ejs')

//for cafe24 web hosting
app.set('views', __dirname + '/views');

//use the public direcotyr as shared amoung all threads , and for cafe24
app.use(express.static(path.join(__dirname + '/public')))

 

 

해당 프로젝트를 cafe24 에 push 하고, 내 webpage로 가면, bootstrap template 가 적용된 것을 볼 수 있다. 

 

 

### 참조 ###

https://bootswatch.com/

Bootswatch: Free themes for Bootstrap