Basic Github search app
After confirming that your development environment meets the specified requirements, you can follow these steps to get the project up and running:
$ git clone https://github.com/prescottprue/gitsearch.git
$ cd gitsearch
$ npm install # Install project dependencies
$ npm start # Compile and launch
If everything works, you should see the following:
npm run <script> |
Description |
---|---|
start |
Serves your app at localhost:3000 . HMR will be enabled in development. |
dev |
Same as npm start , but enables nodemon for the server as well. |
test |
Runs unit tests with Karma and generates a coverage report. |
test:dev |
Runs Karma and watches for changes to re-run tests; does not generate coverage reports. |
deploy |
Runs linter, tests, and then, on success, compiles your application to disk. |
lint |
Lint all .js files. |
lint:fix |
Lint and fix all .js files. |
The application structure presented in this boilerplate is fractal, where functionality is grouped primarily by feature rather than file type.
.
├── bin # Build/Start scripts
├── blueprints # Blueprint files for redux-cli
├── build # All build-related configuration
│ └── webpack # Environment-specific configuration files for webpack
├── config # Project configuration settings
├── server # Koa application (uses webpack middleware)
│ └── main.js # Server application entry point
├── src # Application source code
│ ├── main.js # Application bootstrap and rendering
│ ├── components # Reusable Presentational Components
│ ├── containers # Redux connected "smart" components
│ ├── static # Static assets (not imported anywhere in source code)
│ ├── store # Redux-specific pieces
│ │ ├── createStore.js # Create and instrument redux store
│ │ └── reducers.js # Reducer registry and injection
└── tests # Unit tests
Webpack is configured to make use of resolve.root, which lets you import local packages as if you were traversing from the root of your ~/src
directory. Here's an example:
// current file: ~/src/views/some/nested/View.js
// What used to be this:
import SomeComponent from '../../../components/SomeComponent'
// Can now be this:
import SomeComponent from 'components/SomeComponent' // Hooray!
Both .scss
and .css
file extensions are supported out of the box and are configured to use CSS Modules. After being imported, styles will be processed with PostCSS for minification and autoprefixing, and will be extracted to a .css
file during production builds.