https://github.com/dhi/nx-starter-app
Starter React template that uses Nx tooling preconfigured with vite, MUI v5, DHI theme
https://github.com/dhi/nx-starter-app
Last synced: 3 months ago
JSON representation
Starter React template that uses Nx tooling preconfigured with vite, MUI v5, DHI theme
- Host: GitHub
- URL: https://github.com/dhi/nx-starter-app
- Owner: DHI
- Created: 2023-06-19T00:33:40.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-26T11:00:15.000Z (11 months ago)
- Last Synced: 2025-01-05T07:15:10.041Z (5 months ago)
- Language: TypeScript
- Size: 466 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Nx Starter App
✨ **This workspace has been generated by [Nx, a Smart, fast and extensible build system.](https://nx.dev)** ✨
It is preconfigured to use the following tech stack:
1. [Vite](https://vitejs.dev) - is a modern front-end build tool providing instant server start with on-demand file serving over native ESM and no bundling required, lightning-fast hot module replacement (HMR) that maintains speed regardless of app size, rich features including out-of-the-box support for TypeScript, JSX, CSS, and more.
2. [MUI v5.x](https://mui.com/material-ui/getting-started/overview/) - is an open-source React component library that implements Google's Material Design providing comprehensive collection of prebuilt components out of the box. This demo application also comes with a SeaportOPX customized theme.
3. [MobX v6.x](https://mobx.js.org/README.html) - for state management.
4. [React IoC](https://github.com/gnaeus/react-ioc) - a very small heirarchical dependency injection library for React
5. [React Router v6.x](https://reactrouter.com/en/main) - a bare-bones routing example is presented in the application which allows for protected routes.
6. [Echarts for React](https://github.com/hustcc/echarts-for-react) - React wrapper for [Echarts](https://echarts.apache.org/en/index.html)
## Installation
Make sure to use `node` version 18 or later. Also `pnpm` is favored over `npm`.
### Install pnpm
`npm install --global pnpm`
### Install Nx cli
`npm install --global nx@latest `
### Install VS Code Nx Console extension
Visit Visual Studio marketplace and install the [Nx Console](https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console) UI extension.
### Clone the repository
`git clone https://github.com/DHI/nx-starter-app.git `
`cd `
`pnpm install`
## Development server
Run `nx serve rename-me` for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
## Understand this workspace
Run `nx graph` to see a diagram of the dependencies of the projects.
## Further help
Visit the [Nx Documentation](https://nx.dev) to learn more.
In particular, read through the [React Standalone Tutorial (parts 1 & 2)](https://nx.dev/tutorials/react-standalone-tutorial) for a brief tutorial.
### Useful Nx links
[Nx Youtube channel](https://www.youtube.com/@nxdevtools) videos including [React Standalone Applications with Nx](https://www.youtube.com/watch?v=Q1WxHhmd7BU)