VTex is a SAAS E-commerce platform that has tons of modules that help out with the implementation of your site. For the front-end there is the CMS (Content Management System) module which is really useful. Here you can modify anything from HTML templates, CSS, Javascript, banners, etc. There are many ways you can modify its front-end UI components, but the simplest way to edit your storefront UI elements is using a handy tool called VTex Speed.
VTex Speed really helps out in the development of your store before having to send your modifications to a staging/production environment. This really cuts down time in many different ways.
PROS
- Seeing modifications instantly
- Easy to use
- Less Compilation
- Coffee Compilation
- CSS minification
CONS
- Images are not rendered
- CSS and JS file needs to exist before modification
- Can’t modify HTML
Setup
First thing is first, clone the repo in the directory of your choice:
Download repo -> here
Then modify your package.json file like so:
{
"name": "vtex-speed",
"accountName": "******",
"version": "4.0.0",
"secureUrl": true,
"readmeFilename": "README.md",
"description": "******",
"scripts": {
"start": "grunt"
},
"devDependencies": {
"connect-http-please": "^0.3.0",
"grunt": "~1.0.1",
"grunt-contrib-clean": "^1.0.0",
"grunt-contrib-coffee": "^1.0.0",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-connect": "^1.0.2",
"grunt-contrib-copy": "^1.0.0",
"grunt-contrib-cssmin": "^1.0.1",
"grunt-contrib-imagemin": "^1.0.0",
"grunt-contrib-less": "^1.3.0",
"grunt-contrib-uglify": "^1.0.1",
"grunt-contrib-watch": "~1.0.0",
"grunt-spritesmith": "^6.3.1",
"jpegtran-bin": "^3.0.4",
"proxy-middleware": "^0.15.0",
"serve-static": "^1.10.0"
},
"repository": {
"type": "git",
"url": "git://github.com/vtex/speed.git"
},
"keywords": [
"grunt",
"coffee",
"less",
"livereload",
"vtex"
],
"license": "MIT"
}
Make sure you insert the accountName of the store you are modifying (The accounName isn’t there by default so you have to add it). Also, you need to have the latest version of these dependencies. Try and have something like I do in the devDependencies block.
Next step is to go to the CMS of your store and modify the protocol of you store.
Open the CMS:
After You will get a form like this:
After changing the protocol:
- run npm install --verbose (This will install all dependencies)
- run sudo npm start (This will start the server)
Done! Now just login to your local VTex account and you are good to go.
Steps to modify css file.
In order to modify your CSS/JS files using VTex Speed, first you need to add the css file to VTex.
- CMS/Files Manager/CSS or CMS/Files Manager/JS
Once you have your file uploaded then you have to add to import your file in the <head> of your HTML
- <link href="/arquivos/name_of_your_file.css?nocache=1.0.0" type="text/css" rel="stylesheet" />.
Now in VTex Speed you can start modifying this file you just uploaded. To do so, create the same file you did but with the extension .less. Don’t worry VTex Speed uses grunt in order to compile your files from Less to CSS, and you are done! Every time you save, the site will automatically reload and load the new changes.
Uploading changes to VTex
When you are done making your changes you can use the Files manager in the CMS to upload the file. Make sure you upload CSS file in the /build directory. Done!
