Skip to content

Latest commit

 

History

History
57 lines (36 loc) · 2.34 KB

LAB.md

File metadata and controls

57 lines (36 loc) · 2.34 KB

🧲 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 workspace.json. Make sure you deploy the "exported" sub-folder.


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

    ⚠️  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.

  1. Commit everything before moving on to the next lab

  1. BONUS - 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.

  1. BONUS - Create a new React or NextJS frontend app, and test your above schematic

  1. BONUS - Add a proper scopes for your new apps in nx.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 ➡️