.NetCore MVC project with Vue components via Vite

Omar Ponce — Thu, 02 Mar 2023 20:37:57 +0000

Currently just installing vuejs with libman doesn’t cut it. Soo, I have taken this approach, that I happen to find a little bit more elegant.

Create the .Netcore Project.

dotnet new mvc -o ProjectName

Build and run the project.

dotnet build &&  dotnet run

Once you have your .netcore project running we are going to create the Vite project inside the .net one.

npm create vite@latest

We simply run the wizzard and select vue and js for the current tutorial.
cd into your vue project, I happened to call mine vue for simplicity purposes.
If you run npm run dev you happen to have your vite project inside a .netcore one. That's good but we want to tinker this a little more.
We are going to configure our vite.config.js in order to have two things: A) server port and B) the output dir will point to our wwwroot folder.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  // We define the port
  server: {
    port: 5000
  },
  // And the build target
  build:{
    outDir:"../wwwroot/client"
  }
})

We are going to tinker this a little bit. We can delete lots of stuff that we are not going to use but for now.
We are going to open the main.js file in the src folder and we are going to use the esm-bundler.

import { createApp } from 'vue/dist/vue.esm-bundler'

createApp().mount('#app')

After this we go back to our .netcore project. And in our _Layout.cshtml file we do the following.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - DotVue</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/DotVue.styles.css" asp-append-version="true" />
    @* We add the view Libs *@
    @*Development in order to see the live changes *@
    <script type="module" src="http://localhost:5000/src/main.js" defer></script>
    @*Prod we get the file from what vite compiles.*@
    @* <script type="module" src="~/client/assets/index.js" defer></script> *@
</head>
<body>
    <div id="app" >
      <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container-fluid">
                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">DotVue</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
      </header>
      <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
      </div>

    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2023 - DotVue - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

Lets test our app. cd into the vite app and run npm run dev. Start the dotnet app in the root folder of the project. dotnet run

Voila! Now if we open the developer tools we are able to see the Vuejs Devtools!
But Lets create a component!
We create a Vue component in the Components folder.
Add the component in the main.js file
Add the component to one of the asp files.
Now we can see the data that was declared in the vue component.

Example Repo:
repo

Install Microsoft Sql Server php drivers in Laravel Sail

Omar Ponce — Fri, 24 Jun 2022 17:22:11 +0000

If you ever have a Laravel Sail container that needs to connect to a mssqlsrv database, this is how you can install the drivers.

After installing Laravel Sail and running sail:publish, you need to add this block after the RUN update-alternatives ...

#Add repository ODBC and Install the Microsoft ODBC driver for SQL Server
RUN curl https://packages.microsoft.com/keys/microsoft.asc | apt-key add - \
    && curl https://packages.microsoft.com/config/ubuntu/21.04/prod.list > /etc/apt/sources.list.d/mssql-release.list \
    && apt-get update \
    && apt-get install -y unixodbc-dev \
    && ACCEPT_EULA=Y apt-get install -y msodbcsql17 \
    && ACCEPT_EULA=Y apt-get install -y mssql-tools \
    && apt-get install -y gcc musl-dev make

# Install the PHP drivers for Microsoft SQL Server

RUN curl -O https://pear.php.net/go-pear.phar \
     && php go-pear.phar

RUN pecl channel-update pecl.php.net \
    && pecl install sqlsrv pdo_sqlsrv \
    && printf "; priority=20\nextension=sqlsrv.so\n" > /etc/php/8.0/mods-available/sqlsrv.ini \
    && printf "; priority=30\nextension=pdo_sqlsrv.so\n" > /etc/php/8.0/mods-available/pdo_sqlsrv.ini \
    && phpenmod -v 8.0 sqlsrv pdo_sqlsrv \
    && pecl clear-cache \
    && rm -rf /tmp/* /var/tmp/*

Now add your DB config to the .env Laravel file.

Laravel Prontoforms

Omar Ponce — Tue, 17 May 2022 19:48:51 +0000

The package

In my day-to-day job, we rely heavily on an external app called Pronto Forms, it is actually a very good app. However, I ended up creating a package for Laravel in order to send forms to this app.

The package can be located here. Any feedback is more than welcome.

Package

DEV Community: Omar Ponce

.NetCore MVC project with Vue components via Vite

Install Microsoft Sql Server php drivers in Laravel Sail

Laravel Prontoforms

The package