metnew/next-semantic-ui-react

Next.js + SUIR tiny starter

Next-Semantic.UI-React

• Next-Semantic.UI-React
  • Quickstart
  • Environment variables
  • Dependencies
    • Client:
    • Webpack
  • FAQ
    • Static assets
    • Theming
    • Serverless + up
    • Deploy
  • Author

Demo: https://next-suir.now.sh

Quickstart

    # Install
    git clone --depth=1 --single-branch https://github.com/Metnew/next-semantic-ui-react.git
    cd next-semantic-ui-react
    npm install
    # Development
    npm run dev
    # Build
    npm run build
    # Production
    PORT=$PORT npm run start # by default PORT is 3000
    # Deploy with `now`:
    now
    # Deploy with `up`:
    up 
    # apex/up only: Don't forget to set `assetPrefix: "/staging"` in `next.config.js`, 
    # If you deploy to staging environment without custom domain.

Environment variables

• process.env.PORT - port for production running, required during npm start. Default: 3000.

Dependencies

Client:

• Flow - static typing rocks!
• React 16 and Redux
• SASS, PostCSS, and styled-components.
• Redux-thunk, Redux-Devtools-Extension
• isomorphic-fetch
• Semantic-ui-react - UI components.
• Lodash - SUIR dependency.

Webpack

• Babel: stage-0, flow, module-resolver, other widely used plugins.
• optimize-js-plugin
• wepback-assets-manifest

Some devDependencies exist in production deps for up compability. Because next.js requires own config during start, which requires webpack plugins.

FAQ

Static assets

/static folder + url-loader.

Theming

Yes, with styled-components' <ThemeProvider> it's possible to specify a color theme.

Serverless + up

These vars are required if you're deploying using .gitlab-ci.yml:

• process.env.AWS_ACCESS_KEY_ID - AWS access key
• process.env.AWS_SECRET_ACCESS_KEY - AWS secret key

Check .gitlab-ci.yml for more info.

Deploy

Optimized to deploy with apex/up. Could be deployed to now too.

Author

Vladimir Metnew [email protected]