cityzen-docs/developers.html at master · codeforlansing/cityzen-docs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="CityZen volunteer software documentation">
    <meta name="author" content="Rick Mason">
    <meta name="generator" content="Jekyll v3.8.6">
    <title>Cityzen documentation</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/4.4/examples/dashboard/">

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <!-- Custom styles for this template -->
    <!-- Dashboard.css -->
    <link rel="stylesheet" href="./Media/dashboard.css">

    <!-- Favicons -->
    <!-- Need to create Cityzen favicons - Olde English C perhaps? -->

    <link rel="apple-touch-icon" href="./Media/favicons/apple-touch-icon.png" sizes="180x180">
    <link rel="icon" href="./Media/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
    <link rel="icon" href="./Media/favicons/favicon-16x16.png" sizes="16x16" type="image/png">

    <link rel="icon" href="./Media/favicons/android-chrome-192x192.png" sizes="192x192" type="image/png">
    <link rel="icon" href="./Media/favicons/android-chrome-512x512.png" sizes="512x512" type="image/png">
    <link rel="icon" href="./Media/favicons/mstile-150x150.png">
    <link rel="manifest" href="./Media/favicons/site.webmanifest.json">

    <link rel="mask-icon" href="./Media/favicons/safari-pinned-tab.svg" color="#563d7c">

    <link rel="icon" href="./media/favicons/favicon.ico">
    <meta name="msapplication-config" content="./Media/favicons/browserconfig.xml">

<meta name="theme-color" content="#563d7c">

  </head>
  <body>

    <nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
        <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="index.html">CityZen</a>
    </nav>

<div class="container-fluid"> <!-- Begin left hand menu -->
  <div class="row">
    <nav class="col-md-2 d-none d-md-block bg-light sidebar">
      <div class="sidebar-sticky">
        <ul class="nav flex-column">
          <li class="nav-item">
            <a class="nav-link active" href="index.html">
              <span data-feather="home"></span>
              Introduction <span class="sr-only">(current)</span>
            </a>
          </li>
          <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
            <span>Setup</span>
            <a class="d-flex align-items-center text-muted" href="#" aria-label="Setup">
              <span data-feather="plus-circle"></span>
            </a>
          </h6>
          <li class="nav-item">
            <a class="nav-link" href="setting-up-trello.html">
              <span data-feather="setup-trello"></span>
              Setting up Trello
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="setting-up-cityzen.html">
              <span data-feather="setup-cityzen"></span>
              Setting up CityZen
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="developers.html">
              <span data-feather="developers"></span>
              Developers
            </a>
          </li>
          <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
            <span>Meta</span>
            <a class="d-flex align-items-center text-muted" href="#" aria-label="Meta">
              <span data-feather="plus-circle"></span>
            </a>
          </h6>
          <li class="nav-item">
            <a class="nav-link" href="meet-the-team.html">
              <span data-feather="meet-the-team"></span>
              Meet the team
            </a>
          </li>

        </ul>


      </div>
    </nav> <!-- End left hand menu -->

    <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
      <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">Developers</h1>
      </div>

      <div class="col-md-9 text-justify align-top"> <!-- Main body of text -->
        The CityZen client is built using Vue.js.  The server backend is Node.js with a SQL Lite database.

        <p><strong>Tip</strong> CityZen requires a fairly recent version of both npm and Node.js.  To install both go here:
        <a href="https://www.npmjs.com/get-npm" target="_blank">Get NPM</a> <br/>
        For reference when these docs were written we were using version 12.18.1 of Node.js and version 6.14.5 of npm</p>
        <p></p>
        <h4>Install using NPM</h4>
        <p>
          The CityZen-Server project page on npm: <a href="https://www.npmjs.com/package/@codeforlansing/cityzen-server" target="_blank">CityZen-Server</a>

          <p>To install CityZen first create the directory cityzen-server.</p>

          <p class="bg-dark text-white w-50"><strong>md CityZen-Server</strong></p>


          <p>Then open a command prompt, navigate to the directory CityZen-Server and type npm init.</p>

          <p class="bg-dark text-white w-50"><strong>npm init</strong></p>

          <p>Then you have to answer a series of questions about the project.  Next to install the server you want type on the command line:</p>

          <p class="bg-dark text-white w-50"><strong>npm i @codeforlansing/cityzen-server</strong></p>
          <p>Or alternately you can install using npx:</p>
          <p class="bg-dark text-white w-50"><strong>npx @codeforlansing/cityzen-server</strong></p>

          <p>The CityZen-Client project page on npm: <a href="#">CityZen-Client</a></p>

          <p class="bg-dark text-white w-50"><strong>To be continued</strong></p>

          <p><strong>TIP</strong> If you need a local development web server CityZen recommends <a href="https://www.npmjs.com/package/http-server">http-server</a></p>

        </p>

          <h4>Install using GitHub</h4>
          <p>
            <p>The CityZen-Server project page on GitHub: <a href="https://github.com/codeforlansing/cityzen-server">CityZen-Server</a></p>
            <p>There are two different methods to install CityZen from GithHub</p>
            <p>The first method is to clone the project.  Note you need to have the GIT CLI installed to use this method.</p> <br/>

            <p>To install CityZen-Server go to the directory you want to use and type:</p>
             <p class="bg-dark text-white w-50"><strong>git clone https://github.com/codeforlansing/cityzen-server.git </strong></p>

             <p>Then go to the directory you chose and type:</p>

             <p class="bg-dark text-white w-50"><strong>npm install </strong></p>

             <p>To launch the server type:</p>

             <p class="bg-dark text-white w-50"><strong>npm start </strong></p>

             <style>hr {
              margin-top: 1rem;
              margin-bottom: 1rem;
              border: 20;
              border-top: 10px solid rgba(0, 0, 0, 0.1);
            }</style>

            <hr/>

            <p>The CityZen-Client page on Github: <a href="">CityZen-Client</a></p>
            <p>Here are directions to install the CityZen-Client from GitHub.</p>

            <p class="bg-dark text-white w-50"><strong>git clone https://github.com/codeforlansing/cityzen-client-vue.git </strong></p>

            <p>Then go to the directory you chose and type:</p>

             <p class="bg-dark text-white w-50"><strong>npm install </strong></p>

             <p>To start the client once it is successfully installed type and you're in the client directory:</p>

            <p class="bg-dark text-white w-50"><strong>npm start  </strong></p>


            <p>The second method for installing is to download the zip files for both <a href="https://github.com/codeforlansing/cityzen-server" target="_blank" >server</a> and <a href="https://github.com/codeforlansing/cityzen-client-vue" target="_blank">client</a>.  To do that on the respective GitHub repository sites, hit the green clone or download button and choose download and then download zip</p>

          </p>
          <h4>Install using Docker</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
            ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
            fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
            mollit anim id est laborum.
          </p>

      </div>

      <div class="col-md-5 text-justify float-right">
        <a class="nav-link" href="meet-the-team.html">Meet The Team
          <svg class="bi bi-caret-right-fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.14 8.753l-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 011.659-.753l5.48 4.796a1 1 0 010 1.506z"/>
          </svg>
        </a>
      </div>


    </main>
  </div>
</div>

</body>
</html>