I have a simple Angular 4 frontend as well as a node backend which is hosted separately on Heroku.
I deploy my Angular app by running ng build and copying over the contents of the dist folder to the server.
I have since then decided to integrate the backend into the front end so it's all just one project instead of two.
I can easily run node server.js on the root and it runs perfectly on my localhost.
But how can I deploy this to my server? I obviously can't just ng build and copy over the dist folder because that only builds the client folders and files.
Could I just copy over the server folder which holds the routes as well as the server.js file along with the client files and then somehow tell the server to run server.js when the site is loaded?
I use FileZilla to transfer my files onto the server.
Questions:
How do I deploy my angular/node app with FileZilla?
Which files/folders to I copy over with the client files?
If you are using Angular CLI, run ng build command to generate the dist folder.
Copy the dist folder to the backend server nodejs project.
Serve the dist folder using your Nodejs code.
If you are using ExpressJS. This can be done in a single line
app.use(express.static('dist'));
Install Heroku CLI and follow the tutorial to deploy your app: Heroku NodeJS Tutorial
You don't need to build the node app. Node runtime can compile the javascript on the fly.
The build step in angular packages up your code into one file. There is no equivalent in node as there isn't any point. The reason angular minifies and packages a file is so you can download it quickly. You never download the code from node.
On Heroku it's really easy, you don't need to copy anything over just run git push heroku master from the root of your node folder as per the instructions here https://devcenter.heroku.com/articles/getting-started-with-nodejs#deploy-the-app
Just make sure that in your package.json you have all the modules you rely on. It might work locally if you have npm modules installed globally but they also need to be in the package.json so heroku can download them by running npm install
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
I'm trying to deploy this repo
https://github.com/stepseazy/checkers/
to this website
https://stepseazy.github.io/checkers
However, I'm getting 404 errors. I also tried heroku. It does work when I serve the build locally. Not sure what's wrong. Please help!!!
You'll have to distinguish your dev environment and your production one. On dev mode, you run npm start that does things (as instructed in package.json) and act as a local server and serves you project on http://localhost:3000. You simply cannot use that in production mode on Github or Heroku.
You need to deploy the built version, running npm run build. It will create a javascript file in a dist folder. You might want, on Github, create a gh-pages branch, build this production ready file on it, create an index.html file that serves it, and commit that.
I'm no expert on Heroku but it might be a slightly similar case (run post-deploy scripts that build your app and serve it through an index.html file).
Hope that help.
I tried to run index.html inside dist folder in the browser but its not working, unlike the angularjs application where we import the script file in the index.html and the application simply works.
Why we can't do that in the Angular Project as there are some javascript files which are imported in the index.html same as any other javascript project.
You can do that in Angular application as well. You need to install http-server for that.
Follow the below steps-
Install http-server from npm server using following command-
npm install http-server -g
Generate the build in dist folder using command-
ng build --prod --aot --output-hashing=none
Run the command to run the project from dist folder-
run http-server ./dist
This will start serving your project from dist folder.
When index.html is being loaded directly in the browser, it doesn't use the http protocol. It is being loaded over the local file system over file:/// Browsers don't allow direct access to the .js files from a file system because of the security reasons.
The file system is not providing needed features of a server which is required. Github comment with some more details.
At a minimum, a simple static HTML server is required to run the Angular applications.
Angular apps are perfect candidates for serving with a simple static HTML server. You don't need a server-side engine to dynamically compose application pages because Angular does that on the client-side. Read More
I have a node.js file that runs locally when I run it and it sends the user a text notification via the Twilio service. However, I'm trying to deploy it to my AWS Ubuntu server (EC2) so I can use it now on my actual website, but I'm not sure how to upload a local file to my instance like I did when I was following this tutorial (https://hackernoon.com/tutorial-creating-and-managing-a-node-js-server-on-aws-part-1-d67367ac5171) when I initially mkdir server and then cd into it which ultimately contained index.js, node_modules, and server file.
Now on my local folder, it also contains a folder called node_modules that currently has an express folder and a Twilio helper folder. So would I have to put the Twilio folder within the node_modules folder in AWS and is there a way to do this through the Terminal?
Additionally, I was curious if my app.js (Node) file would even function if my Twilio file is hosted on a GoDaddy server? I hope I made sense and any help is appreciated.
You can use the rsync command line utility (available on Linux, Mac, but also on Windows with Cygwin).
The way you'd use it is:
rsync -e 'ssh -i YOUR_AWS_KEY.pem' -avh /path/to/your/local/folder YOUR_AWS_USER#YOUR_AWS_HOSTNAME:/your/remote/path
this is probably a silly question but am new to Meteor and struggling a bit. I want to build a stellar app that tweets when you get stellar. There is a nice Javascript API stellar-lib that works on node, but im unsure how to access the modules in Meteor...
I'm also building an app with Meteor and stellar-lib and have found two options:
1) You can manually copy over the built stellar-lib.js or stellar-lib-min.js from the build/ directory from either the github repo or the node_modules folder you installed it to when you ran the npm install command.
If you do this, you will have to copy the .js file to client/compatibility, otherwise stellar-lib will not work (note: this means you can only use Stellar on the client).
2) If you need it on the server, you can also have browserify wrap stellar-lib for you, then copy the output to lib/ in your Meteor app's root directory. I did this in my repo here with gulp.
Here's a short explanation to how 2) works:
.gulp is where I'll install my NPM modules where they will be ignored by the Meteor build environment (because the folder is hidden).
In deps.js, I require the modules I would want to use in my Meteor app as I would if I was using them in a traditional node.js app. package.json defines the modules I'll install with NPM and the gulpfile.js describes a build task that will resolve my require statements and output a single deps.js file that includes my dependencies to my Meteor app's lib/ folder.