This project was bootstrapped with Create React App.
kerker/ node_modules/ package.json public/ index.html favicon.ico README.md src/ scss/ bootstrap/ App.css App.js App.test.js index.css index.js logo.svg yarn.lock
Explanation Create React App structure
For the project to build, these files must exist with exact filenames:
public/index.htmlis the page template;
You can delete or rename the other files.
You may create subdirectories inside
src. For faster rebuilds, only files inside
src are processed by Webpack.
You need to put any JS and CSS files inside
src, otherwise Webpack won’t see them.
Only files inside
public can be used from
You can, however, create more top-level directories.
They will not be included in the production build so you can use them for things like documentation.
There shouldn't be any SCSS files directly in this directory other than a _variables.scss for declaring variables if need be. Prefer to use the variables which are provided by Bootstrap. Only in cases there’s nothing to be used from the Bootstrap core, declare a custom variable here.
Bootstrap can be used very modular. Don’t import the complete Bootstrap CSS. Instead use import in the
_config.scss to only get the components you want to use.
!default on each variable, which makes customizing very easy. It's the oposite of the notorious !import: While !important is like "Oh, there's a rule for this? I don't care, use this!", a variable with !default will only get defined by sass if it isn't already set. So if you want to change a Bootstrap variable, do so in the
Directory bootstrap_ext Customize and extend styles in Bootstrap in separate files, which are stored in a special folder. Name the files like the Bootstrap component you're changing or extending.
Components Currently the App.scss is stored here. I don't think we will need this directory later because component-based styles should be declared in the components directly.
All scss components come together here via import. I don't declare any styles.
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits, the watch-css tasks is included.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
yarn run build
Builds the app for production to the
Bundles React in production mode and optimizes the build for the best performance. It also compiles the scss files.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
In order to use the app in development mode, you will need to add a
.env.local file to the root directory of the project. The content should be the same like
.env.test but will need real values, e.g. the Dropbox client ID of the app.