Skip to content

Commit

Permalink
chore: docs
Browse files Browse the repository at this point in the history
  • Loading branch information
matheushf committed Jan 3, 2023
1 parent 19d5108 commit 0ce79c3
Show file tree
Hide file tree
Showing 5 changed files with 38 additions and 79 deletions.
20 changes: 19 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
# Clean Hexagonal Frontend
(this is a work in progress)

A example of using Clean Architecture on the Frontend
A example of using Clean Architecture on the Frontend.
Read more about it [here](https://medium.com/@matheushf/clean-architecture-on-frontend-applications-7d724d250432)

<br>

Expand All @@ -16,6 +17,23 @@ A example of using Clean Architecture on the Frontend
### Start the Micro-Front with
`nx run @clean-front/{package}`

# Packages and Stacks
- Monorepo

Nx
- @clean-front/cat

Vue 3, Vite, Partytown, TS
- @clean-front/dog

React, Vite, TS
- @clean-front/duck

Remix, TS
- @clean-front/landing

Qwik, TS

<br>

# Todo
Expand Down
16 changes: 2 additions & 14 deletions packages/cat/README.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,4 @@
# Vue 3 + TypeScript + Vite
# Vue 3 App

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
App build with Vue.js and Clean Architecture

## Recommended IDE Setup

- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)

## Type Support For `.vue` Imports in TS

Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's Take Over mode by following these steps:

1. Run `Extensions: Show Built-in Extensions` from VS Code's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled.
2. Reload the VS Code window by running `Developer: Reload Window` from the command palette.

You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471).
4 changes: 4 additions & 0 deletions packages/dog/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
# React App

App build with React and Clean Architecture

12 changes: 12 additions & 0 deletions packages/duck/README.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,15 @@
# Remix App

App build with the Remix / React framework and Clean Architecture

Read more about it in [this article](https://medium.com/@matheushf/remix-with-clean-architecture-e561eb5fa3cd)
<br>
<br>
<br>
<br>
<br>

-------
# Welcome to Nx + Remix!

- [Remix Docs](https://remix.run/docs)
Expand Down
65 changes: 1 addition & 64 deletions packages/landing/README.md
Original file line number Diff line number Diff line change
@@ -1,66 +1,3 @@
# Qwik App ⚡️

- [Qwik Docs](https://qwik.builder.io/)
- [Discord](https://qwik.builder.io/chat)
- [Qwik GitHub](https://github.com/BuilderIO/qwik)
- [@QwikDev](https://twitter.com/QwikDev)
- [Vite](https://vitejs.dev/)
- [Partytown](https://partytown.builder.io/)
- [Mitosis](https://github.com/BuilderIO/mitosis)
- [Builder.io](https://www.builder.io/)

---

## Project Structure

Inside your project, you'll see the following directory structure:

```
├── public/
│ └── ...
└── src/
├── components/
│ └── ...
└── routes/
└── ...
```

- `src/routes`: Provides the directory based routing, which can include a hierarchy of `layout.tsx` layout files, and an `index.tsx` file as the page. Additionally, `index.ts` files are endpoints. Please see the [routing docs](https://qwik.builder.io/qwikcity/routing/overview/) for more info.

- `src/components`: Recommended directory for components.

- `public`: Any static assets, like images, can be placed in the public directory. Please see the [Vite public directory](https://vitejs.dev/guide/assets.html#the-public-directory) for more info.

## Add Integrations

Use the `npm run qwik add` command to add additional integrations. Some examples of integrations include: Cloudflare, Netlify or Vercel server, and the [Static Site Generator (SSG)](https://qwik.builder.io/qwikcity/static-site-generation/static-site-config/).

```shell
npm run qwik add # or `yarn qwik add`
```

## Development

Development mode uses [Vite's development server](https://vitejs.dev/). During development, the `dev` command will server-side render (SSR) the output.

```shell
npm run dev # or `yarn dev`
```

> Note: during dev mode, Vite may request a significant number of `.js` files. This does not represent a Qwik production build.
## Preview

The preview command will create a production build of the client modules, a production build of `src/entry.preview.tsx`, and run a local server. The preview server is only for convenience to locally preview a production build, and it should not be used as a production server.

```shell
npm run preview # or `yarn preview`
```

## Production

The production build will generate client and server modules by running both client and server build commands. Additionally, the build command will use Typescript to run a type check on the source code.

```shell
npm run build # or `yarn build`
```
App build with Qwik and Clean Architecture

0 comments on commit 0ce79c3

Please sign in to comment.