├── src ├── App │ ├── app.css │ ├── index.js │ └── app.scss └── index.js ├── .babelrc ├── .gitignore ├── project.config.json ├── index_template.ejs ├── dev └── index.html ├── LICENSE ├── package.json ├── webpack.config.prod.js ├── webpack.config.js └── README.md /src/App/app.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #ccc; 3 | } 4 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react", "es2015", "stage-1"], 3 | "plugins": ["react-hot-loader/babel"] 4 | } 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | 3 | /public 4 | 5 | *.DS_Store 6 | *.log 7 | 8 | # IntelliJ 9 | *.iml 10 | /.idea 11 | -------------------------------------------------------------------------------- /project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Your Project Title", 3 | "author": "Your Name", 4 | "repoName": "/fcc-react-project" 5 | } 6 | -------------------------------------------------------------------------------- /src/App/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | import './app.scss'; 4 | import './app.css'; 5 | 6 | export default class App extends Component { 7 | render() { 8 | return

Hello World!

; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /index_template.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | <%= htmlWebpackPlugin.options.title %> 6 | 7 | 8 |

9 | 10 | 11 | -------------------------------------------------------------------------------- /src/App/app.scss: -------------------------------------------------------------------------------- 1 | // begin bootstrap-sass imports 2 | $icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/'; 3 | @import '~bootstrap-sass/assets/stylesheets/bootstrap'; 4 | // end bootstrap-sass imports 5 | 6 | $main-font-color: #333333; 7 | 8 | body { 9 | color: $main-font-color; 10 | } 11 | -------------------------------------------------------------------------------- /dev/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Webpack Dev Server 4 | 5 | 6 | 7 |

8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import { AppContainer } from 'react-hot-loader'; 4 | 5 | import App from './App'; 6 | 7 | const rootElement = document.getElementById('app'); 8 | 9 | ReactDOM.render( 10 | 11 | 12 | , 13 | rootElement 14 | ); 15 | 16 | if (module.hot) { 17 | module.hot.accept('./App', () => { 18 | const NextApp = require('./App').default; 19 | ReactDOM.render( 20 | 21 | 22 | , 23 | rootElement 24 | ); 25 | }); 26 | } 27 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 Ar-Em J. Lampa 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fcc-react-project", 3 | "version": "1.0.0", 4 | "description": "A simple boilerplate for Free Code Camp React projects and exercises.", 5 | "main": "src/index.js", 6 | "scripts": { 7 | "start": "webpack-dev-server --progress", 8 | "build": "webpack -p --config webpack.config.prod.js --define process.env.NODE_ENV='\"production\"' --progress --colors", 9 | "deploy": "npm run build && gh-pages --dist public" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git@github.com:ibleedfilm/fcc-react-project.git" 14 | }, 15 | "keywords": [ 16 | "free code camp", 17 | "react", 18 | "boilerplate", 19 | "webpack", 20 | "github pages", 21 | "sass" 22 | ], 23 | "author": "Rem Lampa (http://www.remlampa.com)", 24 | "license": "MIT", 25 | "bugs": { 26 | "url": "https://github.com/ibleedfilm/fcc-react-project/issues" 27 | }, 28 | "homepage": "https://github.com/ibleedfilm/fcc-react-project#readme", 29 | "dependencies": { 30 | "react": "^15.4.2", 31 | "react-dom": "^15.4.2" 32 | }, 33 | "devDependencies": { 34 | "babel-core": "^6.22.1", 35 | "babel-loader": "^6.2.10", 36 | "babel-preset-es2015": "^6.22.0", 37 | "babel-preset-react": "^6.22.0", 38 | "babel-preset-stage-1": "^6.22.0", 39 | "bootstrap-sass": "^3.3.7", 40 | "clean-webpack-plugin": "^0.1.15", 41 | "css-loader": "^0.26.1", 42 | "extract-text-webpack-plugin": "^2.0.0-rc.3", 43 | "file-loader": "^0.10.0", 44 | "gh-pages": "^0.12.0", 45 | "html-webpack-plugin": "^2.28.0", 46 | "node-sass": "^4.5.0", 47 | "react-hot-loader": "^3.0.0-beta.6", 48 | "rimraf": "^2.5.4", 49 | "sass-loader": "^4.1.1", 50 | "style-loader": "^0.13.1", 51 | "webpack": "^2.2.1", 52 | "webpack-dev-server": "^2.3.0" 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /webpack.config.prod.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | const CleanWebpackPlugin = require('clean-webpack-plugin'); 4 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 5 | const ExtractTextPlugin = require('extract-text-webpack-plugin'); 6 | 7 | const project = require('./project.config.json'); 8 | 9 | const plugins = [ 10 | new CleanWebpackPlugin(['public']), 11 | new webpack.optimize.CommonsChunkPlugin({ 12 | name: 'commons', 13 | filename: 'js/common.js' 14 | }), 15 | new HtmlWebpackPlugin({ 16 | title: project.title, 17 | filename: '../index.html', 18 | template: 'index_template.ejs', 19 | inject: true, 20 | hash: true 21 | }), 22 | new ExtractTextPlugin('css/app.css') 23 | ]; 24 | 25 | module.exports = { 26 | context: path.resolve(__dirname, './'), 27 | entry: { 28 | 'app': './src' 29 | }, 30 | output: { 31 | path: path.join(__dirname, './public/assets'), 32 | publicPath: project.repoName + '/assets/', 33 | filename: 'js/[name].js' 34 | }, 35 | module: { 36 | rules: [ 37 | { 38 | test: /\.jsx?$/, 39 | exclude: [/node_modules/], 40 | use: 'babel-loader', 41 | include: path.join(__dirname, 'src') 42 | }, 43 | { 44 | test: /\.woff2?$|\.ttf$|\.eot$|\.svg$/, 45 | use: "file-loader" 46 | }, 47 | { 48 | test: /\.scss$/, 49 | use: ExtractTextPlugin.extract({ 50 | fallback: 'style-loader', 51 | use: [ 52 | 'css-loader?sourceMap', 53 | 'sass-loader?sourceMap' 54 | ] 55 | }) 56 | }, 57 | { 58 | test: /\.css$/, 59 | use: [ 60 | 'style-loader', 61 | 'css-loader?sourceMap' 62 | ] 63 | } 64 | ] 65 | }, 66 | resolve: { 67 | modules: [ 68 | path.join(__dirname, 'src'), 69 | 'node_modules' 70 | ], 71 | extensions: ['.js', '.jsx'], 72 | }, 73 | plugins: plugins, 74 | devtool: 'cheap-module-source-map' 75 | }; 76 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | const ExtractTextPlugin = require('extract-text-webpack-plugin'); 4 | 5 | const buildEntryPoint = entryPoint => { 6 | return [ 7 | 'react-hot-loader/patch', 8 | 'webpack-dev-server/client?http://localhost:3000', 9 | 'webpack/hot/only-dev-server', 10 | entryPoint 11 | ]; 12 | }; 13 | 14 | const plugins = [ 15 | new webpack.optimize.CommonsChunkPlugin({ 16 | name: 'commons', 17 | filename: 'common.js' 18 | }), 19 | new webpack.HotModuleReplacementPlugin(), 20 | new ExtractTextPlugin('app.css'), 21 | ]; 22 | 23 | module.exports = { 24 | context: path.resolve(__dirname, './'), 25 | entry: { 26 | app: buildEntryPoint('./src') 27 | }, 28 | output: { 29 | path: path.join(__dirname, 'dev'), 30 | publicPath: '/', 31 | filename: '[name].js' 32 | }, 33 | module: { 34 | rules: [ 35 | { 36 | test: /\.jsx?$/, 37 | exclude: [/node_modules/], 38 | use: 'babel-loader', 39 | include: path.join(__dirname, 'src') 40 | }, 41 | { 42 | test: /\.woff2?$|\.ttf$|\.eot$|\.svg$/, 43 | use: 'file-loader' 44 | }, 45 | { 46 | test: /\.scss$/, 47 | use: ExtractTextPlugin.extract({ 48 | fallback: 'style-loader', 49 | use: [ 50 | 'css-loader?sourceMap', 51 | 'sass-loader?sourceMap' 52 | ] 53 | }) 54 | }, 55 | { 56 | test: /\.css$/, 57 | use: [ 58 | 'style-loader', 59 | 'css-loader?sourceMap' 60 | ] 61 | } 62 | ] 63 | }, 64 | resolve: { 65 | modules: [ 66 | path.join(__dirname, 'src'), 67 | 'node_modules' 68 | ], 69 | extensions: ['.js', '.jsx'] 70 | }, 71 | plugins: plugins, 72 | devServer: { 73 | historyApiFallback: true, 74 | contentBase: path.resolve(__dirname, 'dev'), 75 | hot: true, 76 | inline: true, 77 | stats: { 78 | assets: true, 79 | colors: true, 80 | version: false, 81 | hash: false, 82 | timings: true, 83 | chunks: false, 84 | chunkModules: false 85 | }, 86 | port: 3000 87 | }, 88 | devtool: 'source-map' 89 | }; 90 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # fcc-react-project 2 | 3 | A simple boilerplate for [Free Code Camp](https://www.freecodecamp.com) React 4 | projects and exercises. 5 | 6 | Features **Webpack Dev Server**, **Hot React Module Reloading**, **SASS**, 7 | **Bootstrap** and **GitHub Pages Deployment.** 8 | 9 | ## Rationale 10 | 11 | Free Code Camp suggests that its students use [Codepen](http://codepen.io) in 12 | working with projects and exercises related to React. The problem with that is 13 | most employers would want to see code in an applicant's GitHub profiles. 14 | 15 | This project aims to provide the Free Code Camp students the tool to use GitHub 16 | and GitHub Pages instead of Codepen as a showcase for their React projects, 17 | exercises, and experiments to further bolster their chances at landing that 18 | dream dev job. At the same time, students will become more accustomed to 19 | development tools like the command line, Git, NPM, and Webpack. 20 | 21 | Usage of this boilerplate results in the student's project having its own website 22 | hosted at https://username.github.io/project-name. 23 | 24 | The project has only the bare essentials to showcase a project in its own GitHub 25 | page. Students will still need to set up features like `react-router`, `redux`, 26 | code splitting, and unit testing by themselves. 27 | 28 | ## Requirements 29 | 30 | - [Node.js and NPM](https://nodejs.org/en/download/) 31 | - [Git](https://git-scm.com/downloads) 32 | - [Sass](http://sass-lang.com/install) 33 | 34 | ## Installation 35 | 36 | 1. `$ git clone https://github.com/ibleedfilm/fcc-react-project.git name-of-your-project` 37 | 38 | 2. `$ cd name-of-your-project` 39 | 40 | 3. `$ npm install` 41 | 42 | ## Configuration and Initial GitHub Set-Up 43 | 44 | 1. Create GitHub Repository. 45 | 46 | This will host your project's files. 47 | 48 | [Follow this guide](https://help.github.com/articles/creating-a-new-repository/) 49 | but DON'T initialize the new repository with `README`, license, or `gitignore` 50 | files. 51 | 52 | Take note of the repository's URL. 53 | 54 | 2. Edit `project.config.json` file: 55 | 56 | - `title` - Your project's name or title 57 | 58 | - `author` - Your name 59 | 60 | - `repoName` - The name of the GitHub repository you created in `step 1` (i.e. 61 | if the repo is in https://github.com/ibleedfilm/my-new-project, `repoName` 62 | should be `/my-new-project`) 63 | 64 | 3. Edit the following in `package.json` file: 65 | - `name` 66 | - `version` 67 | - `description` 68 | - `repository.url` 69 | - `keywords` 70 | - `author` 71 | - `bugs.url` 72 | - `homepage` 73 | 74 | 4. Delete and create your own `README.md` file. 75 | 76 | 5. `$ git remote rm origin` 77 | 78 | 6. `$ git remote add origin your-repository-url` 79 | (i.e. _git remote add origin https://github.com/your-username/your-react-project.git_) 80 | 81 | 7. `$ git add .` 82 | 83 | 8. `$ git commit -m "First commit"` 84 | 85 | 9. `$ git push origin master --set-upstream` 86 | 87 | ## Usage 88 | 89 | - `$ npm start` - Fires up Webpack's development server with hot module reloading. 90 | Local site can be accessed at `http://localhost:3000` 91 | 92 | - `$ npm run deploy` - Builds your app in the `gh-pages` git branch and deploys 93 | it in GitHub Pages which can be accessed at `https://your-username.github.io/your-project-name` 94 | 95 | - React source files reside in `src` folder. For the most part, this should be 96 | your working folder. 97 | 98 | - Styles may use SASS `*.scss` format. 99 | 100 | - If Bootstrap is needed, it may be imported by adding the following code at the top of the main SCSS file: 101 | 102 | ```sass 103 | $icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/'; 104 | 105 | @import '~bootstrap-sass/assets/stylesheets/bootstrap'; 106 | ``` 107 | 108 | - `webpack.config.js` is the configuration file for Webpack Dev Server 109 | 110 | - `webpack.config.prod.js` is the configuration file for Webpack's production 111 | build process 112 | 113 | - `public` folder will contain build files from Webpack and SASS. This will be 114 | automatically generated, so you don't have to bother yourself with it. 115 | 116 | - `dev` folder contains files needed by Webpack Dev Server to render the app. 117 | You don't need to tinker with this folder unless you make breaking changes to 118 | `webpack.config.js`. 119 | 120 | - `index_template.ejs` helps Webpack render production HTML file for deployment. 121 | There's nothing much you need to change in this file. 122 | 123 | ## CONTRIBUTING 124 | 125 | If you're interested in helping out, kindly fork this project and submit pull 126 | requests. 127 | 128 | You may also use the project's [Issues Page](https://github.com/ibleedfilm/fcc-react-project/issues) 129 | to submit bug reports and feature requests. 130 | 131 | Thanks in advance! ^_^ 132 | 133 | ## LICENSE 134 | This project is licensed under the MIT License - see the [LICENSE](LICENSE) file 135 | for details. 136 | --------------------------------------------------------------------------------