codejunkienick / Starter Lapis
Cutting edge starter kit
Stars: ✭ 72
Programming Languages
javascript
184084 projects - #8 most used programming language
es2017
19 projects
Labels
Projects that are alternatives of or similar to Starter Lapis
Js Stack Boilerplate
Final boilerplate code of the JavaScript Stack from Scratch tutorial –
Stars: ✭ 145 (+101.39%)
Mutual labels: webpack, immutablejs, boilerplate, jest, react-router, server-side-rendering
React Cool Starter
😎 🐣 A starter boilerplate for a universal web app with the best development experience and a focus on performance and best practices.
Stars: ✭ 1,083 (+1404.17%)
Mutual labels: webpack, axios, boilerplate, react-router, postcss, server-side-rendering
React Redux Boilerplate
Awesome React Redux Workflow Boilerplate with Webpack 4
Stars: ✭ 307 (+326.39%)
Mutual labels: webpack, boilerplate, jest, postcss, redux-saga
Reeakt
A modern React boilerplate to awesome web applications
Stars: ✭ 116 (+61.11%)
Mutual labels: webpack, axios, jest, react-router, redux-saga
Express React Boilerplate
🚀🚀🚀 This is a tool that helps programmers create Express & React projects easily base on react-cool-starter.
Stars: ✭ 32 (-55.56%)
Mutual labels: webpack, axios, boilerplate, jest, react-router
Pwa
An opinionated progressive web app boilerplate
Stars: ✭ 353 (+390.28%)
Mutual labels: webpack, boilerplate, jest, react-router, postcss
Js Stack From Scratch
🛠️⚡ Step-by-step tutorial to build a modern JavaScript stack.
Stars: ✭ 18,814 (+26030.56%)
Mutual labels: webpack, immutablejs, jest, react-router, server-side-rendering
Molecule
⚛️ – :atom: – ⚛️ Boilerplate for cross platform web/native react apps with electron.
Stars: ✭ 95 (+31.94%)
Mutual labels: webpack, immutablejs, react-router, redux-saga
React Bootstrap Webpack Starter
ReactJS 16.4 + new React Context API +react Router 4 + webpack 4 + babel 7+ hot Reload + Bootstrap 4 + styled-components
Stars: ✭ 103 (+43.06%)
Mutual labels: webpack, axios, jest, react-router
React Redux Graphql Apollo Bootstrap Webpack Starter
react js + redux + graphQL + Apollo + react router + hot reload + devTools + bootstrap + webpack starter
Stars: ✭ 127 (+76.39%)
Mutual labels: webpack, boilerplate, react-router, postcss
Project Webcube
Continuously updated JS infrastructure for modern web dev
Stars: ✭ 141 (+95.83%)
Mutual labels: webpack, boilerplate, react-router, server-side-rendering
React Pages Boilerplate
Deliver react + react-router application to gh-pages
Stars: ✭ 134 (+86.11%)
Mutual labels: webpack, boilerplate, jest, react-router
React Redux Styled Hot Universal
react boilerplate used best practices and focus on performance
Stars: ✭ 147 (+104.17%)
Mutual labels: webpack, immutablejs, boilerplate, react-router
React Boilerplate
This project is deprecated. Please use CRA instead.
Stars: ✭ 88 (+22.22%)
Mutual labels: webpack, boilerplate, jest, postcss
Arc
React starter kit based on Atomic Design
Stars: ✭ 2,780 (+3761.11%)
Mutual labels: boilerplate, jest, react-router, redux-saga
React
Extremely simple boilerplate, easiest you can find, for React application including all the necessary tools: Flow | React 16 | redux | babel 6 | webpack 3 | css-modules | jest | enzyme | express + optional: sass/scss
Stars: ✭ 244 (+238.89%)
Mutual labels: webpack, boilerplate, jest, react-router
Express React Boilerplate
Express, MySQL, React/Redux, NodeJs Application Boilerplate
Stars: ✭ 179 (+148.61%)
Mutual labels: rest, axios, boilerplate, react-router
Vue Crud
Vue.js based REST-ful CRUD system
Stars: ✭ 629 (+773.61%)
Mutual labels: rest, webpack, boilerplate
React App
Create React App with server-side code support
Stars: ✭ 614 (+752.78%)
Mutual labels: webpack, boilerplate, server-side-rendering
React Isomorphic Boilerplate
🌟 An universal React isomorphic boilerplate for building server-side render web app.
Stars: ✭ 653 (+806.94%)
Mutual labels: webpack, boilerplate, server-side-rendering
LAPIS
Cutting edge starter kit optimized for development and production using latest tools available. It features optimized for rapid development config powered by happypack and various settings I've found to be optimal.
Features
- [email protected]
- React [email protected] beta version
- [email protected] for bundling
- Express
- Babel for ES6 and ES7 magic
- Immutable.js for enforcing immutable redux store and functional programming
- Redux
- Redux Saga for handling async api requests
- Redux Dev Tools for next generation DX (developer experience). Watch Dan Abramov's talk.
- ESLint to maintain a consistent code style
- style-loader,
- postcss-loader to use postcss with cssnext and various plugins
- react-helmet to manage title and meta tag information on both server and client
- babel-plugin-react-css-modules for better integration with css-modules without significant performance drop.
- webpack-isomorphic-tools to allow require() work for statics both on client and server
- webpack-dashboard for NASA style debugging
- hard-source-webpack-plugin to speed up initial build time
- axios for handling XHR calls.
- prettier for consistent code.
Structure
- client.js entry point for client rendering
- server.js entry point for server rendering.
- Html.js boilerplate html for clientside rendering and serverside rendering.
- data folder is for anything related to handling api requests. index.js exports functions that return api calls wrapped in Promises. Right now axios is used for api client.
- config folder is for configuration of client app.
- screens folder is for routes. I use structure proposed by ryanflorence with some modifications and it works great with [email protected] declarative structure.
- redux do i need to explain that to you?
- css any css classes that is shared among components and can be used through CSSModules syntax (e.g. composes: a from 'css/helpers.css')
app
├── client.js
├── server.js
├── constants.js
├── ServerTemplate.js
├── ClientTemplate.js
├── Html.js
├── config
│ ├── routes.js
│ └── index.js
├── screens
│ └── App
│ ├── components
│ ├── screens
│ │ ├── Admin
│ │ │ ├── components
│ │ │ ├── screens
│ │ │ │ ├── Reports
│ │ │ │ │ ├── components
│ │ │ │ │ └── index.js
│ │ │ │ └── Users
│ │ │ │ ├── index.js
│ │ │ │ └── styles.css
│ │ │ ├── index.js
│ │ │ └── index.css
│ │ └── Course
│ │ ├── screens
│ │ │ └── Assignments
│ │ │ └── index.js
│ │ └── index.js
│ └── index.js
├── core
│ ├── utils
│ │ └── validation.js
│ ├── atoms
│ │ ├── Link
│ │ └── Icon
│ ├── molecules
│ │ └── IconLink
│ └── organisms
│ └── Header
├── redux
│ ├── createStore.js
│ ├── actions
│ │ ├── user.js
│ │ └── reports.js
│ ├── reducers
│ │ ├── user.js
│ │ └── reports.js
│ └── sagas
│ ├── user.js
│ └── reports.js
├── data
│ ├── apiClient.js
│ ├── user.js
│ └── index.js
└── css
├── global.css
├── variables.css
└── helpers.css
TODO
- [ ] Code splitting with System.import()
- [ ] Write test examples
How to?
How to enable/disable SSR
Check bin/server.js executable and change DISABLE_SSR variable.
Installation
yarn
Running Dev Server
npm run dev-dll // Build libraries for faster webpack build
npm run dev
or with webpack-dashboard
npm run dev-dll // Build libraries for faster webpack build
npm run dev-dash
Building and Running Production Server
npm run build
npm run start
Thanks
Thanks to erikas for providing starting ground for my react learning. This starter resembles some code and a bit of structure from now outdated erikas's starter kit
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].