Requirements
- PostgreSQL or MySQL server.
- Stripe account.
- Postmark account.
Step 1: Open the .NET solution
Open the NetcoreSaas.sln
solution with Rider or Visual Studio.
There are 3 environment files on the backend:
- appSettings.json: Production
- appSettings.Development.json: Development
- appSettings.Testing.json: Testing
And 2 environment files on the frontend:
- .env.production
- .env.development
Step 2: Find and Replace Environment Variables
You need to Find and Replace the following values.
IMPORTANT: Use the ‘Match case’ find and replace option:
![Match case](/_next/static/media/match-case.3734ea4150acb81c7b4498424076ab6d.png)
- PRODUCT_URL: Your SaaS URL (without https:// or slashes).
- PRODUCT_NAME: Your SaaS name.
- SUPPORT_EMAIL: e.g. admin@saasfrontends.com.
- COMPANY_NAME: Legal incorporation name.
- COMPANY_ADDRESS: Incorporation address.
- POSTMARK_SERVER_TOKEN: An UUID, get it here.
- POSTMARK_SENDER_NAME: e.g. Alex, get it here.
- POSTMARK_SENDER_EMAIL: e.g. hello@saasfrontends.com, get it here.
- Development environment:
- DEVELOPMENT_DATABASE_NAME: e.g. dev-db.
- DEVELOPMENT_SERVER: e.g. localhost.
- DEVELOPMENT_PORT: e.g. 5432.
- DEVELOPMENT_USER: e.g. testing.
- DEVELOPMENT_PASSWORD: e.g. password123.
- DEVELOPMENT_STRIPE_PUBLIC_KEY: get it here.
- DEVELOPMENT_STRIPE_SECRET_KEY: get it here.
- DEVELOPMENT_ADMIN_EMAIL: e.g. admin@saasfrontends.com.
- DEVELOPMENT_ADMIN_PASSWORD: e.g. password123.
- Testing environment:
- TESTING_DATABASE_NAME: e.g. tests-db.
- TESTING_SERVER
- TESTING_PORT
- TESTING_USER
- TESTING_PASSWORD
- TESTING_STRIPE_PUBLIC_KEY: get it here.
- TESTING_STRIPE_SECRET_KEY: get it here.
- Production environment:
- PRODUCTION_DATABASE_NAME: e.g. prod-db.
- PRODUCTION_SERVER
- PRODUCTION_PORT
- PRODUCTION_USER
- PRODUCTION_PASSWORD
- PRODUCTION_STRIPE_PUBLIC_KEY: get it here.
- PRODUCTION_STRIPE_SECRET_KEY: get it here.
- PRODUCTION_ADMIN_EMAIL
- PRODUCTION_ADMIN_PASSWORD
For example, if my website will be saascourses.net, I’ll replace PRODUCT_URL (using Match case):
![Find and Replace](/_next/static/media/find-and-replace.0ed1df95c07ef999d2e175d2c74ff3ca.png)
Frontend Service Mode
Since we’ll be running the backend, open the .env.development
file and set the …_APP_SERVICE variable to api.
Learn more about the Fake API feature.
# Options: api, sandbox
..._APP_SERVICE=api
...
Step 3: Database Migrations
On the terminal and run the following commands.
Note: By default, it will take the Development environment (appsettings.Development.json).cd src/NetcoreSaas.WebApi
dotnet ef migrations add Initial --context MasterDbContext
Expected output:
Build started...
Build succeeded.
Done. To undo this action, use 'ef migrations remove'
Then apply the migration to the database:
dotnet ef database update --context MasterDbContext
Since the Startup.cs class runs the migration twice (for multi-tenancy purposes), you can ignore the following error.
...
42P07: relation "AuditLogs" already exists
Verify that the database was created.
![Created database](/_next/static/media/created-database.9166f5f959fdf5a446cf0a7f1750d541.png)
Step 4: Debug the app on Rider or VS
Select the NetcoreSaas.WebApi: NetcoreSaas configuration and Debug the app.
![Debug the app](/_next/static/media/debug.c94492f00ba5a903a7bef90496931140.png)
The Web API + Client app will launch at port 5000.
![App on port 5000](/_next/static/media/port-5000.a43917ad682e6e4d671320a0c508e67e.png)
Step 5: Run the Frontend on VS Code
For Vue2 projects:
npm install
npm run serve
For Vue3, React and Svelte projects:
npm install
npm run dev
And open http://localhost:8080.
![App on port 8080](/_next/static/media/port-8080.b5c14e96f63d54c757c951f8f3e1d817.png)
Step 6: Set up your pricing
Pricing plans
Preview
Open the /pricing URL and take a look at the default pricing:
![Default pricing](/_next/static/media/default-pricing.2ab3f32b7d4aed5f99546ae224bc3c27.png)
The warning banner is just telling you that these prices are yet to be created on the Database and Stripe.
![Warning - Prices not in Database](/_next/static/media/pricing-warning.dbdd7bbe3fa29efeff848636b7b7a5a1.png)
Open the frontend src/application/plans.ts
file and update the prices as you see fit.
Save Pricing
Once you’re happy with your pricing, log in as your admin user (remember your DEVELOPMENT_ADMIN_EMAIL
and DEVELOPMENT_ADMIN_PASSWORD
values) and go to /admin/pricing.
![Admin | Pricing](/_next/static/media/pricing-admin.a15b7660c81c38e53ada3fa904ce69e0.png)
Click on the button “Click here to generate these prices in Database and your Subscription provider” and wait a few seconds.
Verify your Stripe Dashboard
Open the Stripe dashboard and verify that the subscription products were created.
![Stripe products](/_next/static/media/pricing-stripe.fd64ab4c8ae09fbc3a7ec9b7191c0854.png)
Verify your Database
Run an SQL query to verify that your products were persited to your database.
select * from "SubscriptionProducts";
![Database products](/_next/static/media/pricing-database.136607ed1f48ee932d957f52c287b7e9.png)
Step 7: Set up Email Templates
Go to /admin/emails and take a look at the default templates:
![Admin | Postmark email templates](/_next/static/media/emails-admin-none.dc18caa269c1daa4845374eaf50fa2b2.png)
If you check your postmark server templates dashboard, it should be empty:
![Postmark email templates - Empty](/_next/static/media/emails-postmark-none.f0a0f6cb03a31f90a82b477c8c43da29.png)
You can learn more about Postmark email templates here.
Creating the Postmark Templates
We need to create them by clicking on the “Create All” button and wait a few seconds.
Once the process is done, check your postmark server again, there should be 10 templates:
![Postmark email templates](/_next/static/media/emails-postmark-templates.f7a09e4668ba846a3e4e2e204f5fa698.png)
Step 8: Create an account
Register
Log out, go to the /pricing page and select a plan to register as a new user/tenant.
![Register](/_next/static/media/register.5e3e63730ddb6bf03230ba19d436a929.png)
As you can see, I’ve selected a paid (yearly) plan, so it will ask for my payment info:
![Payment info](/_next/static/media/register-payment-info.0cd1961367cd846deebb815384a2ae17.png)
You can only use a testing card, learn more about it here, I’m using:
- Card number: 4242 4242 4242 4242.
- MM / YY: 04 / 24.
- CVC: 242.
- ZIP: 42424.
Dashboard
It should redirect you to the /app/dashboard:
![Dashboard](/_next/static/media/dashboard.e41a4b1842612cb3d33f1b0ba6637e3b.png)
Welcome Email
Verify that you got the welcome email:
![Welcome Email](/_next/static/media/emails-welcome.c996d252afb4b1285d704265cb578ca6.png)
Stripe Payment
Verify that the payment is on your Stripe dashboard:
![Stripe Payment](/_next/static/media/register-payment-stripe.7f78cadd60ccbfd9219809fa3a68d2cb.png)
Step 9: Test the App
Now we’re ready to test the sample app.
Employees
Create an employee by clicking the Employees sidebar item, and “Add employee” button:
![Employees Sidebar Item](/_next/static/media/app-employees-item.0ca39f64914c0f611ea6fb1fd3654ab6.png)
![Add Employee Button](/_next/static/media/app-employees-new-button.77cc35e4942db3d98f77e955bad32d75.png)
![Add Employee](/_next/static/media/app-employees-new.3bb3bd8da7dfa051645c58b841f3780c.png)
It will redirect you to the employees list page:
![Employees List](/_next/static/media/app-employees-list.840cada1ca44e73a35fa678d56ef841c.png)
Verify that the Employee is created on the database:
select * from "Employees";
![Employees Database](/_next/static/media/app-employees-db.6dc94b1175857665ee1c3e3782902729.png)
Links
A Link is a core concept of SaasFrontends. It allow your users (tenants) to create links between them.
In this sample app, a Link consists of the Client and the Provider. Either of them can create a share a Contract with the other.
Invite a user as your Client
Click on the Plus button on the top right corner and Click on the “New Client” option.
![App Plus Button](/_next/static/media/app-plus-button.7a847b007368be473d5f39327d85c735.png)
Invite your ‘client’:
![New Client](/_next/static/media/app-links-new-client.47360a66d45d26e186f473d70760a1dc.png)
Check your inbox, you should get an invitation to join:
![Invitation Email](/_next/static/media/app-links-invitation-email.bc13aaf6768168ad990f56cfd7da111f.png)
Click on the “Create account” button, it will redirect you to create an account. I’ll be selecting a Free plan.
![Register as Client](/_next/static/media/app-links-register.6f07820871aad2f342e96bf8a1730243.png)
It should redirect you to the /app/dashboard. Log out, and Log in as the previously created user (on Step 8).
Verify the created Link
Click on the Links -> All sidebar item. There should your ‘client’.
![All Links](/_next/static/media/app-links-all.91357004e697b4d01a2cd3efcac224df.png)
Contracts
Click on New contract, and create a sample contract. Once created, it will redirect you to view the contract details:
![Contract Details](/_next/static/media/app-contracts-details.bddf722ad77948e97050ad69d7b3f15d.png)
Step 10: Integration Tests
Stop the application and go to the Unit Tests tab:
![Unit Tests](/_next/static/media/unit-tests.74b497b86da63b9b06d741030a76eb06.png)
Right click on the “tests” folder and click “Run Selected Unit Tests”.
All 91 tests should pass:
![Unit Tests Passed](/_next/static/media/unit-tests-passed.2f2383eef42f1c3a9fb3509c7cc95364.png)
—
Please let me know if you have any questions.