To get started first you should either clone or download the repository.
You should also have node.js and yarn installed on your computer.
To download the node.js just click on the link, usually yarn is installed along with node.js.
The first step you must follow to run the project is to install all its dependencies.
The following commands should do this for you.
yarn install
yarn run dev (development environment)
yarn run build (production environment)
This webpack was basically made to supply the need of multiple entries like Javascript and Sass and generate in separate files.
This webpack has BrowserSync it performs auto reloading after any changes to the file without the need for any software such as Fiddler
to make this change in the production / development environment.
new BrowserSyncPlugin({
open: 'external',
https: true,
ui: false,
host: `${env.STORE_NAME}.vtexlocal.com.br`,
startpath: '/admin/login/',
proxy: `https://${env.STORE_NAME}.vtexcommercestable.com.br`,
serveStatic: [
{
route: '/arquivos',
dir: `${PATHS.dist}/arquivos`,
},
],
}),
open package.json
inside him have some config:
This json is for you to put the name of your store.
"scripts": {
"dev": "webpack --config ./webpack/webpack.dev.js --watch --mode development --env.STORE_NAME={{ YOUR_STORE_NAME }}",
},
This variables is for the current folder where the files are generated by default the webpack is configured to compile everything in /dist;
const PATHS = {
....
global: path.join(__dirname, '../src/global'),
}
This variabel is responsible for making the exchange of files from your machine to https://{{yourstore}}.vtexcommercestable.com.br/arquivos/
from vtex. Remembering that the files must have the same name.
After you have done the basic configuration for BrowserSync to work
Starting development environment
yarn run dev
If everything is ok the terminal will show this message:
[Browsersync] Proxying: https://{{yourStore}}.vtexcommercestable.com.br
[Browsersync] Access URLs:
--------------------------------------------
Local: https://localhost:3000
External: https://{{yourStore}}.vtexlocal.com.br:3000
--------------------------------------------
After you start the terminal it will open a link for you to login with your store credentials and after you have provided your store credentials you can develop everything in this url:
https://{{yourStore}}.vtexlocal.com.br:3000/
- JavaScript Module Pattern
- Sass
- Webpack - Robust bundle files.
👤 Rodrigo Reis
- Twitter: @_rodrigore
- Github: @rodrigoreeis
- Website: rodrigo.me
Copyright © 2019 Rodrigo Reis.
This project is MIT licensed.
Give a ⭐️ if you liked!