Frontend development
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.
macOS
Linux
Windows
# via Homebrew
brew install techvelocity/tap/veloctl
# or with a script
curl -fsSL https://releases.velocity.tech/veloctl/latest.sh | sh -s
# Via snapcraft
sudo snap install veloctl --classic
# or with a script
curl -fsSL https://releases.velocity.tech/veloctl/latest.sh | sh -s
veloctl auth login
Attempting to automatically open the login page in your default browser.
If the browser does not open or you wish to use a different device to authorize this request, open the following URL:
https://login.velocity.tech/activate?user_code=ABCD-EFGH
and verify the following code appears:
ABCD-EFGH
* Fetching underlying Kubernetes cluster configuration...
* Stored context 'velocity-VELOACME' locally (`/Users/Marty/.kube/config`).
Welcome Marty McFly ([email protected])!
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:veloctl env create --service website
Watching environment happy-monday-51 status... /
Point in time: 2015-10-21T19:28:00Z
Service Status Version Public URI
database In Progress mysql:5.7
backend Pending ...6c6ed6e8d52388190 (pending)
worker Pending ...91698f97536e95126
website Pending (pending)
Overall status: In Progress
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:
Watching environment happy-monday-51 status...
Point in time: 2015-10-21T19:28:00Z
Service Status Version Public URI
database Ready mysql:5.7
backend Ready ...6c6ed6e8d52388190 https://backend-happy-monday-51.awesomedev.com
worker Ready ...91698f97536e95126
website Ready https://website-happy-monday-51.awesomedev.com
Overall status: Ready
Your environment is ready! To develop on your services with command <CMD>, please run:
veloctl env develop --service website -- <CMD>
Using
veloctl env develop, I can wrap my run command to start developing the application:yarn
npm
veloctl env develop --service website -- yarn start
veloctl env develop --service website -- npm start
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!veloctl env develop --service website -- yarn start
[VELOCTL] Developing service 'website' in environment 'happy-monday-51'...
[VELOCTL] Executing command: yarn start
[VELOCTL] Service 'website' is also accessible via https://website-happy-monday-51.awesomedev.com
yarn run v1.22.10
$ react-scripts start
ℹ ｢wds｣: Project is running at http://10.100.1.3/
ℹ ｢wds｣: webpack output is served from
ℹ ｢wds｣: Content not from webpack is served from /Users/Marty/website/public
ℹ ｢wds｣: 404s will fallback to /
Starting the development server...
Compiled successfully!
You can now view website in the browser.
Local: http://localhost:3000
On Your Network: http://10.100.1.3:3000
Note that the development build is not optimized.
To create a production build, use yarn build.
Your app is now available on
http://localhost:3000 and also on https://website-happy-monday-51.awesomedev.com !When you are done developing and ready to clean up the resources, use:
veloctl env destroy
? Are you sure you want to destroy the 'happy-monday-51' environment? Yes
Destroying environment happy-monday-51... \
Environment successfully destroyed
Last modified 8d ago