-
Notifications
You must be signed in to change notification settings - Fork 4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(webpack): add webpack3 boilerplate with theming (#2371)
* docs(webpack): add webpack3 boilerplate with theming * docs(webpack): fix grammar
- Loading branch information
1 parent
ce1e853
commit 96ad076
Showing
132 changed files
with
7,232 additions
and
40 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,5 @@ | ||
| coverage/* | ||
| dist/* | ||
| docs/build/* | ||
| examples/webpack3/scripts/* | ||
| dll/* |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| import React from 'react' | ||
| import { Button, Container, Header, Segment } from 'semantic-ui-react' | ||
|
|
||
| const LayoutsExample = () => ( | ||
| <Container> | ||
| <Segment basic padded> | ||
| <Header | ||
| as='h1' | ||
| content='Theming' | ||
| subheader='An introduction to theming' | ||
| /> | ||
| </Segment> | ||
|
|
||
| <Segment basic padded> | ||
| <Header as='h2' content='Preface' dividing /> | ||
| <p> | ||
| Semantic UI React does not have own styling system and fully relies on the theming of Semantic UI. It's really | ||
| powerful, you don't need to know LESS or CSS you can simply update values of variables or use styles from | ||
| predefined themes. | ||
| </p> | ||
| <p> | ||
| In fact, all you know about theming and styling of Semantic UI is fully applicable to Semantic UI React. | ||
| </p> | ||
| <Button | ||
| content='Learn more about theming' | ||
| labelPosition='right' | ||
| href='https://semantic-ui.com/usage/theming.html' | ||
| icon='external link' | ||
| target='_blank' | ||
| /> | ||
| <Button | ||
| content='Creating themes' | ||
| labelPosition='right' | ||
| href='http://learnsemantic.com/themes/creating.html' | ||
| icon='external link' | ||
| target='_blank' | ||
| /> | ||
|
|
||
| <Header as='h2' content='Quick start' dividing /> | ||
| <p> | ||
| Semantic UI offers its own build system that uses Gulp and produces prepared CSS files. It makes sense to use it | ||
| with Create React App as it does not support LESS loader. | ||
| </p> | ||
| <p> | ||
| In all other cases we recommend to use the LESS package and tune it into your build system with Webpack. The | ||
| LESS package also does not depend on Gulp and other cruft things. However, this package is not friendly for | ||
| Webpack and requires additional configuration. | ||
| </p> | ||
| <Button | ||
| content='Semantic UI LESS' | ||
| labelPosition='right' | ||
| href='https://github.com/Semantic-Org/Semantic-UI-LESS' | ||
| icon='github' | ||
| target='_blank' | ||
| /> | ||
| <Button | ||
| content='Configuring Webpack' | ||
| labelPosition='right' | ||
| href='https://medium.com/webmonkeys/webpack-2-semantic-ui-theming-a216ddf60daf' | ||
| icon='medium' | ||
| target='_blank' | ||
| /> | ||
|
|
||
| <Header as='h2' content='Boilerplate' dividing /> | ||
| <p> | ||
| The boilerplate we prepared is powered by the latest Webpack and includes the all required things for quick | ||
| start like preconfigured theming and hot module reload. | ||
| </p> | ||
| <p> | ||
| The boilerplate is optimized for usage with Semantic UI React and Semantic UI LESS, it also contains examples | ||
| of theming usage and custom components. | ||
| </p> | ||
| <Button | ||
| content='Boilerplate' | ||
| labelPosition='right' | ||
| href='https://github.com/Semantic-Org/Semantic-UI-React/tree/master/examples/webpack3' | ||
| icon='github' | ||
| target='_blank' | ||
| /> | ||
| </Segment> | ||
| </Container> | ||
| ) | ||
|
|
||
| export default LayoutsExample |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| # Deprecated | ||
|
|
||
| See [our boilerplate](../webpack3) for Webpack 3 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| # Deprecated | ||
|
|
||
| See [our boilerplate](../webpack3) for Webpack 3 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| { | ||
| "presets": [ | ||
| ["@babel/preset-env", { | ||
| "modules": false, | ||
| "targets": { | ||
| "browsers": [ | ||
| "last 2 versions", | ||
| "ie >= 11", | ||
| "safari >= 10" | ||
| ] | ||
| } | ||
| }], | ||
| "@babel/react" | ||
| ], | ||
| "plugins": [ | ||
| "@babel/plugin-proposal-class-properties", | ||
| "@babel/plugin-proposal-export-default-from", | ||
| ["direct-import", { "modules": [ | ||
| "semantic-ui-react", { | ||
| "name": "semantic-ui-react", | ||
| "indexFile": "semantic-ui-react/dist/es/index.js" | ||
| } | ||
| ]}], | ||
| "lodash" | ||
| ], | ||
| "env": { | ||
| "development": { | ||
| "plugins": [ | ||
| "react-hot-loader/babel" | ||
| ] | ||
| }, | ||
| "production": { | ||
| "plugins": [ | ||
| "transform-react-remove-prop-types" | ||
| ] | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| # See https://help.github.com/ignore-files/ for more about ignoring files. | ||
|
|
||
| # dependencies | ||
| /node_modules | ||
|
|
||
| # production | ||
| /build | ||
|
|
||
| # misc | ||
| .DS_Store | ||
|
|
||
| npm-debug.log* | ||
| yarn-debug.log* | ||
| yarn-error.log* |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| const fs = require('fs') | ||
| const path = require('path') | ||
|
|
||
| const NODE_ENV = process.env.NODE_ENV | ||
|
|
||
| if (!NODE_ENV) { | ||
| throw new Error('The NODE_ENV environment variable is required but was not specified.') | ||
| } | ||
|
|
||
| // We support resolving modules according to `NODE_PATH`. | ||
| // This lets you use absolute paths in imports inside large monorepos: | ||
| // https://github.com/facebookincubator/create-react-app/issues/253. | ||
| // It works similar to `NODE_PATH` in Node itself: | ||
| // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders | ||
| // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored. | ||
| // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims. | ||
| // https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421 | ||
| // We also resolve them to make sure all tools using them work consistently. | ||
| const appDirectory = fs.realpathSync(process.cwd()) | ||
| process.env.NODE_PATH = (process.env.NODE_PATH || '') | ||
| .split(path.delimiter) | ||
| .filter(folder => folder && !path.isAbsolute(folder)) | ||
| .map(folder => path.resolve(appDirectory, folder)) | ||
| .join(path.delimiter) | ||
|
|
||
| function getClientEnvironment(publicUrl) { | ||
| const raw = Object.keys(process.env) | ||
| .reduce( | ||
| (env, key) => { | ||
| env[key] = process.env[key] // eslint-disable-line no-param-reassign | ||
| return env | ||
| }, | ||
| { | ||
| // Useful for determining whether we’re running in production mode. | ||
| // Most importantly, it switches React into the correct mode. | ||
| NODE_ENV: process.env.NODE_ENV || 'development', | ||
| // Useful for resolving the correct path to static assets in `public`. | ||
| // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />. | ||
| // This should only be used as an escape hatch. Normally you would put | ||
| // images into the `src` and `import` them in code to get their paths. | ||
| PUBLIC_URL: publicUrl, | ||
| } | ||
| ) | ||
| // Stringify all values so we can feed into Webpack DefinePlugin | ||
| const stringified = { | ||
| 'process.env': Object.keys(raw).reduce((env, key) => { | ||
| env[key] = JSON.stringify(raw[key]) // eslint-disable-line no-param-reassign | ||
| return env | ||
| }, {}), | ||
| } | ||
|
|
||
| return { raw, stringified } | ||
| } | ||
|
|
||
| module.exports = getClientEnvironment |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| const path = require('path') | ||
| const fs = require('fs') | ||
| const url = require('url') | ||
|
|
||
| // Make sure any symlinks in the project folder are resolved: | ||
| // https://github.com/facebookincubator/create-react-app/issues/637 | ||
| const appDirectory = fs.realpathSync(process.cwd()) | ||
| const resolveApp = relativePath => path.resolve(appDirectory, relativePath) | ||
|
|
||
| const envPublicUrl = process.env.PUBLIC_URL | ||
|
|
||
| function ensureSlash(needlePath, needsSlash) { | ||
| const hasSlash = needlePath.endsWith('/') | ||
| if (hasSlash && !needsSlash) { | ||
| return needlePath.substr(needlePath, needlePath.length - 1) | ||
| } else if (!hasSlash && needsSlash) { | ||
| return `${needlePath}/` | ||
| } | ||
| return needlePath | ||
| } | ||
|
|
||
| const getPublicUrl = appPackageJson => | ||
| envPublicUrl || require(appPackageJson).homepage | ||
|
|
||
| // We use `PUBLIC_URL` environment variable or "homepage" field to infer | ||
| // "public path" at which the app is served. | ||
| // Webpack needs to know it to put the right <script> hrefs into HTML even in | ||
| // single-page apps that may serve index.html for nested URLs like /todos/42. | ||
| // We can't use a relative path in HTML because we don't want to load something | ||
| // like /todos/42/static/js/bundle.7289d.js. We have to know the root. | ||
| function getServedPath(appPackageJson) { | ||
| const publicUrl = getPublicUrl(appPackageJson) | ||
| const servedUrl = | ||
| envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/') | ||
| return ensureSlash(servedUrl, true) | ||
| } | ||
|
|
||
| module.exports = { | ||
| appBuild: resolveApp('build'), | ||
| appNodeModules: resolveApp('node_modules'), | ||
| appHtml: resolveApp('public/index.html'), | ||
| appIndexJs: resolveApp('src/index.js'), | ||
| appPackageJson: resolveApp('package.json'), | ||
| appPublic: resolveApp('public'), | ||
| appSrc: resolveApp('src'), | ||
| publicUrl: getPublicUrl(resolveApp('package.json')), | ||
| servedPath: getServedPath(resolveApp('package.json')), | ||
| yarnLockFile: resolveApp('yarn.lock'), | ||
| } |
Oops, something went wrong.