I have created a Angular 2 form which posts the form data to a postgres DB using a Rest API. Now, I want to serve my Angular 2 app on AWS S3. I googled on this and I found that creating a webpack is a solution but not able to create one. I want to know where to start with, to bundle my code and serve it on s3.
GitHub link for Form: https://github.com/aanirudhraj/Angular2form_signaturepad_API
Thanks for the Help!!
The quickest way is to build the app using angular-cli and then deploy the content of the 'dist' directory as a static site in S3 (an S3 bucket can be configured to host a static site; make sure you assing read permission to 'anybody' to avoid http 4xx return codes).
You just need to host it as a static site on S3.
Check this: http://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html
I infer from your code that you are using angular-cli.
Create a dev/production build
ng build --dev / ng build --prod
Content of your dist folder will contain bundled files for deployment. Your primary file for refrence will be 'index.html' as this will load you angular app.
You need to decide what kind of server you'll be using to serve you webapp.
For development purpose when we do ng serve , webpack-dev-server is used as a static file server (local development). I'll recommend should go with the most comfortable/cost effective solution you can have when deploying to actual server.
Static file Server
Directly hosting website is aws space as a static website.
Aspnet Core with static file server middleware. (*)
Nodejs Express with static file server middleware.(*)
Java serverlet for serving static files. (*)
(*)Following aproach will also allow you to have some server-side code if you require in future.
When you deploy your ng2-app, you should use AOT(ahead of time) compile.
I guess you are using JIT(just in time) compile.
In angular2 guide page,
With AOT, the browser downloads a pre-compiled version of the application. The browser loads executable code so it can render the application immediately, without waiting to compile the app first.
When you use JIT compile, your browser will download vendor.js which is defined by angular2 compiler and it will compile your app just in time. It will be too slow and your client have to download vendor file. When you use AOT, you dont have to use vendor file, so resources are being smaller.
I recommend to use AOT compile when you deploy your app, and use lazy loading for resource size.
If you are curious about ng2 AOT compile, read this guide.
angualar2-cookbook-AOT
And here is example angular2 app with webpack2 and lazy load.
use file structure and config files in here.
When I tested with example app, files bundled with aot was smaller than 500KB.
angular2-webpack2-aot
When you use aot compile with #ngtools/webpack or whatever,
just put all files in dist directory which have files compiled with aot in your S3 bucket, and I recommend to use aws cloudfront cache for your s3 bucket resources.
Related
I have a docker-based Flask app that I have been developing and it's nearing completion. I am currently moving to hosting it on AWS. The app allows users to generate various forms of content (usually image files) that are saved into a UGC folder within the /static folder of the app in my dev environment. This temporary solution worked fine in dev but it isn't going to suffice when ported to live as the static/ugc folder will be destroyed with each image update.
I therefore need an alternative solution and have been investigating EFS. Does anybody have experience with this service? Or in hosting persistent static files outside of a Docker app container in general and could advise?
You should probably look at using the S3 object storage service, via the boto3 python client.
There's also a flask extension, Flask-S3 which allows you to host general assets on S3 automatically. You'd probably need to code the logic for user-uploaded content yourself.
I've built a gatsby website, but when I try to use it offline (by directly loading index.html into my browser), it fails to load the files in the assets folder, and links to other pages fails
running in windows:
after installing gatsby , I did the following:
gatsby new sample
cd sample
gatsby build
then I went to file explorer and opened the sample/dist directory and double clicked on index.html (Chrome is my default browser, but IE behaves the same)
the result is a half-loaded webpage that is missing the style sheets, javascript, images, and links are broken.
For instance, the "about" link on the first page points to "D:/about" vs. ".\about.html".
Is there anyway to make gatsby work to create a truly off-line website?
I've built a gatsby website, but when I try to use it offline (by directly loading index.html into my browser), it fails to load the files in the assets folder, and links to other pages fails
Gatsby will create a React app for you when it is built, and because most React apps use client-side routing, your links won't work with file:// URLs.
After installing the Gatsby CLI and building your site with gatsby build you should run gatsby serve which will serve up index.html with a static file server on your own machine.
See a similar answer about create-react-app here
Try using gatsby serve from the root of your project. Serve spins up a web server to serve your prod build.
Look it up on the Gatsby CLI docs on their site.
Gatsby isn't really set up to do that, unfortunately. It's a site generator, not page generator, and it expects living on a server. The result is that while the files are static, the navigation isn't.
Because I spent some time experimenting, this is what DOESN'T work:
Setting . as pathPrefix in gatsby-config.js. Gatsby lets you set path prefix, which it then prepends to all generated urls. Unfortunately, this prefix always gets "absolutized" somehow. . gets converted to /., for example.
Setting the absolute path of the file on disk as pathPrefix. Same as above - file:///path/to/file doesn't survive the build (results in file:/) and /path/to/file breaks the JavaScript.
Setting the pathPrefix to a bogus value like /NOTAPREFIX and search-replacing it in the generated files. Breaks the JavaScript, again.
Something I haven't tried but might get you somewhere, would be to disable the Single Page App functionality. It's possible, reportedly, (or maybe with this plugin?) but no good step-by-step instructions anywhere.
I have developed a web application with a Node.js backend on a local machine using Webstorm IDE. Among other things, the application creates a new unique folder and writes 7 javascript (.js) files to this folder during runtime each time a user requests a new account. Everything works properly in the local development environment.
When the application is uploaded and deployed to AWS Elastic Beanstalk, and a new user is requested though the application web page, I am receiving the following 404 (Not Found) error in the browser's Developer, JavaScript Console. The same error appears for each of the 7 files. The number 1541877962401 is the unique folder name generated by the application when a user requests a new account and user.js is one of the 7 javascript files copied to this newly created folder. savedUser is an existing folder in the file structure and is not created during runtime.
GET http://sowtest082-env.stsvxa672t.us-east-1.elasticbeanstalk.com/savedUser/1541877962401/user.js net::ERR_ABORTED 404 (Not Found)
I am guessing that the application does not have the correct permissions to create the folder and/or files in AWS?
Within the context of the Elastic Beanstalk environment, what is the best method to create a folder and copy javascript files to this folder during runtime? It is fairly easy to restructure the location of the folder and the files within it in the development environment so as to match the ASW EB environment. Reengineering the application to store the contents of these files in an AWS MySQL database engine would take a lot more work.
Bye the way, these 7 files are not tmp files and they are not config files...
Thanks...
I started app development with drop-wizard recently and a bit confusing how the whole thing works.
Where is the web app directory?
Is it possible to edit static files (JS, CSS) without needing to have a redeployment?
Thanks.
I have looked into this a bit more and will attempt to answer your questions:
Where is the web app directory
DW applications are not (meant as) web applications. They are deployed as an embedded system running a jetty embedded server and listening on some port(s). Having said that, there are certainly ways of packaging the application as a web application. (see link in comment)
Is it possible to edit static files (JS, CSS) without needing to have a redeployment? - Yes(ish)
This depends on you, really. There is a thing called an AssetBundle. These can be used to server static resources (from the classpath usually). This however is a mechanism you could use to implement your own AssetBundle that instead of serving files off the classpath, will serve files off the regular path.
Or, you could add your regular path to the classpath on startup so that the AssetBundle works.
Or, you could implement a ServletFilter for the AssetBundle (assets are not part of the jersey ecosystem) and implement your dynamic changes in the Filter.
Most of these will require restart for a reason or another. E.g.a custom implementation of a Filter obviously requires a redeploy. The Servlet returning assets also (I believe) employs a caching strategy that might require a restart (subject to your implementation).
For your UI: There is also a DW-views project that adds the ability to create views (with by default mustache templates) that can be powered from your application and served by the same REST endpoints.
Hope that helps,
After some more checking:
You can serve static resources from the file system and modify them as you go. They will be served correctly. How to do this:
Add an asset bundle with the resource path:
bootstrap.addBundle(new AssetsBundle("/assets2/", "/assets"));
This adds the root classpath resource assets2 and has it served statically from the endpoint assets.
The trick is that you have to add your file system location as a classpath resource. This can be done via arguments (or the classpath tab in the eclipse run configuration). You can google that relatively easy. However, you will have to remember that classpath resources behave differently from file system resources:
In my case I added to the classpath:
/home/artur/tmp/assets/
However, my Asset bundle serves from "assets2". Let's have a look at the file system:
artur#pandaadb:~/tmp/assets$ pwd
/home/artur/tmp/assets
artur#pandaadb:~/tmp/assets$ find .
.
./assets2
./assets2/test.txt
artur#pandaadb:~/tmp/assets$
So, in my file system location has been added as root, but assets are only served from the subfolder assets2
Now, all the resources that are located in assets2 can be modified at runtime and will be served by DW as a static resource.
Have fun playing around,
Artur
I'm a django newbie. I've read that all django projects, deployed in production environment, should serve media files (uploads) through web server such as apache. My question is - why is that?
There are lots of PHP frameworks - eg. symfony 1 and 2 - which don't follow the rule. Once you've made your app accessible through a web server, you don't have to change anything depending on the env you deploy. There is just the DOCUMENT_ROOT configured on the web server and somewhere inside this directory lies the upload directory - that's all. You can be sure that no one will access PHP, sql files and so on - thanks to the proper framework architecture and the document root. Why is it different in django?
edit: besides, preparing different code for different environments (e.g. this) is quite a bad approach, since you can't use exactly the same code to deploy a project in different envs (and the code from the link makes sense only for debug env.
Because with PHP your code is served from web server's public directories together with static and media files. So when you request any of these static files web server serves them directly without executing any PHP code along the way.
In Django your code is running separately and all requests are processed by python code in Django. This is inefficient to serve static files, it's more efficient to serve allow a web server like Apache or Nginx to serve them directly without going through any python code.