|
| 1 | +--- |
| 2 | +layout: post |
| 3 | +title: 'Getting started with the FuryStack Boilerplate' |
| 4 | +author: [gallayl] |
| 5 | +tags: ['getting-started'] |
| 6 | +image: img/002-getting-started-with-a-boilerplate-cover.jpg |
| 7 | +date: '2021-06-23T08:48:20.257Z' |
| 8 | +draft: false |
| 9 | +excerpt: So this framework really kicks ass? And how can I start using it? |
| 10 | +--- |
| 11 | + |
| 12 | +## Why can it be good for you? |
| 13 | + |
| 14 | +If you want to try out the framework without digging deep all of its how-and-whys, you can simply clone the repo and start hacking in no time. |
| 15 | + |
| 16 | +## Where can I found it? |
| 17 | + |
| 18 | +No suprise, you can find it on a public [Github repo](https://github.com/furystack/boilerplate) 😉 |
| 19 | + |
| 20 | +## The Workspaces |
| 21 | + |
| 22 | +The Boilerplate is basically a monorepo built with [Yarn Workspaces](https://classic.yarnpkg.com/blog/2017/08/02/introducing-workspaces/) and it includes 3 workspace by default: common, frontend and service. |
| 23 | + |
| 24 | +### Common |
| 25 | +You can share models, interfaces and logic between your frontend and the backend. |
| 26 | +In the Boilerplate, there is a User and Session model and a REST API definition for login / logout. |
| 27 | + |
| 28 | +### Frontend |
| 29 | +A Single Page App, based on [Shades](https://github.com/furystack/furystack/tree/develop/packages/shades). It contains a basic layout with header and body, a basic service for login / logout management and login / logout functionality, some placeholder pages and a basic routing. The frontend is bundled with Webpack. The service URL is passed as an environment variable called `SERVICE_URL`. |
| 30 | + |
| 31 | +### Service |
| 32 | +The backend service, based entirely on FuryStack. It contains a filesystem-based store for users and an in-memory-store for sessions. It has implemented the example API (with login / logout) and has some other example implementations. |
| 33 | + |
| 34 | +## Getting started |
| 35 | + |
| 36 | +If you want to start a project based on the Boilerplate, the preferred flow should be something like this: |
| 37 | + |
| 38 | +1. Create a new Repo, using the boilerplate as a template |
| 39 | +1. Clone it |
| 40 | +1. Install the dependencies |
| 41 | +1. Build with `yarn build` |
| 42 | +1. Start the frontend and the backend with `yarn start` |
| 43 | +1. Open up the default link: [http://localhost:8080/](http://localhost:8080/) |
| 44 | + |
| 45 | +## Other goodies |
| 46 | + |
| 47 | +### Static code analysis |
| 48 | + |
| 49 | +The project contains `eslint` and `prettier` to maintain code quality and formatting. |
| 50 | + |
| 51 | +### Seed |
| 52 | + |
| 53 | +It is a good practice to seed your db with basic data - there is a script for creating the test user, to run it, type `yarn seed` |
| 54 | + |
| 55 | +### Unit tests |
| 56 | + |
| 57 | +[Jest](https://jestjs.io/) has been also set up - to run, type `yarn test:unit` |
| 58 | + |
| 59 | +### End-to-end testing |
| 60 | + |
| 61 | +The boilerplate also includes end-to-end testing with [Cypress](https://www.cypress.io/) |
| 62 | + |
| 63 | +### CI |
| 64 | + |
| 65 | +There is an [Azure Pipelines](https://azure.microsoft.com/en-us/services/devops/pipelines/) setup included - you can check how this looks like [here](https://dev.azure.com/furystack/FuryStack/_build?definitionId=3). |
| 66 | + |
| 67 | +The Pipeline contains the following steps: |
| 68 | + - Install dependencies |
| 69 | + - Run eslint (+prettier) |
| 70 | + - Build the project |
| 71 | + - Run the Unit tests (and publishes the results) |
| 72 | + - Runs the Seed(as it contains data that's needed for the e2e tests) |
| 73 | + - Start up the frontend, the service and run the Cypress E2E tests |
0 commit comments