A minimal dashboard with taskbar and mini variant draw. The chart is courtesy of Recharts, but it is simple to substitute an alternative.
This branch has an express server that serves the dashboard data and the static web application once it's built. The source for the entire application (Server/Client) is in the ./src
folder and is written to the ./build
folder during build.
The project source is organized as follows:
./pages
contains the required react app base files./pages/app
contains the react app dashboard code./pages/api
source for the api server./pages/structs
contains the shared data structures used by the client and server
Install dependencies
> npm install
To run the application in development mode with live rebuild and reload
> npm run dev
The following steps were used to bootstrap the project
> npm init -y
> npm install --save react react-dom next lodash @material-ui/core @material-ui/icons recharts
> npm i -D typescript tslint tslint-react @types/lodash @types/react @types/react-dom @types/recharts @types/node
> mkdir pages
Then open the package.json
file and replace scripts with the following:
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
Configuring tslint
Initialize tslint config file
> ./node_modules/.bin/tslint --init
by replacing the extends block of tslint.json
"extends": [
"tslint:recommended",
"tslint:react"
],
We'll also need a page to render, let's create pages/index.tsx with the following content:
const Home = () => <h1>Hello world!</h1>;
export default Home;
Now everything is ready. Run the following command to start the dev server:
npm run dev