Vida: Turn JSON files into data dashboard

Show & Tell
#1

Hi everyone,

I want to introduce our project: Vida. My partner and I had this idea for a while. We want to provide an easy way to construct dashboards using JSON files. Previous implementations of the idea uses sophisticated stacks. These data visualization apps eventually become heavy and cumbersome to deploy. When we saw redwoodjs, we think it can provide a scalable way to create dashboards.

Here’s our code repository: https://github.com/vidalab/vida

We make use of tailwindcss, server-side environment variable loading for dynamic configuration. If you have ideas or suggestions, please let us know.

We prototyped 2 live dashboards and deployed to netlify.

Covid Trend in the United States
https://pedantic-keller-ec3fcd.netlify.app

Covid Cases in the United States
https://reverent-goldstine-578d77.netlify.app

Thanks for the help from redwoodjs team.

3 Likes
#2

Great work @dnprock :rocket:

I’m excited to see you were able to configure your deploy based on the custom API use case. And a huge THANK YOU for sharing this work with the community. :star_struck:

Including a screenshot below – the charts look very clean and have a nice responsive design!

Screen Shot 2020-04-29 at 5.03.22 PM
Screen Shot 2020-04-29 at 5.03.22 PM2572×1628 473 KB

1 Like
#3

This is great work, thanks for sharing!

I just released a cookbook recipe that does a related version of this—removes the /api side of the app completely and just uses browser fetch() to get a flat JSON file from web/public: https://redwoodjs.com/cookbook/app-without-a-database If you wanted to edit your dashboard you’d have to change the JSON file and re-deploy.

2 Likes
#4

@rob thanks for the suggestion with using web/public. It works well. I still make use of API endpoints to return environment variables. That way, I can deploy multiple sites without changing the codebase. I just change the environment variable in netlify.

#5

I was excited to see https://redwoodjs.com/cookbook/disable-api-database

Thanks for that.

I’m also wondering how I can disable the RW API but then change my RW client to pull from my own temporary GraphQL server set up via https://github.com/marmelab/json-graphql-server (or https://github.com/walmartlabs/json-to-simple-graphql-schema).

My netlify.toml is:

[build]
  #Comments are from https://redwoodjs.com/cookbook/disable-api-database
  #command = "yarn rw db up --no-db-client && yarn rw build"
  command = "yarn rw build web"
  publish = "web/dist"
  #functions = "api/dist/functions"

[dev]
  command = "yarn rw dev"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

[[plugins]]
package = 'netlify-plugin-prisma-provider'
  [plugins.inputs]
  path = 'api/prisma/schema.prisma'

I’ve tried editing my redwood.toml but don’t know what I’m doing (how to get Apollo to look at my json-graphql-server at http://localhost:4000/) and would appreciate your advice.

Thanks so much!

#6

Hmm, this is probably a question for @peterp

#7

Ok, so to be clear, you are not going to spin up Redwood API (and therefore DB), correct? But, you do want the Web to connect to port 4000 locally, correct?

In the redwood.toml:

[web]
  port = 8910
  apiProxyPath = "/.netlify/functions"
[api]
  port = 8911
[browser]
  open = true

You’ll need to change the api.port to 4000. For local development, the apiProxyPath doesn’t matter since it’s aliased (see webpack dev config here). If you’re trying to deploy, then you’ll definitely need to configure apiProxyPath per your Lambda endpoints (see webpack production config here).

Lastly, I think you can just get away with running the local dev server with yarn rw dev web.

Hope that helps (at least until Peter can sort us all out :wink: )