alic-xc

Django Deployment to Ubuntu 18.04

In this guide I will go through all the steps to create a VPS, secure it and deploy a Django application. This is a summarized document from this digital ocean doc

Any commands with "$" at the beginning run on your local machine and any "#" run when logged into the server

Create A Digital Ocean Droplet

Use this link and get $10 free. Just select the $5 plan unless this a production app.

alic-xc

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
// This variable handles request header informations
const weatherAPIHeader = { "content-type": "application/json" };
// Base URL
const baseUrl = "https://weather.com";
const createRequest = (url) => ({ url, headers: weatherAPIHeader });
export const weatherAPI = createApi({
 // An API Slice to connect to a particular service
 reducerPath: "weatherAPI",
 baseQuery: fetchBaseQuery({ baseUrl }),

alic-xc

import { configureStore } from "@reduxjs/toolkit";
import { weatherAPI } from "../services/weatherAPI";
 
export default configureStore({
 reducer: {
   [weatherAPI.reducerPath]: weatherAPI.reducer,
 },
});

alic-xc

import React from "react";
import {
 useGetCurrentWeatherQuery,
 useGetWeatherForecastRangeQuery,
 useSendWeatherDatautation,
} from "../services/weatherAPI";
 
const Weather = () => {
 const [date, setDate] = useState({ fromDate: "", toDate: "" });
 const { data: currentWeather, isFetching } = useGetCurrentWeatherQuery();

alic-xc

npm install -g typescript

alic-xc

mkdir typescript-tutorial // Create our project directory

cd typescript-tutorial // Access the directory

npm create vite@latest // Initialize our project using vite

alic-xc

// type . to use the project root name as our project name
 Project name: … .
 
 // Select Vanilla 
✔ Select a framework: › Vanilla

// Select Typescript
✔ Select a variant: › TypeScript

alic-xc

let currencyFormat:string = "NGN" // 

let currencyAmount:number = 450

let isCompleted:boolean = true

let transactionHistory:number[] = [1, 2, 3, 4, 5, 6] 

let username:any = "1234" 

alic-xc

let username = "olamilekan"
const isCompleted = true
.....
.....
.....
.....
username = 110034564 //Variable can be updated since we are not using the const keyword to declare
isCompleted = "not ok" // Raise error because `isCompleted` is a constant

alic-xc

name: UI Deployment

# In this section, two enivorment variables are created which will be use in the section of the configuration
env:
  DEPLOY_PACKAGE_NAME_FILE: "${{ github.sha }}.zip"
  DEPLOY_PACKAGE_NAME: "${{ github.sha }}"

# Controls when the workflow will run
on:
  # Triggers the workflow on push or pull request events but only for the production branch