These steps describe how you can deploy your app online for free (NO credit card required).
- Free MongoDB Atlas account
- Free Heroku account
- Heroku CLI (Windows users might need to restart their VSCode and/or computer to ensure that Heroku is in their PATH. For
bash: heroku: command not found, checkout this StackOverflow answer.)
All these services have a free tier and can be used WITHOUT a credit card.
-
Sign up for a free MongoDB Atlas account
-
You will be forwarded to the Create New Cluster view. Otherwise, navigate to Clusters > Build a Cluster.
NOTE: Maybe you need to create an organization and project first. -
Choose the cloud provider aws and the region Ireland (eu-west-1) (important for compatibility with Heroku!). Keep all other default settings (e.g., M0 Sandbox free tier, cluster name Cluster0) and click Create Cluster (takes a few minutes).
-
Click the Connect button
-
Click the Add a Different IP Address button, enter
0.0.0.0/0for the IP Address and click Add IP Address button.
(Warning: limit IP addresses in real production deployments!) -
Create a new Database user by entering Username and Password (avoid special characters for mongoose compatibility) and clicking the button Create Database User.
-
Continue with Choose a connection method
-
Choose Connect Your Application
-
Keep the default driver version (Node.js, 3.6 or later) and click the Copy button for the Connection String only.
-
Replace the placeholders
<password>with your Database user password (created in step 6.) and the database name<dbname>with a sensible name for your application domain. Example:mongodb+srv://myUser:[email protected]/animalProductionDB?retryWrites=true&w=majority
Find a more detailed tutorial here.
Sign up for a free Heroku account.
Install the Heroku CLI, login via heroku login, and follow these steps:
cd group-00-web
# Optional app name: heroku apps:create my-app-name --region eu
heroku apps:create --region eu
heroku config:set MONGODB_URI="mongodb+srv://myUser:[email protected]/animalProductionDB?retryWrites=true&w=majority"
heroku config:set NODE_ENV="production"
# MacOS, Linux
export API_ENDPOINT="$(heroku apps:info -s | grep web_url | cut -d= -f2)api"
heroku config:set VUE_APP_API_ENDPOINT=$API_ENDPOINT
# Windows
heroku config:set VUE_APP_API_ENDPOINT=web_url_to_your_herokuapp/apiTo set the API_ENDPOINT, you can also manually extract the web_url from heroku apps:info -s. For example: API_ENDPOINT=https://aqueous-crag-12345.herokuapp.com/api
The app needs to be re-deployed whenever
VUE_APP_API_ENDPOINTis updated (e.g., when the Heroku app name changed). Therefore, you might need to push a new commit to master to trigger a full re-deployment.
git push heroku master
heroku openheroku logs # Show current logs
heroku logs --tail # Show current logs and keep updating with any new results
heroku ps # Display dyno statusThis setup automatically deploys the latest commit in the master branch to Heroku if the tests succeed:
- Open the GitLab settings
Settings > CI / CD > Variables(e.g., https://git.chalmers.se/courses/dit341/group-00-web/-/settings/ci_cd) - Add a variable with the key
HEROKU_APP_NAME. As value, enter the name of your app shown on the first line when runningheroku apps:info. It is also visible in the Heroku app settings (https://dashboard.heroku.com/apps/your-app-name/settings). Example above:aqueous-crag-12345 - Add a variable with the key
HEROKU_API_KEY. As value, enter theAPI Keyof your Heroku account in the Heroku account settings (https://dashboard.heroku.com/account). You can enable "Mask variable" to protect your secret API key.
Deployment will only be triggered for the master branch and when both HEROKU variables are configured.
A HelloWorld tutorial can be found here: Deploy Node.js App with GitLab CI/CD