Redux + Express Website BoilerPlate

기본 웹 레이아웃으로 구성된 보일러플레이트입니다.
라우팅은 react-router v3을 사용합니다.

back-end는 express를 사용하고 있으며, front-end는 react+redux를 사용하고 있습니다.
브라우저 확장프로그램 redux-devtools를 이용하여 시간여행 디버깅을 지원합니다.
스타일은 기본적으로 SASS를 사용하며 부트스트랩도 추가되어있습니다.
자세한 특징은 Features 항목을 참고해주세요



Installation

Github 바로가기

If you are using a yarn, you can install a yarn instead npm install

# Git Clone
# mypage is your project name
git clone https://github.com/sonim1/redux-express-website-boilerplate.git mypage
cd mypage
 
# Package Install
npm install
 
# build
npm run build
 
npm run start       # start production
npm run development # start development
mypage/
├── build/
├── public/
│   └── index.html
├── server/
│   └── app.js
├── src/
│   ├── actions/
│   ├── components/
│   ├── containers/
│   ├── reducers/
│   ├── store/
│   ├── styles/
│   └── index.js
├── .babelrc
├── .eslintignore
├── .eslintrc
├── package.json
├── webpack.config.js
└── webpack.dev.config.js

  • build/ : Express server 빌드파일 입니다.

  • public/ : Application 빌드파일 입니다.

    • npm run build 명령어로 bundle.js, css/main.css, fonts/[fontfiles]를 생성합니다.

    • index.html <- 어플리케이션의 기본호출되는 파일입니다. bundle.js와 cssmain.css를 호출합니다.

  • server/ : Express server 소스폴더

    • 현재는 기본적인 routing과 static path설정, 개발을 위한 webpack-dev-server 설정만 되어있습니다.

    • 사용자가 원하는 express기능을 이 폴더 내에서 직접 커스텀 가능합니다.

  • src/ : Application 소스폴더

    • react+redux로 만들어진 어플리케이션의 소스폴더 입니다.

Features

이 보일러플레이트는 아래 기술로 구성되어 있습니다.

Back-end

Front-end

Using Time Machine Debugging

enter image description here

시간여행 디버깅을 사용하기 위해 devtools가 필요합니다.
각 브라우저에 확장 프로그램을 설치 해야하며, 자세한 설치 가이드는 아레 링크를 통해서 확인하실 수 있습니다.

Redux Devtools Extension Installation Guide


마치며

개인적으로 작업해야 할 일이 생겨서 create-react-app으로 작업을 하려 했으나, 만족스럽지 못한 부분이 있어서 처음부터 만들어봤습니다.

각종 플러그인들이 업데이트되면서 많이 달라져 예상외로 많이 애먹었습니다.

결국 생각보다 시간을 많이 잡아먹었지만 많은 공부가 됐네요




저작자표시