Set subdomain for project and set URL for each deployment (#52)

* Display current deployment info in overview tab

* Add assign domain dialog box in deployments

* Add empty link for project settings in assign domain dialog box

* Use react router dom link

* Add sub domain to project entity

* Add deployment url with custom generated string

* Set nano id to deployment id

* Add sub domain while creating new project

* Use same id as in url

* Update readme steps for production build

* Update README

---------

Co-authored-by: neeraj <neeraj.rtly@gmail.com>

packages/backend/package.json

@@ -15,6 +15,8 @@
     "express": "^4.18.2",
     "fs-extra": "^11.2.0",
     "graphql": "^16.8.1",
+    "nanoid": "3",
+    "nanoid-dictionary": "^5.0.0-beta.1",
     "reflect-metadata": "^0.2.1",
     "toml": "^3.0.0",
     "ts-node": "^10.9.2",

packages/backend/src/constants.ts

@@ -4,3 +4,5 @@ export const DEFAULT_GQL_PATH = '/graphql';
 
 // Note: temporary hardcoded user, later to be derived from auth token
 export const USER_ID = 1;
+
+export const PROJECT_DOMAIN = 'snowball.xyz';

packages/backend/src/database.ts

@@ -2,6 +2,8 @@ import { DataSource, DeepPartial } from 'typeorm';
 import path from 'path';
 import debug from 'debug';
 import assert from 'assert';
+import { customAlphabet } from 'nanoid';
+import { lowercase, numbers } from 'nanoid-dictionary';
 
 import { DatabaseConfig } from './config';
 import { User } from './entity/User';
@@ -11,9 +13,12 @@ import { Deployment, Environment } from './entity/Deployment';
 import { Permission, ProjectMember } from './entity/ProjectMember';
 import { EnvironmentVariable } from './entity/EnvironmentVariable';
 import { Domain } from './entity/Domain';
+import { PROJECT_DOMAIN } from './constants';
 
 const log = debug('snowball:database');
 
+const nanoid = customAlphabet(lowercase + numbers, 8);
+
 // TODO: Fix order of methods
 export class Database {
   private dataSource: DataSource;
@@ -90,6 +95,7 @@ export class Database {
     const project = await projectRepository
       .createQueryBuilder('project')
       .leftJoinAndSelect('project.deployments', 'deployments', 'deployments.isCurrent = true')
+      .leftJoinAndSelect('deployments.createdBy', 'user')
       .leftJoinAndSelect('deployments.domain', 'domain')
       .leftJoinAndSelect('project.owner', 'owner')
       .leftJoinAndSelect('project.organization', 'organization')
@@ -314,7 +320,7 @@ export class Database {
 
   async updateDeploymentById (deploymentId: string, updates: DeepPartial<Deployment>): Promise<boolean> {
     const deploymentRepository = this.dataSource.getRepository(Deployment);
-    const updateResult = await deploymentRepository.update({ id: Number(deploymentId) }, updates);
+    const updateResult = await deploymentRepository.update({ id: deploymentId }, updates);
 
     if (updateResult.affected) {
       return updateResult.affected > 0;
@@ -341,6 +347,8 @@ export class Database {
       id: Number(projectDetails.organizationId)
     });
 
+    newProject.subDomain = `${newProject.name}.${PROJECT_DOMAIN}`;
+
     return projectRepository.save(newProject);
   }
 
@@ -364,14 +372,14 @@ export class Database {
         createdBy: true
       },
       where: {
-        id: Number(deploymentId)
+        id: deploymentId
       }
     });
 
     if (deployment === null) {
       throw new Error('Deployment not found');
     }
-    const { id, createdAt, updatedAt, ...updatedDeployment } = deployment;
+    const { createdAt, updatedAt, ...updatedDeployment } = deployment;
 
     if (updatedDeployment.environment === Environment.Production) {
       // TODO: Put isCurrent field in project
@@ -381,7 +389,10 @@ export class Database {
       });
     }
 
-    await deploymentRepository.update({ id: Number(deploymentId) }, { domain: null, isCurrent: false });
+    await deploymentRepository.update({ id: deploymentId }, { domain: null, isCurrent: false });
+
+    updatedDeployment.id = nanoid();
+    updatedDeployment.url = `${updatedDeployment.id}-${updatedDeployment.project.subDomain}`;
 
     return deploymentRepository.save(updatedDeployment);
   }
@@ -442,7 +453,7 @@ export class Database {
 
     const oldCurrentDeploymentUpdate = await deploymentRepository.update({ project: { id: projectId }, isCurrent: true }, { isCurrent: false, domain: null });
 
-    const newCurrentDeploymentUpdate = await deploymentRepository.update({ id: Number(deploymentId) }, { isCurrent: true, domain: oldCurrentDeployment?.domain });
+    const newCurrentDeploymentUpdate = await deploymentRepository.update({ id: deploymentId }, { isCurrent: true, domain: oldCurrentDeployment?.domain });
 
     if (oldCurrentDeploymentUpdate.affected && newCurrentDeploymentUpdate.affected) {
       return oldCurrentDeploymentUpdate.affected > 0 && newCurrentDeploymentUpdate.affected > 0;

packages/backend/src/entity/Deployment.ts

@@ -1,6 +1,6 @@
 import {
   Entity,
-  PrimaryGeneratedColumn,
+  PrimaryColumn,
   Column,
   CreateDateColumn,
   UpdateDateColumn,
@@ -27,8 +27,9 @@ enum Status {
 
 @Entity()
 export class Deployment {
-  @PrimaryGeneratedColumn()
-    id!: number;
+  // TODO: set custom generated id
+  @PrimaryColumn('varchar')
+    id!: string;
 
   @ManyToOne(() => Project, { onDelete: 'CASCADE' })
   @JoinColumn({ name: 'projectId' })
@@ -47,6 +48,9 @@ export class Deployment {
   @Column('varchar')
     title!: string;
 
+  @Column('varchar')
+    url!: string;
+
   @Column({
     enum: Environment
   })

packages/backend/src/entity/Project.ts

@@ -57,6 +57,9 @@ export class Project {
   @Column('varchar')
     icon!: string;
 
+  @Column('varchar')
+    subDomain!: string;
+
   @CreateDateColumn()
     createdAt!: Date;
 

packages/backend/src/schema.gql

@@ -72,6 +72,7 @@ type Project {
   updatedAt: String!
   organization: Organization!
   icon: String
+  subDomain: String
 }
 
 type ProjectMember {
@@ -89,6 +90,7 @@ type Deployment {
   branch: String!
   commitHash: String!
   title: String!
+  url: String!
   environment: Environment!
   isCurrent: Boolean!
   status: DeploymentStatus!

packages/backend/src/utils.ts

@@ -52,6 +52,7 @@ export const deploymentToGqlType = (dbDeployment: Deployment): any => {
     branch: dbDeployment.branch,
     commitHash: dbDeployment.commitHash,
     title: dbDeployment.title,
+    url: dbDeployment.url,
     environment: dbDeployment.environment,
     isCurrent: dbDeployment.isCurrent,
     status: dbDeployment.status,

packages/backend/test/fixtures/deployments.json

@@ -3,110 +3,130 @@
     "projectIndex": 0,
     "domainIndex":0,
     "createdByIndex": 0,
+    "id":"ffhae3zq",
     "title": "nextjs-boilerplate-1",
     "status": "Building",
     "environment": "Production",
     "isCurrent": true,
     "branch": "main",
-    "commitHash": "testXyz"
+    "commitHash": "testXyz",
+    "url": "testProject-ffhae3zq.testProject.snowball.xyz"
   },
   {
     "projectIndex": 0,
     "domainIndex":1,
     "createdByIndex": 0,
+    "id":"vehagei8",
     "title": "nextjs-boilerplate-2",
     "status": "Ready",
     "environment": "Preview",
     "isCurrent": false,
     "branch": "test",
-    "commitHash": "testXyz"
+    "commitHash": "testXyz",
+    "url": "testProject-vehagei8.testProject.snowball.xyz"
   },
   {
     "projectIndex": 0,
     "domainIndex":2,
     "createdByIndex": 0,
+    "id":"qmgekyte",
     "title": "nextjs-boilerplate-3",
     "status": "Error",
     "environment": "Development",
     "isCurrent": false,
     "branch": "test",
-    "commitHash": "testXyz"
+    "commitHash": "testXyz",
+    "url": "testProject-qmgekyte.testProject.snowball.xyz"
   },
   {
     "projectIndex": 0,
     "domainIndex": null,
     "createdByIndex": 0,
+    "id":"f8wsyim6",
     "title": "nextjs-boilerplate-4",
     "status": "Ready",
     "environment": "Production",
     "isCurrent": false,
     "branch": "prod",
-    "commitHash": "testXyz"
+    "commitHash": "testXyz",
+    "url": "testProject-f8wsyim6.testProject.snowball.xyz"
   },
   {
     "projectIndex": 1,
     "domainIndex":3,
     "createdByIndex": 1,
+    "id":"eO8cckxk",
     "title": "nextjs-boilerplate-1",
     "status": "Building",
     "environment": "Production",
     "isCurrent": true,
     "branch": "main",
-    "commitHash": "testXyz"
+    "commitHash": "testXyz",
+    "url": "testProject-2-eO8cckxk.testProject-2.snowball.xyz"
   },
   {
     "projectIndex": 1,
     "domainIndex":4,
     "createdByIndex": 1,
+    "id":"yaq0t5yw",
     "title": "nextjs-boilerplate-2",
     "status": "Ready",
     "environment": "Preview",
     "isCurrent": false,
     "branch": "test",
-    "commitHash": "testXyz"
+    "commitHash": "testXyz",
+    "url": "testProject-2-yaq0t5yw.testProject-2.snowball.xyz"
   },
   {
     "projectIndex": 1,
     "domainIndex":5,
     "createdByIndex": 1,
+    "id":"hwwr6sbx",
     "title": "nextjs-boilerplate-3",
     "status": "Error",
     "environment": "Development",
     "isCurrent": false,
     "branch": "test",
-    "commitHash": "testXyz"
+    "commitHash": "testXyz",
+    "url": "testProject-2-hwwr6sbx.testProject-2.snowball.xyz"
   },
   {
     "projectIndex": 2,
     "domainIndex":6,
     "createdByIndex": 2,
+    "id":"ndxje48a",
     "title": "nextjs-boilerplate-1",
     "status": "Building",
     "environment": "Production",
     "isCurrent": true,
     "branch": "main",
-    "commitHash": "testXyz"
+    "commitHash": "testXyz",
+    "url": "iglootools-ndxje48a.iglootools.snowball.xyz"
   },
   {
     "projectIndex": 2,
     "domainIndex":7,
     "createdByIndex": 2,
+    "id":"gtgpgvei",
     "title": "nextjs-boilerplate-2",
     "status": "Ready",
     "environment": "Preview",
     "isCurrent": false,
     "branch": "test",
-    "commitHash": "testXyz"
+    "commitHash": "testXyz",
+    "url": "iglootools-gtgpgvei.iglootools.snowball.xyz"
   },
   {
     "projectIndex": 2,
     "domainIndex":8,
     "createdByIndex": 2,
+    "id":"b4bpthjr",
     "title": "nextjs-boilerplate-3",
     "status": "Error",
     "environment": "Development",
     "isCurrent": false,
     "branch": "test",
-    "commitHash": "testXyz"
+    "commitHash": "testXyz",
+    "url": "iglootools-b4bpthjr.iglootools.snowball.xyz"
   }
 ]

packages/backend/test/fixtures/projects.json

@@ -9,7 +9,8 @@
     "template": "test",
     "framework": "test",
     "webhooks": [],
-    "icon": ""
+    "icon": "",
+    "subDomain": "testProject.snowball.xyz"
   },
   {
     "ownerIndex": 1,
@@ -21,7 +22,8 @@
     "template": "test-2",
     "framework": "test-2",
     "webhooks": [],
-    "icon": ""
+    "icon": "",
+    "subDomain": "testProject-2.snowball.xyz"
   },
   {
     "ownerIndex": 2,
@@ -33,7 +35,8 @@
     "template": "test-3",
     "framework": "test-3",
     "webhooks": [],
-    "icon": ""
+    "icon": "",
+    "subDomain": "iglootools.snowball.xyz"
   },
   {
     "ownerIndex": 1,
@@ -45,7 +48,8 @@
     "template": "test-4",
     "framework": "test-4",
     "webhooks": [],
-    "icon": ""
+    "icon": "",
+    "subDomain": "iglootools-2.snowball.xyz"
   },
   {
     "ownerIndex": 0,
@@ -57,6 +61,7 @@
     "template": "test-5",
     "framework": "test-5",
     "webhooks": [],
-    "icon": ""
+    "icon": "",
+    "subDomain": "snowball-2.snowball.xyz"
   }
 ]

packages/backend/test/initialize-db.ts

@@ -55,8 +55,6 @@ const loadAndSaveData = async <Entity extends ObjectLiteral>(entityType: EntityT
 };
 
 const generateTestData = async (dataSource: DataSource) => {
-  const domainRepository = await dataSource.getRepository(Domain);
-
   const savedUsers = await loadAndSaveData(User, dataSource, path.resolve(__dirname, USER_DATA_PATH));
   const savedOrgs = await loadAndSaveData(Organization, dataSource, path.resolve(__dirname, ORGANIZATION_DATA_PATH));
 
@@ -67,6 +65,8 @@ const generateTestData = async (dataSource: DataSource) => {
 
   const savedProjects = await loadAndSaveData(Project, dataSource, path.resolve(__dirname, PROJECT_DATA_PATH), projectRelations);
 
+  const domainRepository = dataSource.getRepository(Domain);
+
   const domainPrimaryRelations = {
     project: savedProjects
   };