DEV Community: Alan Castro

Setup Vue3 with Ant Design

Alan Castro — Tue, 03 Nov 2020 19:37:33 +0000

Ant design is my favorite design system and they already have a version that works with Vue3.

I'd like to share how to setup a Vue3 project with Ant Design using vue-cli.

Create a project with vue-cli

vue create your-app-name

And then select Vue 3 option.

Install Vue Ant Design and some dependencies

cd create your-app-name
npm install ant-design-vue@next @ant-design/icons-vue
npm install -D less less-loader babel-plugin-import

Create a `vue.config.js` file

module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          javascriptEnabled: true,
        },
      },
    },
  },
};

Edit the `babel.config.js` file

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      'import',
      { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true },
    ],
  ],
};

Now you can import ant designs components on main.js like the following.

import { createApp } from 'vue'
import {
  Layout,
  Button,
  Spin,
  Result,
  Card,
  Divider,
  Col,
  Row,
  Drawer,
  Table,
  Form,
  InputNumber,
  Tag,
} from 'ant-design-vue';
import App from './App.vue'

const app = createApp(App);
app.config.productionTip = false;
app.use(Layout);
app.use(Button);
app.use(Spin);
app.use(Result);
app.use(Card);
app.use(Divider);
app.use(Col);
app.use(Row);
app.use(Drawer);
app.use(Table);
app.use(Form);
app.use(InputNumber);
app.use(Tag);
app.mount('#app');

Check out my repository with this configuration done: https://github.com/alandecastros/vue3-ant-design-starter

See all the components that Ant Design offers at https://2x.antdv.com/docs/vue/introduce/.

That's it!

Eslint for Vue3 projects in VSCode

Alan Castro — Tue, 03 Nov 2020 19:12:38 +0000

I'd like to share my VSCode and ESLint configuration that I use in my Vue3 projects.

VsCode

Install the following extensions

ESLint
Vetur

Add the following in your vscode settings

"eslint.validate": [
  "vue",
  "javascript",
  "javascriptreact"
],
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
"vetur.validation.template": false,
"editor.formatOnPaste": true,
"editor.formatOnType": true,
"editor.formatOnSave": false,
"files.eol": "\n"

Vue3 Project

After creating your vue3 project with vue create.

Remove any eslint configuration from your package.json file.
Install some packages with npm

npm install -D eslint prettier babel-eslint eslint-config-airbnb-base eslint-plugin-import eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue

Create a .eslintrc.js file at your project's root

module.exports = {
  root: true,
  env: {
    browser: true,
  },
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module',
  },
  extends: [
    'airbnb-base',
    'plugin:vue/vue3-essential',
    'prettier/vue',
    'plugin:prettier/recommended'
  ],
  rules: {
    'comma-dangle': 'off',
    'class-methods-use-this': 'off',
    'import/no-unresolved': 'off',
    'import/extensions': 'off',
    'implicit-arrow-linebreak': 'off',
    'import/prefer-default-export': 'off',
    "vue/component-name-in-template-casing": ["error", "kebab-case", {
      "ignores": []
    }],
    'prettier/prettier': ['error', { 'singleQuote': true, 'endOfLine': 'auto' }]
  },
};

Restart VsCode

Check out the repository with this configuration done: https://github.com/alandecastros/vue3-starter

That's it!

Eslint for Vue projects in VSCode

Alan Castro — Thu, 04 Jun 2020 13:46:11 +0000

I'd like to share my VSCode and ESLint configuration that I use in my VueJS projects.

First configure VSCode

Install the following extensions

ESLint
Vetur

Add the following in the vscode settings

"eslint.validate": [
  "vue",
  "javascript",
  "javascriptreact"
],
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
"vetur.validation.template": false,
"editor.formatOnPaste": true,
"editor.formatOnType": true,
"editor.formatOnSave": false,
"files.eol": "\n"

After creating your vue project with vue create run this npm install command

npm install -D eslint prettier babel-eslint eslint-config-airbnb-base eslint-plugin-import eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue

Remove any eslint configuration from your package.json file.

Create a .eslintrc.js file at your project's root

module.exports = {
  root: true,
  env: {
    browser: true,
  },
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module',
  },
  extends: [
    'airbnb-base',
    'plugin:vue/recommended',
    'prettier/vue',
    'plugin:prettier/recommended'
  ],
  rules: {
    'comma-dangle': 'off',
    'class-methods-use-this': 'off',
    'import/no-unresolved': 'off',
    'import/extensions': 'off',
    'implicit-arrow-linebreak': 'off',
    'import/prefer-default-export': 'off',
    "vue/component-name-in-template-casing": ["error", "kebab-case", {
      "ignores": []
    }],
    'prettier/prettier': ['error', { 'singleQuote': true, 'endOfLine': 'auto' }]
  },
};

That's it.

Have fun!

Gitlab CI script to deploy a .NET core Azure Webapp

Alan Castro — Sun, 24 May 2020 15:34:44 +0000

Here is the .gitlab-ci.yml that I use to deploy my .NET Core 3.1 azure web app in Gitlab CI/CD.

Variables that I use in the scripts:

$AZ_SERVICE_PRINCIPAL_URL
$AZ_SERVICE_PRINCIPAL_SECRET
$AZ_SERVICE_PRINCIPAL_TENANT
$AZ_APP_NAME
$AZ_APP_RESOURCE_GROUP

stages:
  - deploy

deploy:
  stage: deploy
  image: mcr.microsoft.com/dotnet/core/sdk:3.1
  script:
    - apt-get update && apt-get -y install zip
    - curl -sL https://aka.ms/InstallAzureCLIDeb | bash
    -  az login --service-principal -u $AZ_SERVICE_PRINCIPAL_URL -p $AZ_SERVICE_PRINCIPAL_SECRET --tenant
        $AZ_SERVICE_PRINCIPAL_TENANT
    - dotnet restore --configfile ./NuGet.config 
    - dotnet publish -c release -o out
    - cd out && zip -r app.zip .
    - az webapp deployment source config-zip -n $AZ_APP_NAME -g $AZ_APP_RESOURCE_GROUP --src app.zip
  only:
    - master

Hope it's useful

Github action to publish a Nuget package to nuget.org

Alan Castro — Sun, 24 May 2020 15:26:02 +0000

Here is the .github/workflows/nuget.yml that I use to deploy my Nuget packages to nuget.org in Github.

Just change YOUR_PROJECT to the path of your .csproj file and create a secret called NUGET_API_KEY at your github project.

name: Nuget Package action name

on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Setup .NET Core
      uses: actions/setup-dotnet@v1
      with:
        dotnet-version: 3.1.101
    - name: Build with dotnet
      run: dotnet build --configuration Release
    - name: Test with dotnet
      run: dotnet test
    - name: Pack with dotnet
      run: dotnet pack YOUR_PROJECT.csproj --output nuget-packages --configuration Release
    - name: Push with dotnet
      run: dotnet nuget push nuget-packages/*.nupkg --api-key ${{ secrets.NUGET_API_KEY }} --source https://api.nuget.org/v3/index.json

Hope it's useful

Gitlab CI script to deploy a Azure Static Website

Alan Castro — Sun, 24 May 2020 15:19:20 +0000

Before using this script you must have an Azure storage account created with the static website enabled.

In this example I have a javascript project that I build using npm.

Variables:

$AZ_STORAGE_CONNECTION_STRING

Here is the .gitlab-ci.yml.

stages:
  - build
  - deploy

build:
  stage: build
  image: node:10
  script:
    - npm install
    - npm run build
  only:
    - master
  artifacts:
    paths:
      - dist/

deploy:
  stage: deploy
  image: microsoft/azure-cli
  dependencies:
    - build
  script:
    - az storage blob delete-batch -s "\$web" --connection-string $AZ_STORAGE_CONNECTION_STRING
    - az storage blob upload-batch -d "\$web" -s dist --connection-string $AZ_STORAGE_CONNECTION_STRING
  only:
    - master

Hope it's useful!

Gitlab CI script to deploy a Azure Function

Alan Castro — Fri, 24 Apr 2020 00:52:58 +0000

Here is the .gitlab-ci.yml that I use to deploy my .NET Core 3.1 azure functions in Gitlab CI/CD.

Variables that I use in the scripts:

$APPLICATION_ID
$APPLICATION_SECRET
$TENANT_ID
$FUNCTION_APP your function app's name in azure

stages:
  - deploy

deploy:
  stage: deploy
  image: mcr.microsoft.com/dotnet/core/sdk:3.1
  script:
    - curl -sL https://aka.ms/InstallAzureCLIDeb | bash
    - apt-get install curl && curl -sL https://deb.nodesource.com/setup_12.x | bash -
    - apt-get install nodejs
    - npm install -g azure-functions-core-tools@3 --unsafe-perm true
    - az login --service-principal -u $APPLICATION_ID -p $APPLICATION_SECRET --tenant $TENANT_ID
    - func azure functionapp publish $FUNCTION_APP --csharp
  only:
    - master

Hope it's useful

DEV Community: Alan Castro

Setup Vue3 with Ant Design

Create a project with vue-cli

Install Vue Ant Design and some dependencies

Create a vue.config.js file

Edit the babel.config.js file

Eslint for Vue3 projects in VSCode

VsCode

Vue3 Project

Eslint for Vue projects in VSCode

Gitlab CI script to deploy a .NET core Azure Webapp

Github action to publish a Nuget package to nuget.org

Gitlab CI script to deploy a Azure Static Website

Gitlab CI script to deploy a Azure Function

Create a `vue.config.js` file

Edit the `babel.config.js` file