restuwahyu13/react-boilerplate

minimalize modern react boilerplate created using webpack 4 include technology pwa and include popular tools for react developer

Minimalize Modern React Boilerplate (Easy To Customize)

Berikut adalah React Boilerplate yang sudah siap pakai untuk Production atau Development yang sudah terintegrasi dengan beberapa tools Front-End populer khususnya untuk React Developer dan bisa di customisasi sesuai dengan selera masing - masing bagi siapa saja yang mau menggunakannya, dikarenakan dari masing - masing orang mungkin ingin mempunyai standar customisasi nya sendiri sesuai dengan keinginannya masing - masing, demo mini project menggunakan React CSA Boilerplate.

Run Application

• Development Mode - npm run s
• Production Build - npm run b
• Production Build & Analyzer Bundle - npm run ba
• Testing React Component - npm run t

Features

• Support REACT HMR & CSS HMR
• Support Proggresive Web Apps (PWA) For Production
• Support SASS Preprocessor CSS
• Support Dynamic Import & Code Splitting
• Support Linting JavaScript & CSS
• Support .env File
• Support Manual Proxy Like CRA
• Support GraphQL
• Support Friendly Error
• Support Styled Components & Another CSS Library In JS
• Support Unit Test Jest & Enzyme
• And More

Build Include Technology

• React
• Webpack
• Babel
• Workbox
• Eslint
• Prettier
• Stylelint
• Postcss
• Jest
• Enzyme
• Any More

TIPS (Menyajikan file content yang di compress)

• install express-static-gzip
• kemudian tambahkan code seperti ini di Back-End Server anda.

if (process.env.NODE_ENV === 'production') {
  app.use(express.static(resolve(process.cwd(), 'client/build')))

  app.use(
    '*',
    staticGzip(resolve(process.cwd(), 'client/build/static/js'), {
      enableBrotli: true
    })
  )

  app.get('*', (req, res) => {
    res.sendFile(resolve(process.cwd(), 'client/build/index.html'))
  })
}

• atau dengan menambahkan custom content header middleware (optional)

Global Method TDD Unit Test

• shallow
• mount
• render
• renderer
• renderHook
• act
• addClear
• cleanup
• createSerializer
• toJson

Author

• Restu Wahyu Saputra

LICENSE

• MIT

react-boilerplate's Issues

Load images in index.html

Hello, I created a pwa thanks to your template, I have a problem to load the images of my splash screen, how to load them in the index.html?