Skip to content

Latest commit

 

History

History
56 lines (34 loc) · 2.38 KB

LAB.md

File metadata and controls

56 lines (34 loc) · 2.38 KB
Raw

🧲 Lab 19 Alternative - Creating and deploying a 2nd frontend

⏰  Estimated time: 15-20 minutes

📚 Learning outcomes:

  • Recap what you've learned about generating apps and creating custom executors with "run-commands"

🏋️‍♀️ Steps :

In this lab, we'll practice generating a 2nd frontend, using NextJS. This is in preparation for the next few labs, where we'll be deploying the two frontends independently in our GitHub Actions based Continuous Deployment setup.

  1. We want to build a new Admin UI for out store. But we'll use NextJS as our framework of choice. Generate a new NextJS app called "admin-ui" You can use any configuration options you want.

    ⚠️  There will be fewer hints in this lab, but you can always use the solution as a last resort.


  1. We won't make any changes to it. Let's serve it to see if it looks okay locally.

  1. For simplicity, we want to run it on Surge, so let's export it as static assets for now. Since we added a lot of files, also commit your changes.

    ⚠️  Look at the available "targets" for your new Next app in project.json. Make sure you deploy the "exported" sub-folder.


  1. Following the same steps as Lab 18, add a "deploy" target to it.

    ⚠️️  BONUS POINTS: Create a custom workspace generator that adds a "deploy" target for a frontend project, so that we don't have to manually re-do the steps in Lab 18 each time.

    ⚠️  Hint: You can have a .local.env at the root of your workspace as well, for any variables that need to be shared. You can move your SURGE_TOKEN variable to the root, so it can be shared among your projects. READ MORE


  1. Try to deploy both apps and check if they still work.

    ⚠️️️  BONUS: Use a single NX command to tell it to deploy all projects in parallel.


  1. Commit everything before moving on to the next lab

  1. BONUS - Add proper scopes for your new apps in project.json and run your update-scope-schema workspace generator you created a few labs ago.

🎓  If you get stuck, check out the solution

➡️  Next lab ➡️