A starter repo for a static site to be hosted on something like S3, Github Pages, or Netlify
$ git clone git@github.com:Chronstruct/static-starter.git <YOUR_REPO_NAME>
$ cd <YOUR_REPO_NAME>
$ git remote set-url origin <YOUR_NEWLY_CREATED_GIT_REPO_URL>
$ git remote add upstream git@github.com:Chronstruct/static-starter.git #for merging future updates
$ npm install
$ npm start
$ open http://localhost:8080
Render to html for fast initial page loads, then use react-router for SPA transitions
Hotloader for development
normalize.css and box-model reset
- sitemap-webpack-plugin: Webpack plugin to generate a sitemap.
- favicons-webpack-plugin: Let webpack generate all your favicons and icons for you
- react-router-to-array: Convert your react router component to an array with all static routes
- why-did-you-update: Puts your console on blast when React is making unnecessary updates.
Please consult the React Playbook for style, layout, architecture, and rules
.
├── /assets
│ ├── /fonts/
│ ├── /images/
│ └── /videos/
|
├── /src # Your site-specific source code of the application
│ ├── /scenes/ # Components that are handled by a Navigator. Same as pages, views, etc for the app.
│ | ├── /App/ # Root scene
│ ├── /shared/
│ | ├── /components/ # Shared components used in 2+ scenes
│ | ├── /logic/ # **Optional** Util/Helper js functions that are app and/or model aware
│ ├── /stores/ # **Optional** Responsible for you app state. Houses MobX actions and observables
│ └── /entry.js # Entry point for static-site-generator and client-side react-router
|
├── /lib # Your non-site-specific Components and functions
|
├── /node_modules/ # 3rd-party libraries and utilities
└── package.json # The list of 3rd party libraries and utilities
npm run clean
- Delete the generatedpublic/
foldernpm run reinstall
- Deletenode_modules
, then install them againnpm run build
- Generate static files inpublic/
for devnpm run build:dev
- Generate static files inpublic/
for devnpm run build:prod
- Generate static files inpublic/
for production (minified)npm run server:dev
- Start webpack-dev-server with hotloader enabled for hostingpublic/
npm run server:prod
- Hostpublic/
as a production server wouldnpm run dev
-build:dev
thenserver:dev
npm run prod
-build:prod
thenserver:prod
npm start
-run dev
npm deploy
- usegh-pages
deploypublic/
to Github Pages
$ git fetch upstream
$ git checkout master
$ git merge upstream/master
Again, consult the Playbook
Tweet @kylpo