Search…
Frontend development against an isolated environment
If you're developing a frontend application, you often have to wait to deploy to a shared environment to check it against the backend services you need. This can create bottlenecks when you want to make smaller changes, work on a new feature, or other additional use cases. Instead of getting to market faster, you end up colliding with coworkers all waiting to test or deploy to a shared environment. Or, there's a fear of destroying production, if you only test locally without all your application's dependencies.
With Velocity, you can work and develop a frontend application against your backend services without having to worry about colliding with your coworkers or accidentally destroying production.
In this tutorial, you'll learn how to develop the website (a React-like application) in the following architecture while only running the website locally.

Installation

If you already followed the Setup, feel free to skip directly into Creating your environment.
macOS
Linux
Windows
1
brew install techvelocity/tap/veloctl
Copied!
1
sudo snap install veloctl --classic
Copied!

Authenticate to Velocity

1
veloctl auth login
Copied!
1
Attempting to automatically open the login page in your default browser.
2
If the browser does not open or you wish to use a different device to authorize this request, open the following URL:
3
4
https://login.velocity.tech/activate?user_code=ABCD-EFGH
5
6
and verify the following code appears:
7
8
ABCD-EFGH
9
10
* Fetching underlying Kubernetes cluster configuration...
11
* Stored context 'velocity-VELOACME' locally (`/Users/Marty/.kube/config`).
12
Welcome Marty McFly ([email protected])!
Copied!

Creating your environment

In our example, we will be developing the frontend app named website and creating an isolated environment to work on.
If you don't know how your service is defined in your organization, or you want to peek at the available services you can use veloctl env list-services to list them.
Use veloctl env create to create an isolated environment for you, In this case, we've chosen to develop the website service:
1
veloctl env create --service website
Copied!
1
Watching environment happy-monday-51 status... /
2
3
Point in time: 2015-10-21T19:28:00Z
4
5
Service Status Version Public URI
6
database In Progress mysql:5.7
7
backend Pending ...6c6ed6e8d52388190 (pending)
8
worker Pending ...91698f97536e95126
9
website Pending (pending)
10
11
Overall status: In Progress
Copied!
Velocity automatically syncs the dependencies of your services in real-time, so you don't have to worry about not having access to the other components required for your app to work.
Velocity creates an environment based on the current production state.
Once the environment is ready, the CLI will show its up-to-date status:
1
Watching environment happy-monday-51 status...
2
3
Point in time: 2015-10-21T19:28:00Z
4
5
Service Status Version Public URI
6
database Ready mysql:5.7
7
backend Ready ...6c6ed6e8d52388190 https://backend-happy-monday-51.awesomedev.com
8
worker Ready ...91698f97536e95126
9
website Ready https://website-happy-monday-51.awesomedev.com
10
11
Overall status: Ready
12
13
Your environment is ready! To develop on your services with command <CMD>, please run:
14
15
veloctl env develop --service website -- <CMD>
Copied!

Running your frontend app

Using veloctl env develop, I can wrap my run command to start developing the application:
yarn
npm
1
veloctl env develop --service website -- yarn start
Copied!
1
veloctl env develop --service website -- npm start
Copied!
The double dash (--) is important to separate any arguments you pass to your command from the commands passed to veloctl. But don't worry, we'll remind you if you forget it!
1
veloctl env develop --service website -- yarn start
Copied!
1
[VELOCTL] Developing service 'website' in environment 'happy-monday-51'...
2
[VELOCTL] Executing command: yarn start
3
[VELOCTL] Service 'website' is also accessible via https://website-happy-monday-51.awesomedev.com
4
5
yarn run v1.22.10
6
$ react-scripts start
7
ℹ 「wds」: Project is running at http://10.100.1.3/
8
ℹ 「wds」: webpack output is served from
9
ℹ 「wds」: Content not from webpack is served from /Users/Marty/website/public
10
ℹ 「wds」: 404s will fallback to /
11
Starting the development server...
12
13
Compiled successfully!
14
15
You can now view website in the browser.
16
17
Local: http://localhost:3000
18
On Your Network: http://10.100.1.3:3000
19
20
Note that the development build is not optimized.
21
To create a production build, use yarn build.
Copied!
Your app is now available on http://localhost:3000 and also on https://website-happy-monday-51.awesomedev.com !

Cleaning up

When you are done developing and ready to clean up the resources, use:
1
veloctl env destroy
Copied!
1
? Are you sure you want to destroy the 'happy-monday-51' environment? Yes
2
Destroying environment happy-monday-51... \
3
4
Environment successfully destroyed
Copied!

What's next?

Last modified 14d ago