|
1 | | -# kickstart-angular |
| 1 | +> Note that this project is not an official Contentstack maintained repo yet. This is a work in progress and will be updated over time. When it is finished enough it will move to the official Contentstack Github home. |
| 2 | +
|
| 3 | +# Contentstack Kickstart: Angular 18 |
| 4 | + |
| 5 | +This is a kickstart example to connect Angular to Contentstack. |
| 6 | +This example covers the following items: |
| 7 | + |
| 8 | +- SDK initialization |
| 9 | +- Live preview and Visual building setup |
| 10 | + |
| 11 | +More details about this codebase can be found on the [Contentstack docs](https://www.contentstack.com/docs/developers). |
| 12 | + |
| 13 | +[](https://community.contentstack.com) |
| 14 | + |
| 15 | +## How to get started |
| 16 | + |
| 17 | +Before you can run this code, you will need a Contentstack "Stack" to connect to. |
| 18 | +Follow the following steps to seed a Stack that this codebase understands. |
| 19 | + |
| 20 | +> If you installed this Kickstart via the Contentstack Markertplace or the new account onboarding, you can skip this step. |
| 21 | +
|
| 22 | +### Install the CLI |
| 23 | + |
| 24 | +```bash |
| 25 | +npm install -g @contentstack/cli |
| 26 | +``` |
| 27 | + |
| 28 | +#### Using the CLI for the first time? |
| 29 | + |
| 30 | +It might ask you to set your default region. |
| 31 | +You can get all regions and their codes [here](https://www.contentstack.com/docs/developers/cli/configure-regions-in-the-cli) or run `csdx config:get:region`. |
| 32 | + |
| 33 | +> Beware, Free Contentstack developer accounts are bound to the EU region. We still use the CDN the API is lightning fast. |
| 34 | +
|
| 35 | +Set your region like so: |
| 36 | + |
| 37 | +```bash |
| 38 | +csdx config:set:region EU |
| 39 | +``` |
| 40 | + |
| 41 | +### Log in via the CLI |
| 42 | + |
| 43 | +```bash |
| 44 | +csdx auth:login |
| 45 | +``` |
| 46 | + |
| 47 | +### Get your organization UID |
| 48 | + |
| 49 | +In your Contentstack Organization dashboard find `Org admin` and copy your Organization ID (Example: `blt481c598b0d8352d9`). |
| 50 | + |
| 51 | +### Create a new stack |
| 52 | + |
| 53 | +Make sure to replace `<YOUR_ORG_ID>` with your actual Organization ID and run the below. |
| 54 | + |
| 55 | +```bash |
| 56 | +csdx cm:stacks:seed --repo "contentstack/kickstart-stack-seed" --org "<YOUR_ORG_ID>" -n "Kickstart Stack" |
| 57 | +``` |
| 58 | + |
| 59 | +### Create a new delivery token. |
| 60 | + |
| 61 | +Go to Settings > Tokens and create a delivery token. Select the `preview` scope and turn on `Create preview token` |
| 62 | + |
| 63 | +> In the case of Angular 18, check the settings in the environment and make sure the url is: `http://localhost:4200/` instead of `http://localhost:3000/` |
| 64 | +
|
| 65 | +### Fill out your environment settings. |
| 66 | + |
| 67 | +Now that you have a delivery token, you can fill out the `./src/environments/environment.ts` file in your codebase. |
| 68 | + |
| 69 | +```js |
| 70 | +export const environment = { |
| 71 | + production: false, |
| 72 | + contentstack: { |
| 73 | + apiKey: "<YOUR_API_KEY>", |
| 74 | + deliveryToken: "<YOUR_DELIVERY_TOKEN>", |
| 75 | + previewToken: "<YOUR_PREVIEW_TOKEN>", |
| 76 | + environment: "preview", |
| 77 | + region: "EU", |
| 78 | + preview: true, |
| 79 | + }, |
| 80 | +}; |
| 81 | +``` |
| 82 | + |
| 83 | +### Turn on Live Preview |
| 84 | + |
| 85 | +Go to Settings > Live Preview. Click enable and select the `Preview` environment in the drop down. Hit save. |
| 86 | + |
| 87 | +### Install the dependencies |
| 88 | + |
| 89 | +```bash |
| 90 | +npm install |
| 91 | +``` |
| 92 | + |
| 93 | +### Run your app |
| 94 | + |
| 95 | +```bash |
| 96 | +npm run start |
| 97 | +``` |
| 98 | + |
| 99 | +### See your page visually |
| 100 | + |
| 101 | +### In the browser |
| 102 | + |
| 103 | +Go to `http://localhost:4200/`. |
| 104 | + |
| 105 | +#### In the CMS |
| 106 | + |
| 107 | +Go to Entries and select the only entry in the list. |
| 108 | +In the sidebar, click on the live preview icon. |
| 109 | +Or, click on visual experience in the sidebar. |
0 commit comments