ddapac-react - npm Package Compare versions

Comparing version 1.1.8 to 1.1.9

boilerplate/README.md

		@@ -5,4 +5,6 @@ >🚨🚨 This project is still under development 🚨🚨

		Ever wanted to break away from create-react-app and use a react boilerplate made by a lone gunslinging code monkey 🔫🐒? Then this is the boilerplate for you.
		For DD, building enterprise applications means we need full architectural freedom and code transparency to design the custom solutions our client's deserve.

		This framework delivers the common tooling and code structures I found myself wanting day to day, so that you have a strong foundation when starting your next project.

		Try it out using npx and our custom installer:
		@@ -16,29 +18,48 @@

		Most boilerplates won't push an opinion on code structure, but I would prefer it if you code like a professional, and have standards, so here we are.
		It's 2020 and there are a whole wealth of tooling options for React, but these are the staples for every project we work on.

		✔️ Typescript - Because we can't trust you to code alone
		✔️ Emotion.js - CSS in JS is like Jack Jack from the incredibles, we know the little bugger is powerful, we just don't understand HOW powerful
		✔️ Prettier - If I could lock this down I would... don't you dare touch it
		✔️ Storybook - Everyone has a story to tell, but if you don't know what this is you'll probably mess it up
		✔️ React Hooks - If you ever use redux or MobX for state management again I will hunt you down, this is as clean as it comes
		✔️ Typescript - Because I can't trust you to code alone
		✔️ Emotion.js - Imagine if CSS got better? Now here we are.
		✔️ Prettier/Eslint/Stylelint - Don't you dare touch these configs
		✔️ Storybook - This will change your life, take the time to learn all it's possibilities
		✔️ React Hooks - Hello functional components and simple state management
		✔️ Code Scaffolding - Why do the same thing more than once? Make it a node command

		The UI

		There is none. Because building a great UI usually happens with your client by your side, (There are exceptions of course)

		## What to know?
		Theres a good chance you'll use this not realising what the hell is going on. But there are a few things that you should know to make your life easier in certain scenarios!
		When you first try out this framework have a good look around the tools, there is a lot of potential hidden under the hood ready to be switched on.

		To progressive or not to progressive
		If you find yourself needing some offline functionality, simple cacheing, or the ability to install on a phone, PWA's are your best best.
		Progressive web app
		If you find yourself needing some offline functionality, simple cacheing, or the ability to install on a phone, PWA's are for you.

		I've made this as simple as possible, just go into webpack.config.ts and flip `const isPWA = false`!!
		To activate the simple PWA settings, just go into webpack.config.ts and flip `const isPWA = false` to true and update the `public/manifest.json` to match your app's details

		Update the manifest in `/public` with your app's info and you are good to go
		WARNING: This will turn on service workers, which means cacheing! keep your dev tools open and cache off otherwise you won't any changes.

		WARNING: This will turn on service workers, which means cacheing! keep your dev tools open and cache off otherwise you won't see changes
		Async State provider
		Does your app require data for it's first render? then use the AsyncStateProvider in App.tsx!

		Async State? Hell yeah
		Does your app need to gather data at the get go? then use the AsyncStateProvider in App.tsx!

		This lets you pass an Async function that can do API calls or validate routes/data etc before rendering the rest of your app. In the meantime you can pass App.loader.tsx to render a full page loader.

		The benefits of this are to extrapolate your business logic out of the app, leaving routes and components able to assume the necessary data has already been loaded!

		React will have this functionality locked down soon with Suspense, but for the time being here we are.

		Custom scaffolding
		in `/tools` you'll find scaffolding code which you SHOULD customise.

		Out of the box you can run `yarn scaffold <ComponentName>` to automate component creation, keeping consistency and speeding up development.

		Update the code template of `scaffoldUtils/Component` to suit your project needs and if you want You can add the same flow for Routes/Api's, whatever you like, just follow the same structure as the component folder.

		VS Code Extensions
		To have the best experience with this framework and the tools in general, you need to have the right setup, so let me share some relevant ones (Alphabetical):

		- Bracket Pair Colorizer 2: Unique colours for matching brackets
		- Color Highlight: Highlights web colors inline
		- ESLint: You know what this does
		- Prettier: Same as above
		- Stylelint: And again
		- Vscode-icons: One of the best icon themes
		- Vscode-styled-components: Helps syntax highlting with CSS in JS

boilerplate/src/routes.ts

		@@ -8,2 +8,3 @@ import { AppRoute } from 'typings/AppRoute';
		path: '/',
		exact: true,
		component: Home,
		@@ -10,0 +11,0 @@ }

package.json

		{
		"name": "ddapac-react",
		"version": "1.1.8",
		"version": "1.1.9",
		"description": "An npm installer for Deloitte Digital's React Boilerplate",
		@@ -5,0 +5,0 @@ "files": [

README.md

		@@ -1,22 +0,61 @@
		## DD APAC's React Boilerplate Installer
		👷‍ PLEASE NOTE: The boilerplate this tool uses is currently still in development
		>🚨🚨 This project is on a private repository and can not take any requests 🚨🚨

		## Introduction
		This package is as basic as [Jerry Yip](https://www.instagram.com/jerypls) 💁
		# Deloitte Digital Asia Pacific's React SPA Boilerplate

		Simply put, it copies the latest stable files from the Deloitte Digital team's React Boilerplate, and installs it in the given folder name.
		For DD, building enterprise applications means we need full architectural freedom and code transparency to design the custom solutions our client's deserve.

		To quote myself:
		>It's like create-react-app but for real developers
		This framework delivers the common tooling and code structures I found myself wanting day to day, so that you have a strong foundation when starting your next project.

		Wanna try it out?
		Try it out using npx and our custom installer:

		Just run `npx ddapac-react <project-name>`
		`npx ddapac-react <project-name>`

		## Contributing
		The Tools

		✋ ✋ 🛑 🛑 STOP 🛑 🛑 ✋ ✋
		It's 2020 and there are a whole wealth of tooling options for React, but these are the staples for every project we work on.

		Currently the React Boilerplate is held on our private repo. Until it moves to the public Github account, keyboard warriors will have to remain patient with bugs and improvement requests
		✔️ Typescript - Because I can't trust you to code alone
		✔️ Emotion.js - Imagine if CSS got better? Now here we are.
		✔️ Prettier/Eslint/Stylelint - Don't you dare touch these configs
		✔️ Storybook - This will change your life, take the time to learn all it's possibilities
		✔️ React Hooks - Hello functional components and simple state management
		✔️ Code Scaffolding - Why do the same thing more than once? Make it a node command

		✋ ✋ 🛑 🛑 STOP 🛑 🛑 ✋ ✋
		The UI

		There is none. Because building a great UI usually happens with your client by your side, (There are exceptions of course)

		## What to know?
		When you first try out this framework have a good look around the tools, there is a lot of potential hidden under the hood ready to be switched on.

		Progressive web app
		If you find yourself needing some offline functionality, simple cacheing, or the ability to install on a phone, PWA's are for you.

		To activate the simple PWA settings, just go into webpack.config.ts and flip `const isPWA = false` to true and update the `public/manifest.json` to match your app's details

		WARNING: This will turn on service workers, which means cacheing! keep your dev tools open and cache off otherwise you won't any changes.

		Async State provider
		Does your app require data for it's first render? then use the AsyncStateProvider in App.tsx!

		This lets you pass an Async function that can do API calls or validate routes/data etc before rendering the rest of your app. In the meantime you can pass App.loader.tsx to render a full page loader.

		React will have this functionality locked down soon with Suspense, but for the time being here we are.

		Custom scaffolding
		in `/tools` you'll find scaffolding code which you SHOULD customise.

		Out of the box you can run `yarn scaffold <ComponentName>` to automate component creation, keeping consistency and speeding up development.

		Update the code template of `scaffoldUtils/Component` to suit your project needs and if you want You can add the same flow for Routes/Api's, whatever you like, just follow the same structure as the component folder.

		VS Code Extensions
		To have the best experience with this framework and the tools in general, you need to have the right setup, so let me share some relevant ones (Alphabetical):

		- Bracket Pair Colorizer 2: Unique colours for matching brackets
		- Color Highlight: Highlights web colors inline
		- ESLint: You know what this does
		- Prettier: Same as above
		- Stylelint: And again
		- Vscode-icons: One of the best icon themes
		- Vscode-styled-components: Helps syntax highlting with CSS in JS

ddapac-react - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics