GNARLY CODE PRESENTS

POWERED WITH @gnarlycode/react-app-tools

💀 CREATE GNARLY APP 💀

Want to create universal web apps with SSR or just generate static site super easy and fast?

The tool is here!

WHAT?

Those lovely tools of contemporary web development:

⚛️ React for sure!!!

🔭 Astroturf for style!

🚗 React Router for traffic!

🎯 Typescript for bulletproof!

🌌 Redux for state! *

The * mark means optional

INSTALL?

To create an app, run:

npm init @gnarlycode/gnarly-app app-name

COMMANDS?

🕹 npm run dev — dev server (hot reload, watch mode etc)

🕹 npm run build — build the app

🕹 npm run build-static — build the app with static html's

🕹 npm start — serve builded app

WHAT'S NEXT?

📁 You got next file structure for your app:

📁 app-name
├── 📄 .browserlist
├── 📄 .editorconfig
├── 📄 .eslintignore
├── 📄 .eslintrc.js
├── 📄 .gitignore
├── 📄 .prettierignore
├── 📄 .prettierrc
├── 📄 gnarly.config.js
├── 📄 package.json
├── 📄 README.md
├── 📄 tsconfig.json
│
├── 📁 src
│   ├── 📄 config.ts
│   ├── 📄 routes.tsx
│   │
│   ├── 📁 components
│   │   └── 📄 <Components>.tsx
│   │
│   ├── 📁 entries
│   │   ├── 📄 client.tsx
│   │   └── 📄 server.tsx
│   │
│   ├── 📁 styles
│   │   ├── 📄 globalStyles.ts
│   │   └── 📄 styleVars.json
│   │
│   ├── 📁 types
│   │   └── 📄 svg.d.ts
│   │
│   └── 📁 utils
│       ├── 📄 index.ts
│       └── 📄 links.ts
│
└── 📁 static
    └── 📄 favicon.ico

⚙️ Configuration is inside of gnarly.config.js

module.exports = {
  // Server listening
  host: '0.0.0.0',
  port: 8080,

  // Url prefix
  baseUrl: '/base-url',

  // For static renderer, used when you run `npm run build-static` or `build-all`
  routerConfig: './src/routes',

  // Serve static with express (do not enable if static served with nginx for example)
  serveStatic: true,
}

⚙️ You can create gnarly.config.local.js for local environment and don't commit it.

⚙️ Also you can create _env and .env for extra configurations.

⚙️ If you want to include an api to your app look this example.

CREDITS 🙏

babel commander dotenv-webpack dotenv express inquirer react-helmet react-hot-loader react-router react redux astroturf svg-sprite-loader eslint typescript webpack-hot-server-middleware webpack

Author: Dmitry Podlesny