Setup CI/CD for API and Client app with Azure pipelines (#51)

- Added YAML pipeline config for client app
- Pipeline config for API is done in Azure DevOps
- Added environment variables needed for deployment

.azure/client-build-pipeline.yml

@@ -0,0 +1,64 @@
+# This script will run the linter, run tests and create a production build.
+# It then zips the build folder deploys it to Netlify
+
+variables:
+  clientFolder: client
+
+trigger:
+  branches:
+    include:
+      - 'master' 
+
+# Disable for PRs
+pr:
+  branches:
+    exclude:
+      - '*'
+
+jobs:
+  - job: client_testing
+    displayName: Client App Production Build
+    pool:
+      vmImage: 'ubuntu-latest'
+    steps:
+      - task: NodeTool@0
+        inputs:
+          versionSpec: '10.x'
+        displayName: 'Install Node.js'
+
+      - script: |
+          yarn install
+          yarn add -D jest-junit
+        workingDirectory: $(clientFolder)
+        displayName: 'Install dependencies'
+      
+      - script : |
+          yarn lint
+          yarn lint:style
+        workingDirectory: $(clientFolder)
+        displayName: 'Lint code'
+
+      - script: CI=true yarn test --reporters=default --reporters=jest-junit --coverage --coverageReporters=cobertura
+        workingDirectory: $(clientFolder)
+        displayName: 'Run tests'
+
+      - script: yarn build
+        workingDirectory: $(clientFolder)
+        displayName: 'Build project'
+
+      - task: ArchiveFiles@2
+        inputs:
+          rootFolderOrFile: '$(clientFolder)/build'
+          archiveType: 'zip'
+          archiveFile: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
+          replaceExistingArchive: true
+        displayName: 'Archive files'
+
+      - script:  >-
+            curl
+            -H 'Authorization: Bearer $(netlifyAccessToken)' 
+            -H 'Content-Type: application/zip'
+            --data-binary '@$(Build.BuildId).zip'
+            https://api.netlify.com/api/v1/sites/$(netlifySiteId)/deploys
+        workingDirectory: '$(Build.ArtifactStagingDirectory)'
+        displayName: 'Upload to Netlify'

client/.env.development

@@ -0,0 +1,2 @@
+SASS_PATH=src
+REACT_APP_API_URL=http://localhost:5000

client/.env.production

@@ -0,0 +1,2 @@
+SASS_PATH=src
+REACT_APP_API_URL=https://poule-poule-api.azurewebsites.net

client/.gitignore

@@ -23,4 +23,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # VSCode
-.vscode/
+.vscode/
+
+# Local Netlify folder
+.netlify

client/public/_redirects

@@ -0,0 +1 @@
+/*    /index.html   200

client/src/App.tsx

@@ -8,7 +8,7 @@ import Lobby from './pages/Lobby'
 import axios from 'axios'
 
 const App: React.FC = () => {
-  axios.defaults.baseURL = 'http://localhost:5000'
+  axios.defaults.baseURL = process.env.REACT_APP_API_URL
 
   return (
     <BaseLayout>

client/src/pages/Game.tsx

@@ -14,7 +14,7 @@ const Game: FC<GameProps> = (props: GameProps) => {
 
   useEffect(() => {
     const connection = new SignalR.HubConnectionBuilder()
-      .withUrl('https://localhost:5001/gameHub')
+      .withUrl(process.env.REACT_APP_API_URL || '')
       .withAutomaticReconnect()
       .configureLogging(SignalR.LogLevel.Debug)
       .build()

client/src/utils/signalrConnector.ts

@@ -1,14 +1,12 @@
 import * as SignalR from '@microsoft/signalr'
 import { HubConnection } from '@microsoft/signalr'
 
-const API_URL: string = 'http://localhost:5000'
-
 const connectToGameHub = (
   gameId: number,
   onStart: any = null
 ): HubConnection => {
   const connection = new SignalR.HubConnectionBuilder()
-    .withUrl(`${API_URL}/gameHub?gameId=${gameId}`)
+    .withUrl(`${process.env.REACT_APP_API_URL}/gameHub?gameId=${gameId}`)
     .withAutomaticReconnect()
     .configureLogging(SignalR.LogLevel.Debug)
     .build()

server/Startup.cs

@@ -19,28 +19,30 @@ namespace server
 {
   public class Startup
   {
+    private IConfiguration _config { get; }
+
     public Startup(IConfiguration configuration)
     {
-      Configuration = configuration;
+      _config = configuration;
     }
 
-    public IConfiguration Configuration { get; }
-
     public void ConfigureServices(IServiceCollection services)
     {
       services.AddDbContext<PouleContext>(options =>
-          options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")
-      ));
+          options.UseSqlServer(_config.GetConnectionString("DefaultConnection"))
+      );
       services.AddTransient<IGameService, GameService>();
       services.AddControllers();
 
       services.AddSignalR(options => options.EnableDetailedErrors = true);
 
+      var allowedOrigins = _config["AllowedOrigins"].Split(',');
+
       services.AddCors(options =>
       {
         options.AddPolicy("default", policy =>
         {
-          policy.WithOrigins("http://localhost:3000")
+          policy.WithOrigins(allowedOrigins)
                 .AllowAnyHeader()
                 .AllowAnyMethod()
                 .AllowCredentials();

server/appsettings.Development.json

@@ -2,6 +2,7 @@
   "ConnectionStrings": {
     "DefaultConnection": "Server=(localdb)\\mssqllocaldb; Database=PoulePoule; Trusted_Connection=True; MultipleActiveResultSets=true"
   },
+  "AllowedOrigins": "http://localhost:3000",
   "Logging": {
     "LogLevel": {
       "Default": "Debug",

server/server.csproj

@@ -5,7 +5,9 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <None Update="random-names.txt" CopyToOutputDirectory="PreserveNewest" />
+    <Content Update="Data/video-game-characters.txt">
+    <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+  </Content>
   </ItemGroup>
 
   <ItemGroup>