📎 Lab 18 - Run-Commands and deploying the frontend

⏰ Estimated time: 15-20 minutes

📚 Learning outcomes:

• Understand how to create custom targets via the "run-commands" workspace executor
• Explore real-world usages of "run-commands" by creating a frontend "deploy" executor
• Learn how to expose custom ENV variables to Nx
  
  
  

🏋️‍♀️ Steps :

1. Make sure you are on the main branch
   
   

2. We'll use a CLI tool called Surge to statically deploy the front-end:

   npm i -S surge
   

   
   

3. Get the surge token (you'll need to create an account with an email and password):

   npx surge token
   

   ☝️ Copy the token you get
   
   

4. Let's use the Surge CLI to deploy our project:

   # make sure the project is built first - and we have something in dist
   nx build store
   # use surge to deploy whatever assets are in dist/apps/store
   npx surge dist/apps/store https://<chose-some-unique-url-123>.surge.sh --token <your-surge-token>
   

   ⚠️ Make sure you chose a unique value for your domain above, otherwise it will fail as you won't have permission to deploy to an existing one.

   ⚠️ You should see surge deploying to your URL - if you click you'll see just the header though, because it doesn't have a server yet to get the games from (the Network Dev Tools tab will have failing requests).
   
   

5. Let's now abstract away the above command into an Nx target. Generate a new "deploy" target using the @nx/workspace:run-commands generator:

   • under the store project
   • the "command" will be the same as the one you typed in the previous step
   🐳 Hint

   Consult the run-commands generator docs here

   
   

6. Use Git to inspect the changes in project.json and try to deploy the store using Nx!
   
   

7. We're now storing the surge token in project.json. We don't want to check-in this file and risk exposing this secret token. Also, we might want to deploy to different domains depending on the environment. Let's move these out:

   📁 Create a new file apps/store/.local.env

   🔒 And let's add your secrets to it

   SURGE_TOKEN=<your-surge-token>
   SURGE_DOMAIN=https://<some-unique-url-123>.surge.sh
   

   ✅ Finally, update your "deploy" command, so that it loads the values from the ENV, using the ${ENV_VAR} syntax.

   🐳 Hint

   surge dist/apps/store ${SURGE_DOMAIN} --token ${SURGE_TOKEN} 
   

   
   

8. Now invoke the deploy target again, and check if it all still works.

   ⚠️ Note for Windows users: the command might fail, as we're trying to access env variables the Linux-way. To make it pass, you can generate a separate windows-deploy executor (make sure you keep the existing deploy target intact - it will be used by GitHub Actions):

   nx generate run-commands windows-deploy --project=store --command="surge dist/apps/store %SURGE_DOMAIN% --token %SURGE_TOKEN%"
   nx windows-deploy store
   

   
   

9. BONUS - Notice how you can keep running the deploy command and it will always fully run it, it will not pull from the cache. We'll talk about this after the lab.

10. We currently have to remember to always run the build before deploying an app. Can you fix this, so that it always makes sure the app is built before we deploy?

---

❓ We did not load those environment variables into the deploy process anywhere. We just added a .local.env file. How does that work?

Nx automatically picks up any .env or .local.env files in your workspace, and loads them into processes invoked for that specific app.

---

🎓If you get stuck, check out the solution

---

➡️ For the next lab, head over to our chapter list to chose your path ➡️