DEV Community: KiritchoukC

How to get rid of the `new` C# keyword

KiritchoukC — Mon, 26 Oct 2020 13:14:19 +0000

Why would I do that?

I recently started a new personal project following the DDD approach.

If you strictly follow the DDD rules, you need to create a new class for each property.
And initializing those classes can quickly become a burden.

Example:

var person = new Person(
  new PersonId(1), 
  new PersonFirstName("Clément"), 
  new PersonLastName("Kiritchouk"),
  new PersonBirthYear(1994))

There's a way to save a few keystrokes, increase readability and make chaining easier.

Static constructors obviously

Disclaimer: This is my way of doing this, feel free to adapt or improvre

First, Create a static partial Constructors class like this:

// Constructors.cs
public static partial class Constructors
{

}

I use this class for System classes (DateTime, List, ...)
I'll add some interesting ones later on...

Then create another static partial Constructors class where I put all my Person constructors.

// Constructors.Person.cs
public static partial class Constructors
{
  public static PersonId PersonId(int id) => new PersonId(id);
  public static PersonFirstName PersonFirstName(string firstName) => new PersonFirstName(firstName);
  public static PersonLastName PersonLastName(string lastName) => new PersonLastName(lastName);
  public static PersonBirthYear PersonBirthYear(int year) => new PersonBirthYear(year);

  public static Person Person(PersonId id, PersonFirstName firstName, PersonLastName lastName, PersonBirthYear year)
    => new Person(PersonId(id), PersonFirstName(firstName), PersonLastName(lastName), PersonBirthYear(year));
}

And Done!

How to use it

It's refactoring time. Now we can initialize a Person class like this.
Actually, it's easy... Just drop the new keyword.

Don't forget the static using!

using static MyAwesomeProject.Constructors

var person = Person(
  PersonId(1), 
  PersonFirstName("Clément"), 
  PersonLastName("Kiritchouk"),
  PersonBirthYear(1994))

Bonus

Ok, maybe you're not convinced yet.
Let's create a list of persons

var persons = new List<Person>{
  person1,
  person2,
  person3
};

Why not create a constructor for initializing List?
Update your Constructors.cs file like this:

// Constructors.cs
public static partial class Constructors
{
  public static List<T> List<T>(params T[] items) => new List<T>(items);
}

Now you can do

var persons = List(person1,person2,person3);

You don't have to specify the type anymore because the type system infers it.

Cons

Well, there are some cons using this technique.

You have to create a constructor for every type while new is built-in.
It's unusual, other developers might be confused looking at your code.

Anyway, I like it and I had to share it with you. Please tell me what are your thoughts on this. 😏

Deploy nuxt on Firebase

KiritchoukC — Thu, 10 Oct 2019 06:42:57 +0000

Introduction

I already have a working website using Nuxt and SSR so why would I move everything to Firebase?

SSR stands for server-side rendering, you can find more information here Understanding Server Side Rendering

There are so many reasons!
To list a few...

Price

Current solution: I have to pay every month for a private server

Firebase: Well, for my needs, it's free.

Configuration

Current solution: I have to configure everything myself. Docker containers, https, Nginx reverse proxy, ...

Firebase: Everything you need is already done. Logging, analytics, https, custom domain, ...

Update

Current solution: A change in my website? here are the steps

Push changes to git
Hook on docker hub get triggered and build the container (10-15 min)
Connect on the server (1 min)
Pull the latest container version (1 min)
Find the right folder where the docker-compose.yaml is and update it (2 min)

I know I could've automated things a bit more but still...

Firebase: Steps

type firebase deploy in terminal (1-2 min)
done... changes are live

You're hooked? Obviously, you are. Let me help you get it running.

Setup the Firebase project

Create your Firebase account

You want to use Firebase, don't you? Well, you need to create your account first.

Done? We can now create a new project.

Create a Firebase project

Let's head over to Firebase console and click on Add project.

Set your project name.

Click on Continue.

Uncheck Google analytics for now and click on Add Firebase.

Wait for the project initialization and click on continue.

Install Firebase CLI

Now with the help of NPM, we will install the firebase tools on our computer.

Simply enter this command on your favorite terminal

npm i -g firebase-tools

Afterward, you should be able to login with this command

firebase login

A browser window will pop up and allow you to login with your Google account.

Alright, the initial Firebase setup is done...

Before adding firebase to our project, we need to update our application project structure...

Project Structure

I'm supposing you already have a nuxt project.

If not, head over to the Nuxt website to create a new app with express for the server side.

Our project will be decomposed into 3 directories

src: This is where our development files sit
functions: This is where our SSR function will be
public: This directory will hold the files that will be served by Firebase hosting

We won't take care of the functions and public directories. It will be generated automatically.

So create the src directory and move all the nuxt directories into it.
Only the directories, leave the configuration files at the root

You should have something like the structure below

The app is broken now! Let's fix it by updating the nuxt config...

Update Nuxt config

In nuxt.config.js, add the following lines in module.exports

module.exports = {
[...]
  srcDir: 'src',
  buildDir: 'functions/.nuxt',
[...]
}

And in the build object, set extractCss to true

module.exports = {
[...]
  build: {
    extractCSS: true,
    [...]
  }
[...]
}

It is still broken because npm script cannot find our entry file server/index.js

Let's update our package.json

Replace dev and start scripts with these.

I just prefixed the path with "src"

    "dev": "cross-env NODE_ENV=development nodemon src/server/index.js --watch server",
    "start": "cross-env NODE_ENV=production node src/server/index.js",

You should now be able to start your application by typing yarn dev or npm run dev

Notice that the functions directory has been created with the nuxt files in it.

Add Firebase to the project

Like Git or NPM, Firebase CLI has its init command to get everything you need quickly.

Launch the command

firebase init

The CLI will ask you some questions and here are the answers:

? Are you ready to proceed?
> Yes

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices.
> Functions: Configure and deploy Cloud Functions,
> Hosting: Configure and deploy Firebase Hosting sites

? Please select an option:
> Use an existing project
(Select the project we created earlier)

? What language would you like to use to write Cloud Functions? (Use arrow keys)
> JavaScript

? Do you want to use ESLint to catch probable bugs and enforce style? (y/N)
> y

? Do you want to install dependencies with npm now? (Y/n)
> Y

? What do you want to use as your public directory? (public)
> public

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
> N

A wild public directory appeared! Our project structure is now complete.

We can now edit our function...

Implement SSR function

Open the functions/index.js file, remove everything and paste the code below

const functions = require('firebase-functions')
const { Nuxt } = require('nuxt')
const express = require('express')

const app = express()

const config = {
  dev: false
}

const nuxt = new Nuxt(config)

let isReady = false
const readyPromise = nuxt
  .ready()
  .then(() => {
    isReady = true
  })
  .catch(() => {
    process.exit(1)
  })

async function handleRequest(req, res) {
  if (!isReady) {
    await readyPromise
  }
  res.set('Cache-Control', 'public, max-age=1, s-maxage=1')
  await nuxt.render(req, res)
}

app.get('*', handleRequest)
app.use(handleRequest)
exports.nuxtssr = functions.https.onRequest(app)

To sum it up, on each reqest, the function will pass the response and request object to the nuxt.render(req, res) function which will handle the app rendering.

Updating the function package.json

The function will need the same libraries as your nuxt app. Copy the package.json dependencies to the functions/package.json dependencies

At the time of writing this article, firebase supports node version 10. In functions/package.json you can update the node engine version from 8 to 10.

Here's an example of the functions/package.json of a blank nuxt project

{
  "name": "functions",
  "description": "Cloud Functions for Firebase",
  "scripts": {
    "lint": "eslint .",
    "serve": "firebase serve --only functions",
    "shell": "firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "engines": {
    "node": "10"
  },
  "dependencies": {
    "firebase-admin": "^8.0.0",
    "firebase-functions": "^3.1.0",
    "cross-env": "^5.2.0",
    "nuxt": "^2.3.4",
    "express": "^4.16.4",
    "vuetify": "^1.3.14",
    "vuetify-loader": "^1.0.8",
    "@nuxtjs/pwa": "^2.6.0"
  },
  "devDependencies": {
    "eslint": "^5.12.0",
    "eslint-plugin-promise": "^4.0.1",
    "firebase-functions-test": "^0.1.6"
  },
  "private": true
}

Updating firebase.json

Replace the whole file with

{
  "hosting": {
    "public": "public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "function": "nuxtssr"
      }
    ]
  }
}

It will redirect all the requests to the function we've made

Using a node version above 10 can cause some issues...
You can use nvm or directly install NodeJs 10 on your computer.

Automate all the things

Static files

We learned earlier that static files will be held by the public directory. But what are the nuxt static files?

There will be the nuxt app itself, the result of the nuxt build command.

And the static files (.jpg, .ico, .png, ...) stored into the src/static directory

So we'll need to move them both in the public directory, let's see how...

Step by step

Here is what we're going to automate with the scripts

Clean the directories in case there's already something in it
Build the nuxt app
The built app is now in the functions directory. Copy the content of the functions/.nuxt/dist/ directory to the public/_nuxt directory
Copy the static files from the src/static/ directory to the root of the public directory
Install the functions dependencies with yarn

The public folder should look something like this

These scripts will do all that for us. So kind of them.
Add these to the main package.json file.

Windows version

scripts: {
    "build": "nuxt build",
    "build:firebase": "yarn clean && yarn build && yarn copy && cd \"functions\" && yarn",

    "clean": "yarn clean:public && yarn clean:functions && yarn clean:static",
    "clean:functions": "rimraf \"functions/node_modules\" && rimraf \"functions/.nuxt\"",
    "clean:public": "rimraf \"public/**/*.*!(md)\" && rimraf \"public/_nuxt\"",
    "clean:static": "rimraf \"src/static/sw.js\"",

    "copy": "yarn copy:nuxt && yarn copy:static",
    "copy:nuxt": "xcopy \"functions\\.nuxt\\dist\\*\" \"public\\_nuxt\\\" /E /Y",
    "copy:static": "xcopy \"src\\static\\*\" \"public\\\" /E /Y",

    "start:firebase": "firebase serve --only functions,hosting",

    "deploy": "firebase deploy --only functions,hosting"
}

MacOs version

Thanks to Michael Messerli for his MacOs scripts version

 "scripts": {
    // ...
    "build:firebase": "yarn clean && yarn build && yarn copy && cd functions && yarn",

    "clean": "yarn clean:public && yarn clean:functions && yarn clean:static",
    "clean:functions": "rimraf \"functions/node_modules\" && rimraf \"functions/.nuxt\"",
    "clean:public": "rimraf \"public/**/*.*!(md)\" && rimraf \"public/_nuxt\"",
    "clean:static": "rimraf \"src/static/sw.js\"",

    "copy": "yarn copy:nuxt && yarn copy:static",
    "copy:nuxt": "mkdir public/_nuxt && cp -r functions/.nuxt/dist/* public/_nuxt",
    "copy:static": "cp -r src/static/* public",

    "start:firebase": "firebase serve --only functions,hosting",

    "deploy": "firebase deploy --only functions,hosting",

    // ...
  }

Still having issues? James Block comment might help you https://dev.to/meanjames/comment/leln

Grand finale

You can now launch these commands to start your application:

yarn build:firebase
yarn start:firebase

And to deploy:

yarn build:firebase
yarn deploy

Tho, for development, you can still use

yarn dev

Conclusion

You now got a server-rendered nuxt application on firebase... Easy huh?

For this article, I did an example with a blank nuxt app. Here's the final project nuxt-on-firebase example repository.

Did you spot an error? Shame on me! You can correct it by doing a pull request right here nuxt-on-firebase repository