Search…
Use Cases
Guides
Creating Blueprints (Alpha)
API Reference
Admin Setup
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
macOS
Linux
Windows
1
# via Homebrew
2
brew install techvelocity/tap/veloctl
3
​
4
# or with a script
5
curl -fsSL https://releases.velocity.tech/veloctl/latest.sh | sh -s
Copied!
1
# Via snapcraft
2
sudo snap install veloctl --classic
3
​
4
# or with a script
5
curl -fsSL https://releases.velocity.tech/veloctl/latest.sh | sh -s
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 17h ago