I'm new to Node and I'm trying to run a local server.
I followed this simple steps: Setup a simple Node server.
I move to the folder I have the index.html file:
I run http-server then I browse to http://localhost:8080/ and this is what I get:
I have no idea what I am doing wrong.
This one has caught me out a couple of times too - if you have a ./public folder, the http-server library defaults to serving that rather than ./. Kind of a silly default, in my opinion, but oh well!
You can get around this by explicitly stating the path when you start the server:
http-server ./
Related
I am trying to containerize my React application with docker and am now a little bit stuck with the server.js file as I do not know how to "implement" the application inside. I was able to simply show a "Hello World" but can't seem to run the application inside.
My idea was initially, that I could just use the index.js file as an entrypoint and use it in the "res.end(x)" as this was the place where I could simply enter the "Hello World".
Am I missing just something small or is my general approach wrong?
My server.js file looks as followed:
const http= require('http');
const fs = require('fs');
const index = fs.readFileSync('index.js');
let app = http.createServer((req, res) => {
res.writeHead(200,{'Content-Type': 'text/plain'});
res.end(index);
});
app.listen(9030, '0.0.0.0');
console.log('Node server running on port 9030')
I share with you this best documentation :
https://nodejs.org/en/docs/guides/nodejs-docker-webapp/
React is generally coded in .jsx files, which need to be compiled/transpiled into regular Javascript. Once this is done, you can serve these files to web browsers any way you like.
Understanding Build tools
React compilation/transpilation is done using Webpack or Parcel. If you're using Create-React-App, then you're using Webpack under the hood. CRA npm start will run a Webpack dev server, and npm run build will put all of the files you need in your build directory. You should do the latter if you want to
Avoid using Webpack dev server
Most tutorials, including the one linked in the comments, suggest using Webpack development server (aka npm start) to run your server in Docker. which is not recommended. Not only does it consume more resources to run, but the development build will run slower in browsers than the production build. The development server is also not meant to handle heavy loads.
Use build for production, with a real server
Use npm run build to generate the build files in the build directory, then use a real web server to serve them to the world.
One example in Docker, using Nginx to serve the files, can be found here
Alternatively the CRA build command itself offers a helpful hint:
The build folder is ready to be deployed.
You may serve it with a static server:
npm install -g serve
serve -s build
This will work in a Docker Node container. An example of a very not-optimized Dockerfile might look like this
FROM node:16-alpine
COPY . .
RUN npm install
RUN npm build
RUN npm install -D serve
CMD ["./node_modules/.bin/serve", "-s", "build"]
The build process can be improved here to leverage cache (by first copying package.json and package-lock.json and installing before copying code over, see example at the end of the answer here), and all of the RUN commands combined
After running npm run serve it gives an address like http://localhost:8080 and it works, this address is targeted the root folder of local server but my project exists another folder like http://localhost/vue
And my question is how the address http://localhost:8080 works and where is the actual index.html? Since my actual project placed in localhost/vue folder! and the address should be http://localhost/vue
I think you are a bit confused on what is going on in the background when you use serve.
When you are running the command npm run serve, your project is getting built by Webpack and then "served" via a local http-server. This server is using your project's build folder as it's root.
It seems like you have created a folder named localhost as out of your comments here. http://localhost is not a folder called "localhost" in your computer. In fact, it is just a name for your internal ip: 127.0.0.1. You can test this by going to 127.0.0.1:8080 and seeing this is the same as http://localhost:8080
in programmatic terms, one could say the following:
localhost == 127.0.0.1
That out of the way, you seemt to also expect there to be a sub-folder named vue, since that's what you have in your localhost folder. Knowing the above; http://localhost is not a folder localhost on your pc. It is however the folder the http-server has chosen, in this case, vue chooses the folder /dist inside your project folder.
Example: Your project folder has the following path: C:\Users\Admin\Documents\myProject
When you then run npm run serve in that folder, the vue http-server will serve (host) the folder C:\Users\Admin\Documents\myProject\dist
This means http://localhost == C:\Users\Admin\Documents\myProject\dist\index.html
However, if your goal here is to have your project served as: http://localhost/my-custom-sub-folder
You will have to edit the vue.config.js for your vue project by adding: publicPath
vue.config.js example:
module.exports = {
publicPath: '/my-custom-sub-folder',
};
the index.html file should be by default placed at the root of your project in the "public" folder
I created an app using Javascript (with D3.js), JQuery, CSS, but no Node.js. It's your typical 'index.html' browser-run interface. I've been going through Docker tutorials and trying to figure out how to set my app up to a server, but I've had no luck accomplishing it and have only been able to find tutorials using apps with Node. I cannot, for the life of me, figure out what I'm doing wrong, but I'm wondering if the problem (or one of them) lies in my Dockerfile. Also, do I need to have used Node.js for all this to work? My app consists of the following:
A directory called Arena-Task. Within this directory, I have my index.html, my main javascript file called arena.js, and my CSS files. My other necessary files (like images, etc.) are located within two other folders in the same directory called data and scripts.
So now, how would I write my Dockerfile so that I can build it using Docker and publish it to a server? I've attempted following Docker's example Dockerfile:
FROM node:current-slim
WORKDIR /usr/src/app
COPY package.json .
RUN npm install
EXPOSE 8080
CMD [ "npm", "start" ]
COPY . .
But to be honest I'm not quite sure how to make the changes to accommodate my program. I can't figure out if a package.json is required because if it is, then don't I need to be using Node? I don't use any node modules or project dependencies like that in my app. Do I need to be? Is my problem more than just an incorrect Dockerfile?
Sorry that this question is all over the place, but I'm really new to the realm of the server-side. I appreciate any help! Let me know if I can provide any clarification.
lets clarify few things:
node and npm is when you need them, like you are using some npm packages.
package.json - is in use by npm - it stores installed package list in it.
For you case i don't see need of node. so you can create simple image and then you going to need simple web server - something which can serve you html/css/js files on web requests over http. the simplest i know would be nginx.
Also in Dockerfile you need to copy all you resources into image you are building.
that is what COPY package.json . was doing. but in you case you have to copy whole app folder into some app folder in docker image. (assuming app is a folder which holds all you files)
so we are going to have steps
Dockerfile should look something like this:
FROM ubuntu
RUN apt-get install -y nginx
COPY app app
COPY startup.sh /startup.sh
COPY ./nginx-default /etc/nginx/sites-available/default
no need in default commands because you going to start something else during docker run.
nginx-default is a configuration for nginx to work as webserver:
it should look something like this:
server {
listen 8080;
server_name localhost;
root /app
}
nginx is very flexible - if you need something from it google it.
docker image should do something all the time, otherwise image going to stop (some blocking process).
the easiest way i know is to create startup.sh file which going to start nginx as first step and then going to do infinity loop:
exit_script() {
trap - SIGINT SIGTERM # clear the trap
sudo service nginx stop
exit 1
}
sudo service nginx start
while sleep 20; do
CURRENT_TIME=$(date +"%T")
echo "app is running: $CURRENT_TIME"
done
exit_script - is a trap which helps to stop docker image in fast way, but not like terminate. but you can omit that for testing purposes.
finally, build image (docker build -t {your-image-name} .) and to start image use something like this:
docker run -p 8080:8080 {your-image-name} bash /startup.sh
that should work :), though most probably you going to face few errors because i was writing it from the head. (like you may need something else for nginx, or sudo is not installed by default in ubuntu lates image).
I am pretty new to web development and I was asked to create a single-page application with tools of my choice. The only requirement is that it has to run locally on a GlassFish server (in NetBeans: Java Web > Web Application). I use the create-react-app starter kit provided by Facebook to build the application. When I run npm run build I get a build folder containing an html-file and a js-file. But when I double-click the html-file, the browser opens and just shows an empty page. Does anyone know what I have to configure in order to get a bundled html-file that shows the application when I open it?
Thank you
After running "npm run build" on your create-react-app generated code, it displays instructions to help with just this. It says something like:
You may also serve it locally with a static server:
npm install -g pushstate-server
pushstate-server build
The first command, "npm install -g pushstate-server" only needs to be run once, as it installs "pushstate-server" to global NPM. The second command "pushstate-server build" runs the simple static server, pushstate-server, and serves up any content in the "build" folder at http://localhost:9000. You can change the port number if you wish, by adding it at end of command line: "pushstate-server build 1234"
UDPATE: Serverless method...
If your goal is to run the page from the file system, and not from a web server, you'll need to tweak the build/index.html to fix the paths to your JS and CSS (and less importantly, your favicon.ico). The index.html generated by create-react-app expects your JS and CSS to be at "/static/...". However, when you open from the file system, that path is not correct. If you remove the leading forward slash, making the URLs relative, your page will load properly from the file system:
After running "npm run build", open the generated "build/index.html" file. Remove the leading forward slash from "/favicon.ico", "/static/js/main.[random string].js" and "/static/css/main.[random string].css" and save your changes (so that the all read "static/..." and not "/static/..."). Reload/refresh the page in the browser.
I'd like to automatically restart the server after particular files are edited.
Is there anything I can install to help me do that? - or will I need to watch the folder run a script accordingly.
Any pointers appreciated
Use supervisor. Install it with npm install supervisor -g and launch your code with supervisor server.js and you should be good to go. Note that by default it keeps an eye on the files that are in the same directory as the server.js and it's subdirectories, but it should be possible to add additional paths.
You could use Nodemon for that, there is even a video tutorial on it.
https://github.com/mdlawson/piping is good too.
There are already node "wrappers" that handle watching for file
changes and restarting your application (such as node-supervisor), as
well as reloading on crash, but I wasn't fond of having that. Piping
adds "hot reloading" functionality to node, watching all your project
files and reloading when anything changes, without requiring a
"wrapper" binary.
Nodemon is good for it https://github.com/remy/nodemon
Also, if you want nodemon to restart your app only if particular files are changed, it is important to have .nodemonignore file in which you can tell changes to which files should be ignored by nodemon.
Example .nodemonignore file :
/public/* # ignore all public resources
/.* # any hidden (dot) files
*.md # Markdown files
*.css # CSS files
.build/* # Build folder
/log/*