Getting Started
Requirements
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.
Installing
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
Starting with Webpack
yarn run dev (development environment)
yarn run build (production environment)
Usage
Introduction
This webpack was basically made to supply the need of multiple entries like Javascript and Sass and generate in separate files.
BrowserSync
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/
Tasks
- JavaScript Module Pattern
- Sass
Developed with
- Webpack - Robust bundle files.
Author
👤 Rodrigo Reis
- Twitter: @_rodrigore
- Github: @rodrigoreeis
- Website: rodrigo.me
📝 License
Copyright © 2019 Rodrigo Reis.
This project is MIT licensed.
Show your support
Give a ⭐️ if you liked!