Data and Analytics @DHI (former GRAS) mobile-friendly boilerplate for map-centric apps. The npm package can be found here

This package is created using TypeScript, MuI, React-map-gl, Deck.gl and @dhi/react-components-lab

Quick overview

You can simply import the package using npx.

// with npx using the latest stable version
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.

Flags

• *--app-name= - specifies the folder name and it will also be used when creating the folder.
• --storage-account= - specifies the storage account name to be used in "azureDeployConfig". Read more about it here
• --resource-group= - specifies the resource group name corresponding to the storage account to be created.
• --install - Installs the dependencies using yarn once the boilerplate is set up.
• --vscode - It opens up the created folder in vscode using the command code
• --npm - By default, the package is installed using yarn. Specifies if the app should be installed using npm instead.

Creating an App

To create a new app, you may choose one of the following methods:

NPM

npm install @dhi-gras/gras-react-boilerplate -g

// and then use it as
gras-react-boilerplate --app-name=my-app

Yarn

yarn global add @dhi-gras/gras-react-boilerplate

// and use it as
gras-react-boilerplate --app-name=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

Project structure

my-app
├── .github
│   └── workflows
│       └── workflow.yml
├── README.md
├── node_modules
├── package.json
├── yarn.lock
├── tsconfig.json
├── .gitignore
├── .editorconfig
├── .eslintrc.yml
└── src
    ├── app
    ├── app-screen
    ├── common
    ├── dark-mode
    ├── error-screen
    ├── map
    └── navigation

Getting started

Inside the newly created project, you can run:

yarn start

Runs the app in development mode. Open http://localhost:3000 to view it in the browser.

yarn build

Builds the app for production to the dist folder. It correctly bundles React in production mode and optimizes the build for the best performance.