ember new
with the desired project name. In the following examples, we’ll use
the example project name ember-project
.
node_modules
folder in your project). You can start your project by running the command:
http://localhost:4200
in your browser of choice. You should see an Ember welcome page and not much else.
<WelcomePage />
component in <rootDir>/app/templates/application.hbs
before building for
production with your app logic or something else to avoid errors while starting the application.build
command packages up all of the assets that make up your application—JavaScript, templates, CSS, web fonts,
images, and more—in an optimized way for production use.
nginx.conf.template
in the root of your project. We won’t be using this template now; we’ll use it to
run the Nginx server inside the Docker container.
Note two important blocks in this configuration:
index.html
from the files we built using Ember, stored in the /usr/share/nginx/html
folder. We
will copy the assets to this folder while building the Docker application.
And then the API block:
example.com
. Whenever an API call is made to
example.com/api
, the nginx server acts as a reverse proxy server and forwards the request to the backend server.
You can use reverse proxying to navigate the traffic that is inbound to nginx. The reverse proxy server also acts as a
mask, hiding the real backend from the outside world.
.dockerignore
file and add the contents that should not be copied over
to the Docker file system.
.dockerignore
file and adding folders like node_modules
is a must since dependencies will be installed
while building the image based on the platform preferences used. Copying those from the file system will overwrite the
installed dependencies and might error out during deployment.ember-app
image for platform linux/amd64
and tags it as latest
.
If you are locally testing your application, you can skip the platform
key to build the images:
-it
: enables interactivity with TTY--rm
: tells the Docker Daemon to clean up the container and remove the file system after the container exits--name ember-app
: Name of the container ember-app
.-e PORT=4200
: Sets the environment variable PORT in Docker to 4200
.-e BACKEND_PORT=4500
: Sets the environment variable BACKEND_PORT in Docker to 4500
.-e BACKEND_HOST=host.docker.internal
: Sets the environment variable BACKEND_HOST in Docker to
host.docker.internal
.-d
: Runs the container in detached (background) mode. You can skip the flag to see the logs directly in your
terminal window.-p 4200:4200
: Maps port 4200 on your host to port 4200 in the container.ember-app
at the end is the name of the image.-d
flag in Docker starts the container in the background. You can skip the flag to see the logs directly in your
terminal window.
After running the command, visit http://localhost:4200
to see the Ember application running inside the Docker
container.
Hurray 🎉. Now we have created and packaged an Ember app for production use.