Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 1a62df8

Browse files
Initial port from aspnet-core-react-template
0 parents commit 1a62df8

File tree

110 files changed

+9569
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

110 files changed

+9569
-0
lines changed

‎.editorconfig‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
root = true
2+
3+
[*]
4+
end_of_line = lf
5+
charset = utf-8
6+
indent_style = space
7+
trim_trailing_whitespace = true
8+
insert_final_newline = true
9+
indent_size = 2
10+
11+
[*.{js,ts,tsx}]
12+
indent_size = 4

‎.gitignore‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.DS_Store
2+
3+
# dotnet core
4+
bin/
5+
obj/
6+
project.lock.json
7+
8+
api/wwwroot/**
9+
!api/wwwroot/scratch.html
10+
!api/wwwroot/favicon.ico
11+
12+
# node
13+
node_modules/
14+
typings/
15+
npm-debug.log
16+
17+
# client-react
18+
client-react/components/*.js
19+
client-react.test/build
20+
!client-react.test/build/client-react/styles/
21+
22+
# ops
23+
ops/hosts
24+
ops/*.retry
25+
26+
# other
27+
*.js.map
28+

‎.vscode/launch.json‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
{
2+
"version": "0.2.0",
3+
"configurations": [
4+
{
5+
"name": "Debug api/ (server)",
6+
"type": "coreclr",
7+
"request": "launch",
8+
"preLaunchTask": "build",
9+
"program": "${workspaceRoot}/api/bin/Debug/netcoreapp1.1/api.dll",
10+
"args": [],
11+
"env": {
12+
"ASPNETCORE_ENVIRONMENT": "Development",
13+
"NODE_PATH": "../node_modules/"
14+
},
15+
"cwd": "${workspaceRoot}/api",
16+
"externalConsole": false,
17+
"stopAtEntry": false,
18+
"internalConsoleOptions": "openOnSessionStart"
19+
},
20+
{
21+
"name": "Debug client-web.test/ (Mocha tests)",
22+
"type": "node",
23+
"request": "launch",
24+
"protocol": "inspector",
25+
"program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
26+
"stopOnEntry": false,
27+
"args": [
28+
"--require",
29+
"ignore-styles",
30+
"--recursive",
31+
"client-web.test/build/client-web.test"
32+
],
33+
"cwd": "${workspaceRoot}",
34+
"preLaunchTask": "pretest:client",
35+
"runtimeArgs": [
36+
"--nolazy"
37+
],
38+
"env": {
39+
"NODE_ENV": "development"
40+
},
41+
"sourceMaps": true
42+
},
43+
{
44+
"name": ".NET Core Attach",
45+
"type": "coreclr",
46+
"request": "attach",
47+
"processId": "${command:pickProcess}"
48+
}
49+
]
50+
}

‎.vscode/settings.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"files.exclude": {
3+
"**/.git": true,
4+
"**/.svn": true,
5+
"**/.hg": true,
6+
"**/CVS": true,
7+
"**/.DS_Store": true,
8+
"**/bin": true,
9+
"**/obj": true
10+
}
11+
}

‎.vscode/tasks.json‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
// See https://go.microsoft.com/fwlink/?LinkId=733558
3+
// for the documentation about the tasks.json format
4+
"version": "0.1.0",
5+
"command": "npm",
6+
"isShellCommand": true,
7+
"showOutput": "always",
8+
"suppressTaskName": true,
9+
"tasks": [
10+
{
11+
"taskName": "build",
12+
"args": [
13+
"run",
14+
"build"
15+
],
16+
"isBuildCommand": true
17+
},
18+
{
19+
"taskName": "test",
20+
"args": [
21+
"run",
22+
"test"
23+
],
24+
"isTestCommand": true
25+
},
26+
{
27+
"taskName": "pretest:client",
28+
"args":[
29+
"run",
30+
"pretest:client"
31+
]
32+
}
33+
]
34+
}

‎README.md‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
# ASP.NET Core / Vue.js SPA Template App
2+
3+
This app is a template application using ASP.NET Core for a REST/JSON API server and Vue.js for a web client.
4+
5+
## Overview of Stack
6+
- Server
7+
- ASP.NET Core
8+
- PostgresSQL
9+
- Entity Framework Core w/ EF Migrations
10+
- JSON Web Token (JWT) authorization with OpenIddict
11+
- Docker used for development PostgresSQL database and MailCatcher server
12+
- Client
13+
- Vue.js
14+
- Webpack for asset bundling and HMR (Hot Module Replacement)
15+
- CSS Modules
16+
- Testing
17+
- xUnit for .NET Core
18+
- MailCatcher for development email delivery
19+
- DevOps
20+
- Ansible playbook for provisioning (Nginx reverse proxy, SSL via Let's Encrypt, PostgresSQL backups to S3)
21+
- Ansible playbook for deployment
22+
23+
## Setup
24+
25+
1. Install the following:
26+
- [.NET Core 1.1](https://www.microsoft.com/net/core)
27+
- [Node.js >= v7.8.0](https://nodejs.org/en/download/)
28+
- [Ansible >= 2.0](http://docs.ansible.com/ansible/intro_installation.html)
29+
- [Docker](https://docs.docker.com/engine/installation/)
30+
2. Run `npm install && npm start`
31+
3. Open browser and navigate to [http://localhost:5000](http://localhost:5000).
32+
33+
## Scripts
34+
35+
### `npm install`
36+
37+
When first cloning the repo or adding new dependencies, run this command. This will:
38+
39+
- Install Node dependencies from package.json
40+
- Install .NET Core dependencies from api/api.csproj and api.test/api.test.csproj (using dotnet restore)
41+
42+
### `npm start`
43+
44+
To start the app for development, run this command. This will:
45+
46+
- Run `docker-compose up` to ensure the PostgreSQL and MailCatcher Docker images are up and running
47+
- Run dotnet watch run which will build the app (if changed), watch for changes and start the web server on http://localhost:5000
48+
- Run Webpack dev middleware with HMR via [ASP.NET JavaScriptServices](https://github.com/aspnet/JavaScriptServices)
49+
50+
### `npm run migrate`
51+
52+
After making changes to Entity Framework models in `api/Models/`, run this command to generate and run a migration on the database. A timestamp will be used for the migration name.
53+
54+
### `npm test`
55+
56+
This will run the xUnit tests in api.test/ and the Vue.js tests in client-web.test/.
57+
58+
### `npm run provision:prod`
59+
60+
_Before running this script, you need to create an ops/hosts file first. See the [ops README](ops/) for instructions._
61+
62+
This will run the ops/provision.yml Ansible playbook and provision hosts in ops/hosts inventory file. This prepares the hosts to recieve deployments by doing the following:
63+
- Install Nginx
64+
- Generate a SSL certificate from [Let's Encrypt](https://letsencrypt.org/) and configure Nginx to use it
65+
- Install .Net Core
66+
- Install Supervisor (will run/manage the ASP.NET app)
67+
- Install PostgreSQL
68+
- Setup a cron job to automatically backup the PostgresSQL database, compress it, and upload it to S3.
69+
- Setup UFW (firewall) to lock everything down except inbound SSH and web traffic
70+
- Create a deploy user, directory for deployments and configure Nginx to serve from this directory
71+
72+
### `npm run deploy:prod`
73+
74+
_Before running this script, you need to create a ops/hosts file first. See the [ops README](ops/) for instructions._
75+
76+
This script will:
77+
- Build release Webpack bundles
78+
- Package the .NET Core application in Release mode (dotnet publish)
79+
- Run the ops/deploy.yml Ansible playbook to deploy this app to hosts in /ops/hosts inventory file. This does the following:
80+
- Copies the build assets to the remote host(s)
81+
- Updates the `appsettings.json` file with PostgresSQL credentials specified in ops/hosts file and the app URL (needed for JWT tokens)
82+
- Restarts the app so that changes will be picked up
83+
84+
## Development Email Delivery
85+
86+
This template includes a [MailCatcher](https://mailcatcher.me/) Docker image so that when email is sent during development (i.e. new user registration), it can be viewed
87+
in the MailCacher web interface at [http://localhost:1080/](http://localhost:1080/).
88+
89+
## Visual Studio Code config
90+
91+
This project has [Visual Studio Code](https://code.visualstudio.com/) tasks and debugger launch config located in .vscode/.
92+
93+
### Tasks
94+
95+
- **Command+Shift+B** - Runs the "build" task which builds the api/ project
96+
- **Command+Shift+T** - Runs the "test" task which runs the xUnit tests in api.test/ and Mocha/Enzyme tests in client-react.test/.
97+
98+
### Debug Launcher
99+
100+
With the following debugger launch configs, you can set breakpoints in api/ or the the Mocha tests in client-react.test/ and have full debugging support.
101+
102+
- **Debug api/ (server)** - Runs the vscode debugger (breakpoints) on the api/ .NET Core app
103+
- **Debug client-web.test/ (Mocha tests)** - Runs the vscode debugger on the client-web.test/ Mocha tests
104+
105+
## Credit
106+
107+
The following resources were helpful in setting up this template:
108+
109+
- [Sample for implementing Authentication with a React Flux app and JWTs](https://github.com/auth0-blog/react-flux-jwt-authentication-sample)
110+
- [Angular 2, React, and Knockout apps on ASP.NET Core](http://blog.stevensanderson.com/2016/05/02/angular2-react-knockout-apps-on-aspnet-core/)
111+
- [Setting up ASP.NET v5 (vNext) to use JWT tokens (using OpenIddict)](http://capesean.co.za/blog/asp-net-5-jwt-tokens/)
112+
- [Cross-platform Single Page Applications with ASP.NET Core 1.0, Angular 2 & TypeScript](https://chsakell.com/2016/01/01/cross-platform-single-page-applications-with-asp-net-5-angular-2-typescript/)
113+
- [Stack Overflow - Token Based Authentication in ASP.NET Core](http://stackoverflow.com/questions/30546542/token-based-authentication-in-asp-net-core-refreshed)
114+
- [SPA example of a token based authentication implementation using the Aurelia front end framework and ASP.NET core]( https://github.com/alexandre-spieser/AureliaAspNetCoreAuth)
115+
- [A Real-World React.js Setup for ASP.NET Core and MVC5](https://www.simple-talk.com/dotnet/asp-net/a-real-world-react-js-setup-for-asp-net-core-and-mvc)
116+
- My own perseverance because this took a _lot_ of time to get right 😁

‎api.test/Controller/Tests.cs‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
using System.Collections.Generic;
2+
using System.Linq;
3+
using Xunit;
4+
using app = aspnetCoreReactTemplate;
5+
6+
namespace Tests.Controller
7+
{
8+
public class Tests
9+
{
10+
// [Fact]
11+
// public void Index_ReturnsAViewResult_WithAListOfBrainstormSessions()
12+
// {
13+
// var controller = new app.Controllers.ContactsController(null);
14+
// var result = (IEnumerable<app.Models.Contact>)controller.Get();
15+
16+
// Assert.NotEqual(result.Count(), 0);
17+
// }
18+
}
19+
}

‎api.test/ControllerTests.cs‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
using Xunit;
2+
3+
namespace Tests
4+
{
5+
public class ControllerTests
6+
{
7+
[Fact]
8+
public void Test1()
9+
{
10+
var contact = new aspnetCoreReactTemplate.Models.Contact();
11+
Assert.True(string.IsNullOrEmpty(contact.email));
12+
}
13+
}
14+
}

‎api.test/NuGet.Config‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<configuration>
3+
<packageSources>
4+
<add key="NuGet" value="https://api.nuget.org/v3/index.json" />
5+
<add key="aspnet-contrib" value="https://www.myget.org/F/aspnet-contrib/api/v3/index.json" />
6+
</packageSources>
7+
</configuration>

‎api.test/Unit/Tests.cs‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
using Xunit;
2+
using app = aspnetCoreReactTemplate;
3+
4+
namespace Tests.Unit
5+
{
6+
public class Tests
7+
{
8+
[Fact]
9+
public void TestNewContactProperties()
10+
{
11+
var contact = new app.Models.Contact();
12+
13+
Assert.True(string.IsNullOrEmpty(contact.lastName));
14+
Assert.True(string.IsNullOrEmpty(contact.firstName));
15+
Assert.True(string.IsNullOrEmpty(contact.email));
16+
Assert.True(string.IsNullOrEmpty(contact.phone));
17+
}
18+
}
19+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /