A boilerplate for Ember apps, tailored for use in kaliber5
Get fresh versions of Node and Yarn installed on your machine.
Ideally, use Volta.
Create a new Ember app:
npm cache clean --force
npx ember-cli new <app-name> --yarnConfigure our private npm registry.
Put this into .yarnrc:
"@kaliber5:registry" "https://npm.pkg.github.com"Install the addon:
cd <app-name>
ember i @kaliber5/k5-ember-boilerplateThe addon will apply code changes, producing a number of conflicts. Resolve them one by one by answering Yes in the terminal, until it starts installing dependencies. Keep an eye for that.
As it's installing dependencies, it will apply code changes from blueprints of installed addons. Reject them one by one.
Run yarn lint:eslint --fix, then fix any remaining errors by hand.
You are encouraged to create a PR to this repo, so that you don't have to fix them by hand again.
Commit changes.
Don't forget to git add -A.
This boilerplate uses ember-css-modules restricted to a compound file extension .module.scss.
This is because otherwise ember-css-modules treats all .scss files as modules, making it impossible to work with Sass partials in a conventional way. If you keep using partials wihtout resolving the problem, you will end up with duplicate CSS, likely without even realizing it.
This is the expected file structure of your app's components and pages:
app/
components/
my-component.hbs
my-component.module.scss
my-component.ts
pods/
my-route/
controller.ts
route.ts
styles.module.scss
template.hbsTo setup your deployment configuration, depending on the hosting type you can run additional optional generators:
This is a deployment setup pushing assets to S3, with CloudFront CDN in front, using CloudFormation for provisioning of the infrastructure. It assumes a staging and production environment, and also supports preview deployments for Pull Requests.
ember g k5-deployment-awsThis will set up ember-cli-deploy and a deployment Github workflow. You will need the following information
at hand for every deployment environment:
Note: the SSL certificate must have been created prior to this, and it must be on the us-east-1 region to be usable
for CloudFront. You can use a single certificate for all environments, with all the required (wildcard) domains added,
e.g. example.com, *.example.com, *.staging.example.com and *.preview.example.com.
Add the secrets AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY with the AWS access key generated for a suitable
deployment user created in the IAM service on the AWS console, with enough privileges to create all the resources
defined in the CloudFormation template.
After initial deployment for any of the three environments, so after the CLoudFront distribution has been created by
CloudFormation, a DNS CNAME record must be created to point the domain to the CloudFront URL. This assumes the domain
is not hosted on AWS (Route 53), otherwise the creation of these records could also be automated using the CloudFront
template, by defining an additional resource like this.
Route53Record:
Type: 'AWS::Route53::RecordSetGroup'
Properties:
HostedZoneId: !Ref HostedZoneId # inject this as a parameter, or replace with a static value
RecordSets:
- Name: !Join ['.', ['*', !Ref DomainName]]
Type: A
AliasTarget:
# Magic AWS number: For CloudFront, use Z2FDTNDATAQYW2.
HostedZoneId: Z2FDTNDATAQYW2
DNSName: !GetAtt 'AssetsCDN.DomainName'This is for a deployment setup based on a classic on-premise LAMP server. It assumes a staging and production environment, and also supports preview deployments for Pull Requests.
ember g k5-deployment-sshThis will set up ember-cli-deploy and a deployment Github workflow. You will need the following information
at hand:
If not done already, setup the DNS records for your production and staging domains. Also set up the wildcard subdomains
(e.g. *.preview.example.com) for PR previews, as a CNAME record of your normal staging domain.
If not done already, setup the virtual hosts on your Apache server. The staging and production domains should point to the
current symlink (serverpath/current where severpath is the path entered when running the generator).
Also set up a wildcard (*) subdomain, but this one should not point to current but its parent directory
(so the serverpath above).
ssh-keygen -t rsa -b 4096 -m pem -f deploy_key # generate SSH key
ssh-copy-id -i ./deploy_key.pub user@your.server.com # copy public key to server Copy the public key to all server environments (production, staging).
Copy the generated MOVE_TO_SERVER.htaccess as .htaccess to your server, where the releases are deployed to (serverpath).
E.g. like this:
scp -i ./deploy_key ./MOVE_TO_SERVER.htaccess user@your.server.com:/var/www/user/htdocs/frontend/.htaccessAfterwards delete the file form your project.
Then copy the contents of the deploy_key file (your secret key) and use this to
create the DEPLOY_SSH_KEY secrets in the Github repo.
Afterwards delete both key files, as they allow anybody direct access to the server. From now on only Github Actions will be responsible for deployments.
Note: this requires a running deployment setup using Github
deploymentevents
Run Lighthouse CI after each successful deployment, and uploads results to https://lhci.kaliber5.de.
ember g k5-deployment-lhcinpx @lhci/cli wizard --basicAuth.username kaliber5 --basicAuth.password <password>Enter the data in the interactive CLI session as required. Save the tokens.
Add the build token you received from the previous command as a LHCI_SERVER_TOKEN secret to the Github repository.
Install Volta on your machine: https://volta.sh/
Then lock Node && Yarn versions in package.json:
"volta": {
"node": "12.10.0",
"yarn": "1.17.3"
}Exact version numbers should match the ones used by your CI.
See the Contributing guide for details.
This project is licensed under the MIT License.