node HTTP-Server is not working properly? - angularjs

when i install http-server in c: drive it install automatically in d: drive.
here is the result:-
C:\Users\Kuncham>npm install http-server -g
D:\usr\local\http-server -> D:\usr\local\node_modules\http-server\bin\http-server
D:\usr\local\hs -> D:\usr\local\node_modules\http-server\bin\http-server
+ http-server#0.11.1
updated 1 package in 1.131s
after installation when i run http-server in my project folder it will start the http-server and also we can access the link given in command prompt. the browser will show only files not run the my angular application.

Install http-server using npm install -g http-server command
Generate a build by using ng build --prod command
Go to dist/project_name from cmd
Type http-server -p 8080 on cmd
Type http://localhost:8080/ on browser

Perform an ng build on the directory and point your http-server at the resulting dist/ folder, which contains the compiled HTML and Javascript files your browser can consume.
More information: Angular - Deployment

I just installed http-server today and my problem was it just wasn't serving the content at all when I went to localhost:8080. The command prompt would flash for a second and disappear. I resolved my problem by hitting http://192.168.40.78:8080. http-server lists two urls you could hit. The 192 one worked, but not the localhost one.

specify the file when running http-server
http-server [path] [options]
[path] defaults to ./public if the folder exists, and ./ otherwise.

Related

Docker not detecting changes for react app in windows

I generated a base react app with create-react-app and generated a Dockerfile.dev inside of the project directory
FROM node:16-alpine
WORKDIR '/app'
COPY ./package.json ./
RUN npm install
COPY ./ ./
CMD [ "npm","start" ]
Ran the build with docker build -f Dockerfile.dev -t dawnmd/react .
Started the docker container with docker run -it -p 3000:3000 -v /app/node_modules -v ${PWD}:/app dawnmd/react
The app not detecting changes from the host i.e windows 11 when I change something in the host file.
It's true that CHOKIDAR_USEPOLLING=true doesn't work with docker and windows 11.
However there is a workaround - you can use vscode remote container extension found here:
VSCode Documentation: https://code.visualstudio.com/docs/remote/containers
VSCode Remote Download: https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers
If you have Docker Desktop installed, VSCode installed, and VSCode Remote containers installed. You can then do the following:
Open the react project in VSCode
Press CRTL + SHIFT + P, and then type and select the following: "Remote-Container: Open folder in Container"
VSCODE Open in Remote Containers
It would then ask for, "Add Development Container Configuration Files" to which you can select one of the following from dockerfile, docker-compose, or from predefined container configuration. Your project maybe different from mine hence the selection is up to you.
VS Code Remote-Container Configuration
4.Once Everything has been loaded. Using VSCode select terminal from the menu and then new terminal and then type "npm start" or "yarn start" as shown on the figure.
Running React in Remote-Container
*Opinion: The benefit of running react using vscode remote container is that the computer doesn't have to work much harder as it re-compiles/rebuild react whenever you save the js file on demand. Unlike chokidar_usepolling which compiles react every-second. Which makes my computer scream running a virtual library and the constant reload on the browser.
Note: Any changes made in the remote-container is also saved in the host machine.
Note: You would have to use git bash or another terminal(i.e Powershell) to execute all git commands as the terminal in vscode opens a terminal which resides in the container.
For windows using power-shell the run command will be:
docker run -it --rm -v ${PWD}:/app -v /app/node_modules -p 3000:3000 -e CHOKIDAR_USEPOLLING=true <IMAGE>
CHOKIDAR_USEPOLLING=true enables a polling mechanism via chokidar (which wraps fs.watch, fs.watchFile, and fsevents) so that hot-reloading will work

Docker container builds locally but not on GitLab

The dockerfile builds locally but the GitLab pipeline fails, saying:
Step 3/8 : RUN gem install bundler rake
ERROR: While executing gem ... (Gem::FilePermissionError)
You don't have write permissions for the /usr/local/bundle directory.
The project strucutre is a Ruby Sinatra backend and a React frontend.
The Dockerfile looks like this
FROM ruby:3.0-alpine
# Install Dependencies
RUN apk update && apk add --no-cache build-base mysql-dev rrdtool
RUN gem install bundler rake
# Copy the files and build
WORKDIR /usr/server
COPY . .
RUN bundler install
# Run bundler
EXPOSE 443
CMD ["bundle", "exec", "puma"]
I thought Docker was meant to solve the problem of "it runs on my machine"...
What I've tried
As per this post, I tried adding -n /usr/local/bundle but it did not fix the issue.

How do I serve index.html by default in my http-server

I have created a basic AngularJS app in node environment. I am using http-server module for serving the files to browser. Everything is working fine except for the fact that I can't get to serve index.html by default when the server launches.
I checked out npm registry for more options to http server module, and also tried looking for a relevant question on SO but still not able to get what I desire.
Is it possible at all to specify the file to pick up while server starts.
My server basically starts at localhost:8080 while I would like localhost:8080/index.html
My start script is http-server -a localhost -p 8080 -c-1. If I do something like http-server -a localhost -p 8080 -c-1 index.html, to my surprise it opens the index.html file but serves it on file protocol and not on localhost.
What am I doing wrong here.
P.S. I visited Angular JS seed and there official example says http-server -a localhost -p 8080 -c-1 ./app. However, when I do this I get error Windows can't find specified path, although my structure is similar to the seed.
My structure:
dir
--app.js
--index.html
--node_modules
--package.json
Make sure you are building your project first and generating an output ./dist folder or similar.
Then try this command instead:
http-server -p 8080 ./dist -o http://localhost:8080/index.html
You are missing the http:// in your url.
Add a -f /index.html or whatever the document is.
In my case for example:
http-server -c-1 -f /index.html
For me what solved the problem was, I clicked the link through the CLI after doing http-server [path].
In my case I ran http-server . (which has an index.html in the directory), then logs out this.
Starting up http-server, serving .
http-server version: 14.1.1
http-server settings:
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none
Available on:
http://192.168.8.133:8080
http://127.0.0.1:8080
http://172.23.128.1:8080
Hit CTRL-C to stop the server
Now I just used the link in the line below Available on: which is:
http://192.168.8.133:8080, works for me
http://127.0.0.1:8080, did not work for me, it download file instead
http://172.23.128.1:8080, works!
Such a weird behaviour of http-server.
Try to put you static file inside a new directory public. and run you server http-server
- app.js
-public
--index.html
-package.json

How to go from codepen to running locally on pc

I would like to run the following codepen on my PC?
http://codepen.io/kyleledbetter/pen/gbQOaV
I have nodejs installed, and have exported the codepen as a zip, extracted in -
but how do i actually run it?
I have tried 'http-server ./d' ? and 'npm run serve'. Sorry this is a newb question, but I can't find documentation on web for it, or in angularmaterialwebsite.
First install http-server package npmjs.com using following command
$ npm install http-server -g
then on you run a http-server pointing to your extracted folder using following command
$ http-server path/to/your/extracted/folder -p 8989

Reusable docker image for AngularJS

We have an AngularJS application. We wrote a dockerfile for it so it's reusable on every system. The dockerfile isn't a best practice and it's maybe some weird build up (build and hosting in same file) for some but it's just created to run our angularjs app locally on each PC of every developer.
Dockerfile:
FROM nginx:1.10
... Steps to install nodejs-legacy + npm
RUN npm install -g gulp
RUN npm install
RUN gulp build
.. steps to move dist folder
We build our image with docker build -t myapp:latest .
Every developer is able to run our app with docker run -d -p 80:80 myapp:latest
But now we're developing other backends. So we have a backend in DEV, a backend in UAT, ...
So there are different URLS which we need to use in /config/xx.json
{
...
"service_base": "https://backend.test.xxx/",
...
}
We don't want to change that URL every time, rebuild the image and start it. We also don't want to declare some URLS (dev, uat, prod, ..) which can be used there. We want to perform our gulp build process with an environment variable instead of a hardcoded URL.
So we we can start our container like this:
docker run -d -p 80:80 --env URL=https://mybackendurl.com app:latest
Is there someone who has experience with this kind of issues? So we'll need an env variable in our json and building it and add the URL later on if that's possible.
EDIT : Better option is to use build args
Instead of passing URL at docker run command, you can use docker build args. It is better to have build related commands to be executed during docker build than docker run.
In your Dockerfile,
ARG URL
And then run
docker build --build-arg URL=<my-url> .
See this stackoverflow question for details
This was my 'solution'. I know it isn't the best docker approach but just for our developers it was a big help.
My dockerfile looks like this:
FROM nginx:1.10
RUN apt-get update && \
apt-get install -y curl
RUN sed -i "s/httpredir.debian.org/`curl -s -D - http://httpredir.debian.org/demo/debian/ | awk '/^Link:/ { print $2 }' | sed -e 's#<http://\(.*\)/debian/>;#\1#g'`/" /etc/apt/sources.list
RUN \
apt-get clean && \
apt-get update && \
apt-get install -y nodejs-legacy && \
apt-get install -y npm
WORKDIR /home/app
COPY . /home/app
RUN npm install -g gulp
RUN npm install
COPY start.sh /
CMD ["./start.sh"]
So after the whole include of the app + npm installation inside my nginx I start my container with the start.sh script.
The content of start.sh:
#!/bin/bash
sed -i 's#my-url#'"$DATA_ACCESS_URL"'#' configs/config.json
gulp build
rm -r /usr/share/nginx/html/
//cp right folders which are created by gulp build to /usr/share/nginx/html
...
//start nginx container
/usr/sbin/nginx -g "daemon off;"
So the build will happen when my container starts. Not the best way of course but it's all for the needs of the developers. Have an easy local frontend.
The sed command will perform a replace on the config file which contains something like:
{
"service_base": "my-url",
}
So my-url will be replaced by my the content of my environment variable which I willd define in my docker run command.
Than I'm able to perform.
docker run -d -p 80:80 -e DATA_ACCESS_URL=https://mybackendurl.com app:latest
And every developer can use the frontend locally and connect with their own backend URL.

Resources