Skip to content

Commit f6af4d1

Browse files
networkandcodenetworkandcode
committed
added posts from dev.to
1 parent 386d5dd commit f6af4d1

5 files changed

+1065
-0
lines changed

‎_posts/2022-01-16-run-svelte-app-on-aws-cloud9.md‎

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
---
2+
canonical_url: https://dev.to/aws-builders/run-svelte-app-on-aws-cloud9-4j5b
3+
categories: aws, cloud, solidjs, svelte
4+
date: 2022-01-16
5+
tags: aws, cloud, solidjs, svelte
6+
title: Run Svelte/Solid app on AWS Cloud9
7+
---
8+
9+
*This post first appeared on [dev.to](https://dev.to/aws-builders/run-svelte-app-on-aws-cloud9-4j5b)
10+
11+
12+
Hey all :wave:, let's say you do not have a system with sufficient memory / CPU, to write code on IDE and then subsequently test / run it, or if you want to test code on a Linux instance such as Ubuntu/Amazon Linux2, or may be you just keep things related to development isolated and you don't want to mess around with your machine, you could then leverage the online IDE offered by [AWS Cloud9](https://aws.amazon.com/cloud9/) to overcome all such restrictions and also use it's preview functionality, to test the app right there. Your work is also saved, and the associated instance gets terminated if it's idle based on the cost savings duration set.
13+
14+
You could also access other AWS services right from AWS Cloud9 too. I've been liking :green_heart:Cloud9 so far, and in this post I would just show how to setup and run the Svelte boilerplate, and then preview it on Cloud9. Svelte as most are aware is quite popular these days, seems a bit easy/fun to learn too.
15+
16+
Let's get started, by launching AWS cloud9. Search for Cloud9 on the AWS console, which should look like:
17+
![Cloud9 console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r5m6ijj6b5lepar0p1js.png)
18+
19+
And then create a new environment
20+
![Create cloud9 environment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rfgozetw1wvo3y7qkwmh.png)
21+
22+
Give it some name
23+
![Cloud9 environment name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/crcdqjdjknmo8zd99z6c.png)
24+
25+
I left all the other settings to be default, you may modify as required. The default settings in my case should launch an evironment with the following details:
26+
- Name: cloud9-svelte
27+
- Description: No description provided
28+
- Environment type: EC2
29+
- Instance type: t2.micro
30+
- Platform: Amazon Linux 2 (recommended)
31+
- Cost-saving settings: After 30 minutes (default)
32+
- IAM role: AWSServiceRoleForAWSCloud9 (generated)
33+
34+
Note that Cloud9 only offers 3 platforms for now, to choose from.
35+
![Choice of Linux platforms](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yq34e4tr133uawepn1ct.png)
36+
37+
The environment get's created in a while, once the create button is clicked.
38+
![Create cloud9 environment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k6k3mzhmeyo0mpqgqn49.png)
39+
40+
There should be a bash terminal on which I am now going to run certain commands.
41+
![Bash on cloud9](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4kq9aodiycjojoo65qdb.png)
42+
43+
You can just drag the tiny bash window to the top and close other tabs that are not required.
44+
45+
Let's use degit as menitoned in the [Svelte](https://svelte.dev/blog/the-easiest-way-to-get-started) quick start guide, to bootstrap the svelte project.
46+
```
47+
nc:~/environment $ npx degit sveltejs/template my-svelte-project
48+
Need to install the following packages:
49+
degit
50+
Ok to proceed? (y) y
51+
> cloned sveltejs/template#HEAD to my-svelte-project
52+
npm notice
53+
npm notice New minor version of npm available! 8.1.2 -> 8.3.1
54+
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.3.1
55+
npm notice Run npm install -g [email protected] to update!
56+
npm notice
57+
```
58+
We can acknowledge the npm notice and update npm, if required.
59+
```
60+
nc:~/environment $ npm install -g [email protected]
61+
62+
removed 8 packages, changed 38 packages, and audited 215 packages in 3s
63+
64+
10 packages are looking for funding
65+
run `npm fund` for details
66+
67+
3 moderate severity vulnerabilities
68+
69+
To address all issues, run:
70+
npm audit fix
71+
72+
Run `npm audit` for details.
73+
```
74+
75+
Change to the project directory and then install the node modules.
76+
```
77+
nc:~/environment/my-svelte-project $ npm i
78+
79+
added 97 packages, and audited 98 packages in 6s
80+
81+
7 packages are looking for funding
82+
run `npm fund` for details
83+
84+
found 0 vulnerabilities
85+
```
86+
Excellent, npm found no vulnerabilities.
87+
88+
Well, that's it run the Svelte app.
89+
```
90+
nc:~/environment/my-svelte-project $ npm run dev
91+
92+
> [email protected] dev
93+
> rollup -c -w
94+
95+
rollup v2.64.0
96+
bundles src/main.js → public/build/bundle.js...
97+
LiveReload enabled
98+
created public/build/bundle.js in 487ms
99+
100+
[2022-01-16 09:39:48] waiting for changes...
101+
102+
> [email protected] start
103+
> sirv public --no-clear "--dev"
104+
105+
106+
Your application is ready~! 🚀
107+
108+
- Local: http://localhost:8080
109+
- Network: Add `--host` to expose
110+
111+
────────────────── LOGS ──────────────────
112+
113+
```
114+
Make a note that it's running on port 8080, based on the output above.
115+
116+
Let's see if the app is working by using the curl command. press ALT T to open a new bash terminal. On the new terminal, execute the following command.
117+
```
118+
nc:~/environment $ curl localhost:8080
119+
<!DOCTYPE html>
120+
<html lang="en">
121+
<head>
122+
<meta charset='utf-8'>
123+
<meta name='viewport' content='width=device-width,initial-scale=1'>
124+
125+
<title>Svelte app</title>
126+
127+
<link rel='icon' type='image/png' href='/favicon.png'>
128+
<link rel='stylesheet' href='/global.css'>
129+
<link rel='stylesheet' href='/build/bundle.css'>
130+
131+
<script defer src='/build/bundle.js'></script>
132+
</head>
133+
134+
<body>
135+
</body>
136+
</html>
137+
```
138+
139+
So, we verified the app is working through the CLI:black_circle:. We can now try it on the browser. Hit Preview > Preview Running Application on the top bar. Boom:boom:, you should see the Svelte app on the preview browser tab. ![Preview on cloud9](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c9lbskl5qric902u7isy.png)
140+
141+
This is so far, local preview, what if you want to view it from the Internet:globe_with_meridians:, or let's say your friends want to view your app over the Internet while you are developing it. Let's exactly see that now, let's get the instance's public IP.
142+
```
143+
nc:~/environment $ curl https://checkip.amazonaws.com
144+
<cloud9-instance-public-ip>
145+
```
146+
147+
We have to now modify the security group, for which we can visit the EC2 instances page on AWS console, and select our instance id.
148+
149+
And then click on the Security group name in the Security tab. You can edit the inbound rules here.
150+
![Edit inbound rules](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tcacd3dnul70c0hhwmle.png)
151+
152+
A rule can be added to allow port 8080, from your local machine.
153+
![Add inbound rule](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/olpi2ku7n3mls19wgm7w.png)
154+
155+
Optionally, you can also add other source IPs, its always better to restrict traffic to minimal and known sources instead of applying rule for a broader range or subnet.
156+
157+
Save rules and you are done.
158+
![Save rules](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sncjdx0l92fz0bc0xtw5.png)
159+
160+
Let's stop the npm process by hitting Ctl C. And then run it again by prepending HOST=0.0.0.0. [Here](https://stackoverflow.com/questions/63255453/running-svelte-dev-on-server) is why.
161+
```
162+
nc:~/environment/my-svelte-project $ HOST=0.0.0.0 npm run dev
163+
164+
> [email protected] dev
165+
> rollup -c -w
166+
167+
rollup v2.64.0
168+
bundles src/main.js → public/build/bundle.js...
169+
LiveReload enabled
170+
created public/build/bundle.js in 476ms
171+
172+
[2022-01-16 10:22:50] waiting for changes...
173+
174+
> [email protected] start
175+
> sirv public --no-clear "--dev"
176+
177+
178+
Your application is ready~! 🚀
179+
180+
- Local: http://0.0.0.0:8080
181+
- Network: http://172.31.4.12:8080
182+
183+
────────────────── LOGS ──────────────────
184+
185+
```
186+
187+
If you now try to visit the Cloud9 instance's public IP on the browser, from your local machine, over port 8080, it should work.
188+
![Svelte app on browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ta0aq86s7zpobhn5v0w6.png)
189+
190+
191+
That's for the post, so you can make use of the online IDE offered by AWS Cloud9 and develop apps on the go. Thanks for reading !!!
192+
193+
Update:
194+
You can run [solid.js](https://docs.solidjs.com/guides/getting-started-with-solid/installing-solid) apps the same way. You can try the following commands:
195+
```
196+
npx degit solidjs/templates/ts my-app
197+
cd my-app
198+
npm i
199+
npm run dev -- --host --port 8080
200+
```
201+
![solid.js on Cloud9](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wziqv36qeiqtmy2geo4y.png)

‎_posts/2022-03-19-nextjs-deployment-via-aws-codecommit-amplify.md‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
---
2+
canonical_url: https://dev.to/aws-builders/nextjs-deployment-via-aws-codecommit-amplify-6oj
3+
categories: amplify, aws, cicd, nextjs
4+
date: 2022-03-19
5+
tags: amplify, aws, cicd, nextjs
6+
title: NextJS deployment via AWS CodeCommit / Amplify
7+
---
8+
9+
*This post first appeared on [dev.to](https://dev.to/aws-builders/nextjs-deployment-via-aws-codecommit-amplify-6oj/edit)*
10+
11+
12+
Hey All :wave:, Let's see how to add the NextJS starter code in an AWS CodeCommit repo and deploy it with AWS Amplify. I am using the [Cloud9](https://dev.to/aws-builders/run-svelte-app-on-aws-cloud9-4j5b) IDE :cloud: for this exercise. You may follow these steps on any Linux/Unix based machine though.
13+
14+
I am using [aws cli v2](https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html). You may upgrade the version if required. Also ensure you have setup the CLI with the required authentication config.
15+
16+
```
17+
$ aws --version
18+
aws-cli/2.4.27 Python/3.8.8 Linux/4.14.262-200.489.amzn2.x86_64 exe/x86_64.amzn.2 prompt/off
19+
```
20+
21+
The user id I'm using has administrator permissions :fire:, so I shouldn't have any issues while creating the repo. If not an admin, the IAM user should be setup with [CodeCommit policies] (https://docs.aws.amazon.com/codecommit/latest/userguide/security-iam-awsmanpol.html).
22+
23+
Let's go ahead and create the repo.
24+
```
25+
$ aws codecommit create-repository --repository-name next-js-boilerplate --repository-description "Boilerplate code for NextJS" --tag "code=JavaScript,framework=NextJS"
26+
{
27+
"repositoryMetadata": {
28+
"accountId": "<account-id>",
29+
"repositoryId": "<repository-id>",
30+
"repositoryName": "next-js-boilerplate",
31+
"repositoryDescription": "Boilerplate code for NextJS",
32+
"lastModifiedDate": "2022-03-19T08:17:28.327000+00:00",
33+
"creationDate": "2022-03-19T08:17:28.327000+00:00",
34+
"cloneUrlHttp": "https://git-codecommit.us-east-2.amazonaws.com/v1/repos/next-js-boilerplate",
35+
"cloneUrlSsh": "ssh://git-codecommit.us-east-2.amazonaws.com/v1/repos/next-js-boilerplate",
36+
"Arn": "arn:aws:codecommit:us-east-2:<account-id>:next-js-boilerplate"
37+
}
38+
}
39+
```
40+
41+
The repo :file_folder: is created and should appear in the list of repositories.
42+
```
43+
$ aws codecommit list-repositories --output text
44+
REPOSITORIES <repository-id> next-js-boilerplate
45+
```
46+
Can be checked on the AWS console too, on the browser.
47+
![List of repositories in CodeCommit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8h7dgx0vxc77na1yef17.png)
48+
49+
We are going to connect to the repo via SSH for which we have to upload the SSH public key to the AWS user account. But before that you have to ensure the SSH key is already generated. You may refer to this [link](https://docs.aws.amazon.com/codecommit/latest/userguide/setting-up-ssh-unixes.html) if you want to know how to generate the SSH key pair. The public key in my system is at the standard location i.e. ~/.ssh/id_rsa.pub.
50+
51+
Let's upload this key :key: and retrieve the public key id.
52+
```
53+
$ SSHPublicKeyId=$(aws iam upload-ssh-public-key --user-name nc --ssh-public-key-body file://~/.ssh/id_rsa.pub --output text --query SSHPublicKey.SSHPublicKeyId)
54+
```
55+
56+
Setup SSH config, and modify its permission so that only the owner(current user) of the file can access it(Read + Write).
57+
```
58+
$ cat > ~/.ssh/config <<EOF
59+
Host git-codecommit.*.amazonaws.com
60+
User $SSHPublicKeyId
61+
EOF
62+
63+
$ chmod 600 ~/.ssh/config
64+
```
65+
66+
Let's get the GIT SSH URL and then clone it.
67+
```
68+
$ gitUrl=$(aws codecommit get-repository --repository-name next-js-boilerplate --query repositoryMetadata.cloneUrlSsh --output text)
69+
70+
$ git clone $gitUrl
71+
Cloning into 'next-js-boilerplate'...
72+
warning: You appear to have cloned an empty repository.
73+
```
74+
75+
We have successfully cloned the repository, lets add some code to it. We can use npx for bootstraping a NextJS project. You may [install nodejs/npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) ) if its not already present in your system
76+
```
77+
$ cd next-js-boilerplate/
78+
79+
$ npx create-next-app@latest
80+
✔ What is your project named? … next-js-boilerpate
81+
```
82+
83+
This installs the NextJS project, and it also creates a sub directory with the same name, so let's move contents from the sub directory to the main directory.
84+
```
85+
$ mv next-js-boilerplate/.* .
86+
$ mv next-js-boilerplate/* .
87+
88+
$ rmdir next-js-boilerplate/
89+
90+
$ ls -a
91+
. .eslintrc.json .gitignore node_modules package-lock.json public styles
92+
.. .git next.config.js package.json pages README.md
93+
```
94+
95+
The code can now be pushed to the repo.
96+
```
97+
$ git status
98+
On branch master
99+
100+
No commits yet
101+
102+
Untracked files:
103+
(use "git add <file>..." to include in what will be committed)
104+
.eslintrc.json
105+
.gitignore
106+
README.md
107+
next.config.js
108+
package-lock.json
109+
package.json
110+
pages/
111+
public/
112+
styles/
113+
114+
$ git add .
115+
$ git commit -m 'adding nextjs boiler plate code'
116+
117+
$ git push
118+
```
119+
120+
We can verify this on the AWS console.
121+
![NextJS Boilerplate code in AWS CodeCommit repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e95g7njj4un0zye6nxii.png)
122+
123+
124+
:cool: we can now deploy this code via AWS Amplify, I am going to use the GUI for this.
125+
126+
Search for Amplify, create a new app, and then choose CodeCommit.
127+
![Select the repo type, in Amplify](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dpw2zkiw8t1q532xgbh9.png)
128+
129+
The next step is as follows, to select the correct repo and branch.
130+
![Select repo and branch in Amplify screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s3za78x0q0cw9zishodv.png)
131+
132+
Jus continue to the final step with no changes, and deploy.
133+
![Deploy screen in Amplify](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/97e7geq58eljfqeyzis9.png)
134+
135+
In a few minutes :stopwatch:, the app should be deployed. We should see the 4 stages(provision, build, deploy and verify) to be successful. There should also be a testing stage, which we haven't used here, as no tests are written.
136+
![Amplify stages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/93g1v2l6lbxmhehi51ha.png)
137+
138+
You should now be able to view :arrow_forward: the application by clicking on the https link provided above.
139+
![NextJS deployment preview via Amplify](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3jl9b365pjq2apahj5xc.png)
140+
141+
Thus, we have gone through some parts of CodeCommit and Amplify. CLI was used with CodeCommit, just to see the power of AWS CLI and I think many cloud operations are possible with it. Note that we can customize Amplify deployments with environment variables, build command modifications etc.
142+
143+
That's it for now, :slightly_smiling_face: thanks for reading...

0 commit comments

Comments
 (0)