There are multiple ways you can deploy a Cube.js API; you can learn more about them here in the docs. In this tutorial, we'll deploy it on Heroku.
First, let's create a new Heroku app. Run the following command inside your Cube.js project folder.
$ heroku create react-dashboard-api
We also need to provide credentials to access the database. I assume you have your database already deployed and externally accessible.
$ heroku config:set \ CUBEJS_DB_TYPE=postgres \ CUBEJS_DB_HOST=<YOUR-DB-HOST> \ CUBEJS_DB_NAME=<YOUR-DB-NAME> \ CUBEJS_DB_USER=<YOUR-DB-USER> \ CUBEJS_DB_PASS=<YOUR-DB-PASSWORD> \ CUBEJS_API_SECRET=<YOUR-SECRET> \ --app react-dashboard-api
Then, we need to create two files for Docker. The first file,
Dockerfile, describes how to build a Docker image. Add these contents:
FROM cubejs/cube:latest COPY . .
The second file,
.dockerignore, provides a list of files to be excluded from the image. Add these patterns:
node_modules npm-debug.log dashboard-app .env
Now we need to build the image, push it to the Heroku Container Registry, and release it to our app:
$ heroku container:login $ heroku container:push web --app react-dashboard-api $ heroku container:release web --app react-dashboard-api
Let's also provision a free Redis server provided by Heroku:
$ heroku addons:create heroku-redis:hobby-dev --app react-dashboard-api
Great! You can run the
heroku open --app react-dashboard-api command to open your Cube.js API and see this message in your browser:
Cube.js server is running in production mode.
Since our frontend application is just a static app, it easy to build and deploy. Same as for the backend, there are multiple ways you can deploy it. You can serve it with your favorite HTTP server or just select one of the popular cloud providers. We'll use Netlify in this tutorial.
Also, we need to set Cube.js API URL to the newly created Heroku app URL. In the
src/App.js file, change this line:
- const API_URL = "http://localhost:4000"; + const API_URL = "https://react-dashboard-api.herokuapp.com";
Next, install Netlify CLI.
$ npm install netlify-cli -g
Then, we need to run a
build command inside our
dashboard-app. This command
creates an optimized build for production and puts it into a
$ npm run build
Finally, we are ready to deploy our dashboard to Netlify; just run the following command to do so.
$ netlify deploy
Follow the command line prompts and choose
yes for a new project and
build as your deploy folder.
That’s it! You can copy a link from your command line and check your dashboard live!
Congratulations on completing this guide! 🎉
I’d love to hear from you about your experience following this guide. Please send any comments or feedback you might have in this Slack Community. Thank you and we hope you found this guide helpful!