GRAS mobile-friendly boilerplate for map-centric apps. The npm package can be found here
This package is created using TypeScript, MaterialUI, React-map-gl and @dhi-gras/react-components
Showcase of our components and libraries on the GRAS Storybook
You can simply import the package using npx.
// with npx
npx gras-react-boilerplate my-app
cd my-app
npm start
If you've previously installed gras-react-boilerplate globally via npm install -g @dhi-gras/gras-react-boilerplate, we recommend you to uninstall the package using npm uninstall -g @dhi-gras/gras-react-boilerplate or yarn global remove @dhi-gras/gras-react-boilerplate to ensure that npx always uses the latest version.
To create a new app, you may choose one of the following methods:
npx gras-react-boilerplate my-app
npm install @dhi-gras/gras-react-boilerplate -g
// and then use it as
gras-react-boilerplate my-app
yarn global add @dhi-gras/gras-react-boilerplate
// and use it as
gras-react-boilerplate my-app
It will create a directory called "my-app" inside the current folder. Inside the directory, it will generate the initial project structure and install the dependencies.
cd my-app
my-app
├── README.md
├── node_modules
├── package.json
├── package-lock.json
├── tsconfig.json
├── .gitignore
├── .prettierrc.js
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── manifest.json
│ ├── robots.txt
│ └── images
│ └── DHI_Logo_Blue.png
└── src
├── App.tsx
├── index.tsx
├── react-app-env.d.ts
├── assets
│ └── DHI_Logo_Blue.png
├── styles
│ ├── global.js
│ ├── mixins.js
│ └── theme.js
├── utils
│ └── index.ts
├── components
│ └── Navigation
│ ├── Navigation.tsx
│ └── index.ts
└── containers
├── Map
│ ├── Map.tsx
│ ├── index.ts
│ └── ZoomControl
│ ├── index.ts
│ └── ZoomControl.tsx
├── Sidebar
│ ├── Sidebar.tsx
│ ├── index.ts
│ ├── Description
│ │ ├── Description.tsx
│ │ └── index.ts
│ └── SidebarAccordion
│ ├── SidebarAccordion.tsx
│ └── index.ts
└── SidebarControl
├── SidebarControl.tsx
└── index.ts
Inside the newly created project, you can run:
Runs the app in development mode.
Open http://localhost:3000 to view it in the browser.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
