Skip to content

LAB8_Verify and Deploy in Netlify

David Jones-Gilardi edited this page Feb 24, 2021 · 19 revisions

⚒️ Verify and Deploy in Netlify

Exercise time: ~10 minutes

Objectives

In this step, we will:

  • Merge our code back to master and verify production application deployment

We will cover:

  1. Merge back to master
  2. Verify your deployment in Netlify
  3. Feel the enormity of your accomplishment
  4. Super secret full game option

1. Merge back to master

Now it's time to merge ALL of the changes from the last 3 sections back to master. This will kick off an automated deploy to Netlify and get our changes ready for production.

✅ Step 1a: Merge our changes

✔️ Ensure you are in the battlestax directory before running the following commands.

📘 Commands to execute

git add functions/insertGame.js test/insertGame.test.js
git commit -m "Merging insertGame and insertGame.test.js into master"
git push

✅ Step 1b: Create a PR in GitHub to kick off CI/CD pipeline and Deploy Preview in Netlify

✔️ Don't forget we are still working out of the myBranch branch

✔️ Once you've completed the push command above go back to YOUR battlestax repository in Github and create a Pull Request to merge the changes into master. Use the same exact process we used in LAB2 to do this.

✔️ Ensure to let all of your functional and units tests complete before you merge.

If you need a refresher go HERE to LAB2 and then come back here to finish your deployment.

2. Verify your deployment in Netlify

✔️ When your new site is ready, you will be able to go to: <your_url>.netlify.app to see your game. To find your URL, navigate to Deploys in Netlify and click on the link provided via the UI.

Netlify final deploy

✔️ Once clicked you should see a display like the following:

Netlify Setup Example

If you start new games it will create a new record in the database. If you want to validate this behavior click on START NEW GAME.

✔️ Once you click the START NEW GAME button you should see a display like the following:

Netlify Setup Example 2

✔️ Open Astra UI, show the CQL Console and execute the following command (here battlestax is your keyspace and games your collection name - if you chose another names adapt the query accordingly).

📘 Command to execute

SELECT key, text_value FROM battlestax.games;

You should have a result that looks like the following image. If you see the game you just created in this list you know your application is properly hooked up to your database via the document API.

Netlify Setup Example

3. Feel the enormity of your accomplishment

Alrighty, let's sum all this up. If you got to this point you have now...

  • deployed an application through a CI/CD pipeline with GitHub Actions
  • using serverless functions
  • that are globally available via Netlify
  • all backed by the top NoSQL distributed database Apache Cassandra on DataStax Astra
  • without ever touching a server, deploying back-end code, or needing to talk to your IT folks (no harm meant to my IT friends).

If your app goes viral this tech stack will scale with you.

You did this completely from front-end, fullstack knowledge. No back-end needed. Awe...some!

Now go take this knowledge and go create the next disruptive application.

And don't forget to check out our extra resources using the button below.

4. Super secret full game option

Wait! I thought you said we were done!? Well, you are, but if you want to take things one step further click the drop down below.

Secret "full game" option

At this point you have a partially working app. It demonstrates what is needed for our purposes here, but if you want the absolutely completed application then you need to do the following. Be advised, executing these commands will essentially overwrite everything in the master branch.

✔️ Ensure you are in the battlestax directory.

📘 Commands to execute

git checkout full-game
git push -f origin full-game:master

Once completed this will cause an automatic production deployment from master. Again, Netlify is configured to react to any changes to master by default. Since we pushed right to master and skipped using a PR our changes will go right to production.

✔️ Once the deployment is complete, navigate back to Deploys in Netlify and launch your site URL.

✔️ From there, append "/lobby" to the end of your URL. It will look something like "https://cranky-blackwell-45ee9c.netlify.app/lobby".

✔️ Finally, you can start a game by clicking the START NEW GAME button and having your friends join by going to the same URL sans "/lobby". Add a name and the game code generated when you started the game.

Have fun :)

Clone this wiki locally