Demo: http://brandi-react.surge.sh/
PSD Mockup: Brandi One Page PSD Template
CI/CD Build: https://travis-ci.org/cndragn/brandi-mockup
Developing a PSD into a fully featured React website
ReactJS, Bootstrap, Sass, Travis-CI, Jest, Enzyme
CI/CD w Integrated testing & automatic deployment
- Clone brandi repo and cd into it
- terminal:
npm start
- terminal:
- To process Sass
- in seperate terminal:
npm run sass
- in seperate terminal:
- terminal:
gem install sass
- In
package.json
's scripts, add this line:"sass" : "sass --watch src/styles/scss:src/styles/css"
- Create your custom bootstrap theme file
src/styles/scss/custom.scss
- Open a new tab in terminal:
npm run sass
- In src/index.js replace
import 'bootstrap/dist/css/bootstrap.css';
withimport './styles/css/custom.css';
- At bottom of custom.scss file add
@import "../../../node_modules/bootstrap/scss/bootstrap";
Deploy to Surge
- Update api in IdeaForm.js and IdeasContainer.js from localhost:3001
- terminal:
npm run build
- terminal:
surge
- Log in or create account at prompt
- Add
build
at end of project path - Change project url if desired, ending with surge.sh
Update project on Surge
- terminal:
npm run build
- terminal:
surge
- Log in at prompt
- Add
build
at end of project path - Change project url to project being updated
Design: kreativeshowecase.com Brandi One Page PSD Template
Header background: pixabay 1990470
Team Photos: pixabay & pexals