I have some questions regarding deployment. Sorry if some of it is very common knowledge, but I haven’t been able to find a good guide or explanation for this.
I want to deploy my Angular SSR (Angular Universal) app to DigitalOcean. I would like to use the App Platform (if possible) and deploy from Github where I have a repository with my code.
But I am in doubt about what to do and what options to choose…
First thing: The configuration says: “Node.js detected”.
- Web Service
- Static Site
- Worker
Which type should I select?
Can I select a free static site? Or should I have a paying plan to my Angular app? I already have a Node.js backend running as a Web Service on a paying plan.
I tried choosing a Web Service because I figured that it would be the right choice for a Server Side Rendered app.
But then the next dilemmas arise:
- HTTP Routes
- Build Command
- Run Command
- HTTP Port
What is the right things to enter for these?
My package.json file have these scrips:
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"build:prod": "ng build --prod && mv dist/APP-NAME _static",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"dev:ssr": "ng run APP-NAME:serve-ssr",
"serve:ssr": "node dist/APP-NAME/server/main.js",
"build:ssr": "ng build --prod && ng run APP-NAME:server:production",
"prerender": "ng run APP-NAME:prerender"
}
I guess it is “npm run build:ssr” for the build command. But I am not sure about the run command. Is it “npm run serve:ssr”?
And should HTTP Routes just be default “/” and HTTP Port be “8080”?
Can anyone please help me with this?
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Heya,
Deploying an Angular SSR (Server-Side Rendered) app to the App Platform is a great choice. I’ll walk you through the process and answer your questions step by step.
1. Choose the App Type:
Since you have an Angular SSR app, you should select “Web Service” as the app type. This is the right choice for serving web applications.
2. Selecting a Plan:
DigitalOcean App Platform offers free and paid plans. If your app is for development or personal use, you can start with the free plan. If you need more resources or features for production use, you can consider upgrading to a paid plan.
3. Configuration:
-
HTTP Routes: For a basic setup, you can keep this as “/”. It means your app will respond to requests to the root URL.
-
Build Command: You are correct, the build command should be “npm run build:ssr”. This command will build your Angular SSR app for production.
-
Run Command: The run command should be “npm run serve:ssr”. This command starts the Node.js server that serves your Angular SSR app.
-
HTTP Port: The default port for Node.js applications is 3000, but since you’re using Angular Universal, it might use port 8080. You can leave this as 8080 unless you have explicitly configured your app to use a different port.
4. Environment Variables (if needed):
If your Angular SSR app requires any environment variables, you can set them in the DigitalOcean App Platform dashboard.
5. Deploy from GitHub:
You mentioned that your code is in a GitHub repository. When you select “GitHub” as your code repository source during the deployment process, you’ll need to connect your GitHub account and choose the repository that contains your Angular SSR app.
6. Deployment Configuration:
-
Branch: Choose the branch you want to deploy (e.g., “main” or “master”).
-
Directory: In the case of Angular SSR, the root of your repository should be the correct directory.
7. Review and Deploy:
Once you’ve configured everything, review your settings and click the “Deploy” button.
8. Testing:
After the deployment is complete, you can access your app using the provided URL. Test it to make sure everything is working as expected.
That’s it! You’ve successfully deployed your Angular SSR app to DigitalOcean’s App Platform. If you encounter any issues, you can check the logs and settings in the DigitalOcean dashboard to troubleshoot.
Hope that this helps!
Become a contributor for community
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
DigitalOcean Documentation
Full documentation for every DigitalOcean product.
Resources for startups and SMBs
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
The developer cloud
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Get started for free
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.