I have a Vue.js application that has access API built on node/express. So I setup a process.env.API_URL to 'localhost' for dev and 'MyProductionServer.url' for prod. But the API_URL variable is loaded at built/compile time.
So now if I am to give the Vue app and backend app to customer. Do I need to ask them for their production server url so that I could edit the API_URL variable and build again? How can I make it dynamically so that when the Vue application start, it load a env variable at runtime instead of compile time?
Does dotenv solve this?
in dotenv or rather in .env file you put your dburl, username and password for accessing that db. On your local comp you would have creds for accessing your local db, while when you upload your app to e.g. heroku, you would not upload .env file, but use Heroku config panel to create same vars you had in .env file just with values for live db. Also add .env to .gitignore
as for api's, your frontend needs to know where backend is located so yeah you need to update that base api url. Since this is backend no way to know the live url where those data would be served, on which web server so you need to update this url manualy once in your frontend and thats all.
Related
My Vue app is set up using Vue CLI (Webpack) and it's working as it should. My NodeJS/Express REST API is also working properly. However, to run them simultaneously I now start a local server for each of them -- each with its own port. I would like to have both of them communicate over one port.
Localhost:8080 should point to the home page of my Vue App and the API requests should follow localhost:8080/api/...
In my production environment I use one and the same port/URL by serving the Vue App as a set of static files ('dist' folder). In my development environment I don't know how to set this up, however.
I looked around for answers online, but feel lost among all the different terms I have come across (.env, crossenv, nginx, cors) and that I am running in circles.
What would be a good way of setting this up?
Thank you
Edit:
I ended up creating three modes to run my application:
Development
I use one script in a package.json to start the frontend and backend server on different ports, using pm2 to run the servers in the 'background' rather than blocking further commands in the terminal/cmd. I use configured a proxy inside my vue.config.js to redirect my API calls made in the frontend to the right base URL and used cors as middleware to allow requests to my API from other domains/ports.
Staging
I use one script in a package.json to build the Vue app into a folder ('dist' folder inside my backend folder) that is a collection of static files and start the backend server. My backend is set up to know when I want to go into staging mode and then serve the static files in the 'dist' folder.
Production
I use one script in a package.json to build the Vue app into a folder ('dist' folder inside my backend folder) that is a collection of static files and push my backend (incl. the built static files) to Heroku.
Well if you need to run both on the same port you could first build your app so that you receive a dist directory or whatever your output directory is named and set up an express server that serves that app and otherwise handles your api requests
const express = require("express");
const path = __dirname + '/app/views/';
const app = express();
app.use(express.static(path));
app.get('/', function (req,res) {
res.sendFile(path + "index.html");
});
app.get('/api', function (req,res) {
// your api handler
}
app.listen(8080)
Assuming that node and the 'app' will always run on the same server you can just use a template library like ejs.
You would then just bundle the app and api together, assuming that the front-end is tied to the backend, realistically you would not even need to hit the API as you could just return the records as part of the view, however if dynamic elements are needed you could still hit the API.
Now, with that said, if the API is something used by many applications then it would probably make sense to build that out as its own microservice, running on its own server and your frontend would be on its own. This way you have separation of concerns with the API and Vue app.
I'm using mern stack in a project I'm working on.
Currently I'm making requests to the rest api like so.
const { data } = await axios.get('http://localhost:5000/api/testimonials/');
The API is available at http://localhost:5000/
but when I will deploy this app that url will change.
With the current approach I have replace http://localhost:5000/ with the live url.
Instead of doing that I want to store the root url in a variable.
What is the best location to store the API root in React JS?
So I can use it in every request I make and when I have to update the url I just have to update that variable.
You can do two things ,
storing them in env variables by creating .env file for each environment
CRA - .env
Don't forget to prefix your names with REACT_APP_ , else it won't work
using proxy in package.json .(This is the preferred way of using api in docs)
It avoids cors error as mentioned in docs
CRA - proxy
You will have to use .env file to save the root url. .env should be located in the root directory.
.env file content:
rooturl=http://yourproductiondomain.com
and you can use process on your code:
const rooturl = process.env.rooturl || 'http://localhost:5000'; // for lcoalhost.. **.env** file does not work on localhost.
const { data } = await axios.get(rooturl + '/api/testimonials/');
I have a running ember.js frontend app. Also have a node.js backend app which can do basic CRUD operations from MongoDB. Using Postman I can see that my node.js app is returning JSON data properly.
I want my frontend to use the backend to do CRUD operations on MongoDB. I am new to ember.js so I want a guideline where I can understand to use the JSON data from the node.js app and use with ember.js frontend.
My ember.js app already is using a mock server. It has a "dist" folder inside.
My adapter/application.js file in ember.js frontend:
import DS from 'ember-data';
export default DS.RESTAdapter.extend({
namespace: 'api'
});
I want to use my localhost:3000 node server here. Do not know where to add it.
DS.RESTAdapter has a host property that allows you to configure the host used:
// app/adapters/application.js
import RESTAdapter from '#ember-data/adapter/rest';
export default RESTAdapter.extend({
host: 'https://api.example.com'
});
But I would not recommend to point that one to a local development server cause that reduces your flexibility. E.g. a team colleague of yours may want to start the local instance on another port. I would recommend to use the --proxy option of Ember CLI's serve command:
ember serve --proxy http://localhost:3000
This will proxy the requests to your local development server.
You may need to customize the adapter and serializer if your API isn't following the defaults of Ember Data's RESTAdapter and RESTSerializer. Please have a look in the guides for a quick introduction to do so.
this is the api call i want to make
http://localhost:3000/api/getUserName
but i am using it in proxy in package.json. i tried to build the app but then call goes to
http://localhost:5000/api/getUserName
i am serving on 5000 so its taking api call also on 5000. so i want to mention 3000 om build. also i have check on google and it says mention it in .ENV cause proxy is not for production, but can anyone provide me .ENV structure that can show to me how to use it from env?
During development, the practice is to use to two servers; one server for the client side, generally localhost:3000, and a second one for the server, generally localhost:5000. When you build for production, reactjs compiles and builds such that it becomes a static resource for the server and the server serves these files.So, your app will be served, wherever you host your server. The production config will depend on what you folder structure looks like. If you are using CRA for your application, you can use this piece of code:
I am assuming that you have your client directory inside your server directory.
if(process.env.NODE_ENV === 'production'){
app.use(express.static('client/build') //path to your build directory
const path = require('path');
app.get('*', (req, res)=>{
res.sendFile(path.resolve(__dirname, 'build','public','index.html');
}
}
Again, I am assuming that you are using CRA to bootstrap your react application and have your client directory inside your server directory. If you are using webpack, then the config will change to indicate the path of the build directory.
I am building an app using angular2 and I want to keep a folder named as 'uploads' at the root of my application. However since in angular the current root is 'src' it does not let me access images inside the uploads folder.
If I try to keep 'uploads' directory inside the src folder then everytime I upload a file to it, it rebuilds the application and refreshes the page. I would want to keep it in suchaway that angular cli doesnt refresh the application in case file upload happens.
I want to access the url like : http://localhost:4200/uploads/xyz.jpg in angular2 app
Thank you
The angular app is a front-end app. It is not meant to be used as file storage. The file storage should be done by a back-end app that will serve the uploaded files to the front-end app.
Using your Front-end
Angular-cli does not compile any folder outside app or assets, so, you need to place the folder inside app or assets.
To access directly, place inside assets and access like localhost:4200/assets/uploads/xyz.jpg.
Remember that you need to be careful because if you use a git versioning system, when you make a pull in your production env, every file uploaded inside assets/uploads will be overwritten by the new version.
Using your Back-end
Put the upload file outside the angular app so when you build or update the angular app nothing will be lost. And use a back-end to serve the files.
You should place the upload folder outside the angular app and serve it using your nodeJs app. Use the static feature of expressJs to serve your file in some endpoint like localhost/uploads/xyz.jpg (if your nodejs is in localhost). So, you don't touch the angular-