A dynamic microservices framework for building, connecting, and deploying cloud-native applications.
Nuxt and Vue are great for heavy web applications, but many largely favor React due to JSX. This app is set up in a way to get the SSR support from Nuxt while writing templates using JSX by using a combination of first class support from Vue and some clever babel presents! The usage of JSX allows for further benefit from Typescript and type checking inside template logic to develop faster.
In this example, we've written a component spec (the architect.yml file) that defines a component to run a Nuxt based web application.
In the architect.yml file for this project, we describe the Nuxt application as
a service and connect it to a
Node.js REST API as a dependency.
We also leverage Architect's service referencing syntax
to populate network information, which allows Architect to seamlessly promote this stack from local dev all the way through to production!
Learn more about the architect.yml file
This example application is configured to connect to the Node.js Starter Project
REST API for its backend, but you can modify the architect.yml file to connect to any REST API backend that has been registered to your account as an
Architect Component.
Once this application is running, you will be able to submit your favorite films, rate them, and see the list of all the films and ratings that have been submitted through your application.
Before you can run this example application, you will need to install the Architect CLI.
Since this application uses the Node.js Starter Project as an external
dependency, packaged into an independent Architect Component, you will need to clone that repository as well as this repository.
Dependencies allow you to package the parts of your application stack independently rather than declaring them as services
within the same architect.yml file, allowing
reuse of your components.
Once you have cloned the Node.js Starter Project, you will need to use the link command
before starting the React application locally. This command tells Architect to look for the source code for this dependency locally rather than pulling
down a Component that has been registered in Architect Cloud.
# Clone the Node.js Starter Project repository,
# Navigate to the repository's top-level directory, and link the project
$ git clone git@github.com:architect-templates/node-rest-api.git
$ cd ./node-rest-api
$ architect link .
$ cd ../The architect.yml file is declarative, which allows the Architect Component it describes to be run in any environment,
from local development all the way to production. Follow these steps to clone this repository and run the application
locally.
Once the deployment has completed, you can reach your new service by going to https://app.localhost.architect.sh.
# Clone the repository and navigate to this directory
$ git clone git@github.com:architect-templates/nuxt.git
$ cd ./nuxt
# Deploy locally using the dev command
$ architect dev .Want to try deploying this to a cloud environment? Architect's got you covered there, too! It only takes a minute to sign up for a free account.
You can then register each component to your free environment and deploy the application.
To do this, run the following commands.
The <account-name> is the name you used when you created your account in Architect Cloud. Use "example-environment" for
the <environment-name> to deploy to the free environment that is created when you register with Architect.
# Register and tag the node-rest-api component with Architect Cloud's component registry
$ cd ../node-rest-api
$ architect register . --tag latest --account <account-name>
# Register and tag the react component with Architect Cloud's component registry
$ cd ../nuxt
$ architect register . --tag latest --account <account-name>
# Deploy to Architect Cloud
$ architect deploy react -a <account-name> -e <environment-name>